我的頁面上有一個 ListView.builder，它根據各種引數將 Columns 包裝在其中。
我的代碼看起來像這樣：
ListView.builder(
itemCount: sortedList.length,
itemBuilder: (BuildContext context, int index) {
Render Column 1,
Render Column 2,
Render Column 3
}
我的專欄看起來像這樣：
Column(
mainAxisSize: MainAxisSize.min,
children: [
Child 1,
Child 2,
]
)
我想要的是 ？現在轉到第 3 列，我希望在螢屏頂部顯示一個孩子，在螢屏底部顯示一個孩子。像這樣的東西：
如您所見，我希望第 3 列占用頁面的所有可用空間，然后它可以將其中一個子元素對齊到頂部，將一個子元素對齊到底部。我可以通過簡單地添加 MainAxisAlignment.spaceBetween 來做到這一點，但現在我不知道如何允許此列占用此 ListView 內的所有可用空間。
誰能告訴我我們可以在這里做什么？提前致謝！
uj5u.com熱心網友回復：
要填充剩余的間距，您可能需要使用 CustomScroll、一些適合您的 sliver 小部件和用于填充滾動視圖的剩余間距的SliverFillRemaining 。您可以在dartpad上嘗試以下示例
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate(
[
Container(color: Colors.red, height: 50.0),
Container(color: Colors.purple, height: 75.0),
],
),
),
SliverFillRemaining(
hasScrollBody: false,
child: Container(
color: Colors.green,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Text('remaining'),
),
),
),
],
);
}
uj5u.com熱心網友回復：
如果你不依賴串列視圖，你可以使用這種方法：
return Scaffold(
body: Builder(
builder: (context) => SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height,
),
child: IntrinsicHeight(
child: SafeArea(
child: Column(
children: [
Column(
children: [
Text('Column1'),
],
),
Column(
children: [
Text('Column2'),
],
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Column 3 child 1'),
Text('Column 3 child 2'),
],
),
),
],
),
),
),
),
),
));
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/490214.html
下一篇：如何在現有成員中編輯影像