如何在 Flutter 中创建一个可滚动的列，如果它不占用所有空间，它会在某处扩展？

Question

我试图创建一个可滚动的列，在屏幕底部有一个小部件，如果它不填满它。但是，如果它这样做，它就会滚动。

首先，我尝试了一个简单的Column与MainAxisSize.max和Expand与一个空的Container工作良好，直到列溢出。

[...]
Column(
mainAxisSize: MainAxisSize.max,
children: [
MyWidget(),
MyWidget(),
[...],
MyWidget(),
Expand(child: Container()),
ElevatedButton()
],
)

然后我搜索并找到了Column可滚动的推荐解决方案是SingleChildScrollView。这使得我在列中的所有小部件都消失了(我仍然不确定为什么)，直到我删除了Expand，虽然解决了一个问题，但引入了另一个问题。

[...]
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
MyWidget(),
MyWidget(),
[...],
MyWidget(),
// Expand(child: Container()),
ElevatedButton()
],
)
)

所以我的问题是，我怎么能使列既可滚动，如果它不需要所有的空间来扩展，使最后一个子是在屏幕的底部?

Answer 1

IntrinsicHeight太贵而无法使用，但是在这种情况下您别无选择。试试这个:

LayoutBuilder(builder: (context, constraint) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraint.maxHeight),
child: IntrinsicHeight(
child: Column(
children: [
Container(
color: Colors.red,
height: 400,
width: double.infinity,
),
Expanded(
child: Container(
color: Colors.blue,
width: double.infinity,
),
),
],
),
),
),          
);
})

在这个例子中，如果你设置了蓝色的container的高度，你会看到scrollview的工作，如果你使用Expanded，它采用可用的大小。