在我的 Flutter 應用程式中，我有一個 ListView：
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
children: [
Container(
color: Colors.yellow,
height: 100
),
const SizedBox(height: 10),
// How to make this container fill up the remaining height?
Container(
color: Colors.black,
),
],
),
),
),
);
這會產生以下視圖：
問題：如何讓第二個框（黑色背景）填滿剩余空間？如果框的內容超過剩余空間，ScrollView 將啟用滾動。
這可能嗎？
uj5u.com熱心網友回復：
您可以獲取大小，然后為每個設定一個比例......并設定 NeverScrollableScrollPhysics() 以確保沒有輕微的滾動，如下所示，這似乎得到了您正在尋找的內容。
Widget build(BuildContext context) {
Size _size = MediaQuery.of(context).size;
return Container(
child: Scaffold(
body: SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
physics: NeverScrollableScrollPhysics(),
children: [
Container(color: Colors.yellow, height: _size.height * 0.20),
SizedBox(height: _size.height * 0.10), // How to make this container fill up the remaining height?
Container(
height: _size.height * 0.70,
color: Colors.black,
),
],
),
),
),
));
}
}
uj5u.com熱心網友回復：
試試下面的代碼希望它對你有幫助。
uj5u.com熱心網友回復：
填充 ListView 的剩余空間意味著填充無限高度。Stack在這種情況下，我更喜歡使用as body，希望您可以簡單地將其存檔。
沒有堆疊怎么辦？
在這種情況下，我們可以獲取高度并在內部子Column節點Expanded上使用它，即使對于動態高度，它也會填充剩余空間。
我更喜歡使用LayoutBuilder來獲取高度。
body: LayoutBuilder(builder: (context, constraints) {
return SafeArea(
child: Container(
color: Colors.blueAccent,
child: ListView(
children: [
SizedBox(
// 1st child of listView
height: constraints.maxHeight,
child: Column(
children: [
Container(color: Colors.yellow, height: 100),
const SizedBox(height: 10),
Expanded(
child: Container(
color: Colors.black,
),
),
],
),
)
],
),
),
);
}),
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/375663.html
標籤：扑
下一篇：剪輯在畫布之外繪制的物件