时间戳

首页 > 解决方案 > 滚动视图内带有扩展小部件的颤振列

flutter - 滚动视图内带有扩展小部件的颤振列

问题描述

我正在尝试创建一个顶部有内容的列，底部有更多内容，如页脚，中间有填充空间。此外，当屏幕对于顶部内容 + 页脚内容（小型设备、键盘打开等）而言太小时，它需要滚动

像这样的东西

滚动

当内容大于屏幕时，它应该滚动

flex 不滚动

当内容小于屏幕时，中间弯曲

尝试了一些在 SO 上找到的不同方法，但无法弄清楚如何让它发挥作用。给定singleChildScrollView一个Column无限的高度，Flexible它将抛出一个错误，因为它是无界的。

此刻的代码

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.grey,
        child: SafeArea(
            child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) => SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: 250,
                        color: Colors.greenAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Content')),
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: 250,
                        color: Colors.pinkAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Content')),
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: 250,
                        color: Colors.pink.shade100,
                        margin: EdgeInsets.all(8),
                        child: TextField()),
                    Flexible(
                      child: Container(
                          alignment: Alignment.center,
                          color: Colors.blueAccent,
                          margin: EdgeInsets.all(8),
                          child: Text('Flex')),
                    ),
                    Container(
                        alignment: Alignment.center,
                        height: 100,
                        width: 250,
                        color: Colors.redAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Footer')),
                  ])),
        )),
      ),
    );
  }
}

标签： flutterdartflutter-layout

解决方案

经过多次试验和错误，使用类似的东西没有成功LayoutBuilder，IntrinsicHeight我终于为我使用的用例CustomScrollView和一个Sliver名为SilverFillRemaining.

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.grey,
        child: SafeArea(
            child: CustomScrollView(
          slivers: [
            SliverFillRemaining(
              hasScrollBody: false,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: double.infinity,
                        color: Colors.greenAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Content')),
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: 250,
                        color: Colors.pinkAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Content')),
                    Container(
                        alignment: Alignment.center,
                        height: 150,
                        width: 250,
                        color: Colors.pink.shade100,
                        margin: EdgeInsets.all(8),
                        child: TextField()),
                    Flexible(
                      fit: FlexFit.tight,
                      child: Container(
                          alignment: Alignment.center,
                          color: Colors.blueAccent,
                          margin: EdgeInsets.all(8),
                          child: Text('Flex')),
                    ),
                    Container(
                        alignment: Alignment.center,
                        height: 100,
                        width: 250,
                        color: Colors.redAccent,
                        margin: EdgeInsets.all(8),
                        child: Text('Footer')),
                  ]),
            ),
          ],
        )),
      ),
    );
  }
}

希望能帮助其他有类似用例的人

推荐阅读