第 5 课：父级约束与SizedBox

• 日期：2026-09-03
• 课程序号：第 5 课
• 知识点：约束下传、尺寸回传与紧约束

用途

解释为什么写了宽度 200，组件却只能显示为宽度 120。

核心概念

• 组件只能在父级约束允许的范围内选择尺寸，不能仅看自己的 width。
• SizedBox 向子级传递指定尺寸的紧约束；Align 可在自己的空间内给子级较宽松的约束。

最小代码或操作示例

import "package:flutter/material.dart";
void main() => runApp(const MaterialApp(
  home: Scaffold(body: Center(
    child: SizedBox(
      width: 120, height: 60,
      child: SizedBox(
        width: 200, height: 100,
        child: ColoredBox(color: Colors.blue),
      ),
    ),
  )),
));

3～5 分钟练习

在足够大的窗口运行，预测蓝块尺寸；再把外层改成 240×120，并在两层 SizedBox 之间加入 Align(alignment: Alignment.center, child: ...)。

参考答案

原蓝块为 120×60，因为内层必须服从外层紧约束。外层为 240×120 且加入 Align 后，内层可以选择 200×100，在外层居中。

与上一课的联系

上一课拆分父子组件并传递状态；本课改看父子之间的布局约束，与业务状态无关。

参考资料

• 官方文档：父级约束与SizedBox（2026-09-03 核对；以文档标注版本及本机界面为准）。