Question

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

像这样

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

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

尝试了在 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')),
                  ])),
        )),
      ),
    );
  }
}

Answer 1

经过多次反复试验，使用 LayoutBuilder 和 IntrinsicHeight 之类的东西没有成功，我终于为我使用 CustomScrollView 和 {{1} 的用例制定了解决方案} 名为 Sliver 的小部件。

SilverFillRemaining

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

在滚动视图中带有扩展小部件的颤动列

1 个答案: