# 布局约束规则

本文作者:阳九五 (opens new window)

本站地址:https://blog.56321654.xyz (opens new window)

# 让子元素竟可能的大,撑满父元素

  • 在 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

Images

# 确认位置后,按子元素大小显示

  • 用 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

Images

# 核心规则: Constraints go down. Sizes go up. Positions are set by parents.

约束减少,尺寸增加,位置由父母决定。

  • 上层 widget 向下层 widget 传递约束条件。
  • 下层 widget 向上层 widget 传递大小信息。
  • 上层 widget 决定下层 widget 的位置。

Images

  • 我们写3个文字组件纵向排列

Images

  • 宽度 0.0 <= w <= 303.0 , 高度 0.0 <= h <= 523.0 , 就是上层传下来的约束

Images

  • 宽度 w=32.0 , 高度 h=16.0 就是组件向上层传递的大小信息

Images

  • 元素左边 w=7.5, 右边 w=7.5,就是上层决定下层的组件位置

Images

# 参考

最近更新: 7/29/2025, 9:40:27 AM