Container(
color: BColors.tealBackground,
height: MediaQuery.of(context).size.height,
),
Container(
color: BColors.greenBackground,
height: MediaQuery.of(context).size.height / 2,
),
Container(
color: BColors.yellowBackground,
height: MediaQuery.of(context).size.height / 2/2,
),
我認為最后一個 Container 有問題，因為顏色超過了另一個。我應該如何才能“1/2”使它們井然有序？
Container(
color: BColors.redBackground,
height: MediaQuery.of(context).size.height ***, // I do not know what to do with this Container, when i delete this one it looks like the image.
)
uj5u.com熱心網友回復：
用 Column 包裹容器
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.teal,
height: MediaQuery.of(context).size.height / 4,
),
Container(
color: Colors.green,
height: MediaQuery.of(context).size.height / 4,
),
Container(
color: Colors.yellow,
height: MediaQuery.of(context).size.height / 4,
),
Container(
color: Colors.red,
height: MediaQuery.of(context).size.height / 4,
)
],
);
}
uj5u.com熱心網友回復：
更好的方法是使用LayoutBuilder。我認為MediaQuery多次呼叫是不合適的，而且它的孩子完全取決于父母的大小，這就是為什么我更喜歡LayoutBuilder.
Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
return Column(
children: [
Container(
height: constraints.maxHeight / 4,
color: Colors.teal,
),
Container(
height: constraints.maxHeight / 4,
color: Colors.green,
),
Container(
height: constraints.maxHeight / 4,
color: Colors.yellow,
),
Container(
height: constraints.maxHeight / 4,
color: Colors.red,
),
],
);
},
),
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/331002.html