# 布局约束规则
# 让子元素竟可能的大,撑满父元素
- 在 main 函数中,直接创建 Container 显示
void main(List<String> args) {
runApp(build());
}
Widget build() {
return Container(
width: 200,
height: 200,
color: Colors.amber,
);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 确认位置后,按子元素大小显示
- 用 Center 包裹 Container
void main(List<String> args) {
runApp(build());
}
Widget build() {
return Center(
child: Container(
width: 200,
height: 200,
color: Colors.amber,
),
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 核心规则: Constraints go down. Sizes go up. Positions are set by parents.
约束减少,尺寸增加,位置由父母决定。
- 上层 widget 向下层 widget 传递约束条件。
- 下层 widget 向上层 widget 传递大小信息。
- 上层 widget 决定下层 widget 的位置。
- 我们写3个文字组件纵向排列
- 宽度
0.0 <= w <= 303.0
, 高度0.0 <= h <= 523.0
, 就是上层传下来的约束
- 宽度
w=32.0
, 高度h=16.0
就是组件向上层传递的大小信息
- 元素左边
w=7.5
, 右边w=7.5
,就是上层决定下层的组件位置