我想要一个包含ListView
或SingleChildScrollView
或任何滚动的高度可变的小部件。
我试着这样做:
Container(
color: Colors.pink,
child: Column(
children: [
Container(color: Colors.orange, child: Text("Header")),
SingleChildScrollView(
child: Container(
height: 10000,
color: Colors.green,
child: Text("the height of this content could be anything")),
),
Container(color: Colors.blue, child: Text("Footer")),
],
),
)
这会导致溢出,因为
SingleChildScrollView
扩展到10000像素的高度。如果我把它放在一个Expanded
中,那么它会很好地工作,但是如果它的子窗口的高度是200而不是10000,那么它仍然会将父窗口小部件扩展到屏幕的整个高度。是否可以让滚动/列表的高度自行调整到其内容,并且仅在需要时扩展到整个屏幕?
最佳答案
如果您知道footer
和header
小部件的大小,并使用LayoutBuilder
小部件获取约束,则可以这样做。
@override
Widget build(BuildContext newcontext) {
return Center(
child: Scaffold(
body: Container(
color: Colors.pink,
child: LayoutBuilder(
builder: (_, constraints) {
final sizeHeader = 150.0;
final sizeFooter = 150.0;
final sizeList = 1000.0;
final available =
constraints.maxHeight - (sizeHeader + sizeFooter);
Widget _buildCenterWidget() {
return Container(
height: sizeList,
color: Colors.green,
child: Text("the height of this content could be anything"),
);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: sizeHeader,
color: Colors.orange,
child: Text("Header")),
available < sizeList
? Expanded(
child: _buildCenterWidget(),
)
: _buildCenterWidget(),
Container(
height: sizeFooter,
color: Colors.blue,
child: Text("Footer")),
],
);
},
)),
),
);
}
关于flutter - 可变大小的ListView或SingleChildScrollView,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57030736/