📚 课程目录第4章 Flutter Widget与布局体系

4. Flutter Widget 与布局体系

一线大厂（字节、阿里、美团）在 Flutter 布局上重点考察：约束传递机制、性能优化（避免不必要的 build）、状态管理与 Widget 生命周期的协同。中小厂则侧重常用布局组件使用熟练度和简单自定义布局能力。

面试官多为资深移动端工程师或架构师，提问逻辑：先用简单问题（如 Column vs Stack 区别）建立基础印象，再通过“布局约束如何传递”追问底层原理，最后用“如何优化列表性能”考察实战经验。

考察点	对布局约束机制的理解；能否结合具体 Widget（如 Container、Flex）讲清流程。
回答框架	明确父 Widget 通过 BoxConstraints 给子 Widget 设置约束区间（minWidth/maxWidth, minHeight/maxHeight）。子 Widget 在约束范围内计算自己的尺寸，并返回给父 Widget。父 Widget 根据子 Widget 返回的尺寸确定最终位置（align 或 offset）。举例：Flex 派生的 Row/Column 使用 tight 或 loose 约束控制子项拉伸。
示例回答	“比如我写一个 SizedBox(width:100, child:Container(width:200))。SizedBox 会给子 Container 传递 exact 约束（minWidth=100, maxWidth=100）。Container 会忽略自己的 width:200，最终宽度为 100。这就是约束向下传递的体现——子组件只能在父级划定的范围内执行。” 场景：布局对齐动作：设置约束结果：width 被父级约束覆盖
可能追问	Unbounded 约束出现的情况？如何处理？LimitBox 的作用？
避坑提醒	不要只背口诀，必须举例说明 SizedBox、ConstrainedBox、Align 等组件的约束差异。

考察点	是否理解 Widget 是不可变的、State 是可变的；是否熟悉 initState、didUpdateWidget、dispose 等关键方法。
回答框架	StatelessWidget 只依赖自身配置，不可变；StatefulWidget 配合 State 对象管理可变状态。 State 生命周期：initState → build → didUpdateWidget → setState 触发 rebuild → deactivate → dispose。重点说明：didUpdateWidget 何时调用（父 widget 重建且 runtimeType 不变时）。
示例回答	“我在一个带刷新按钮的计数器组件中使用了 StatefulWidget。点击按钮触发 setState，框架比较新旧 Widget，重新调用 build。注意 dispose 里移除了定时器，避免内存泄漏。而 StatelessWidget 用于纯展示的标题文字，因为不需要改变。” 场景：计数器+定时器动作：setState → dispose 结果：无泄漏，UI 随状态更新
可能追问	State 中如何获取旧 Widget？didChangeDependencies 与 InheritedWidget 的关系？
避坑提醒	不要混淆 Widget 本身的生命周期和 State 生命周期；State 对象不会因为 Widget 重建而重置（只要 key 不变）。

考察点	布局组件选择合理性；是否了解 overflow 处理、flex 比例分配、交叉轴对齐。
回答框架	Row/Column 适用于单方向等比例或固定尺寸布局。 Stack 用于层叠（类似 Android FrameLayout），通过 Positioned 或 Align 控制子位置。 Flex 是 Row/Column 的底层实现，可设置 direction。性能陷阱：Column 内嵌大量子组件导致 build 耗时；用 ListView 替代；避免过深的嵌套。
示例回答	“开发个人中心页时，顶部用 Column 排列头像、昵称和简介，中间用 Expanded 占据剩余高度。后来发现列表项超过 10 个时滑动卡顿，改用 ListView.builder 按需构建。Stack 用于实现头像右上角的红点徽章，利用 Positioned right/top 定位。” 场景：个人中心页动作：Expanded + ListView.builder 替换 Column 结果：滑动帧率从 30fps 提升到 58fps
可能追问	Expanded vs Flexible 区别？如何避免 unbounded 约束导致的黄色溢出警告？
避坑提醒	不要在 ListView、SingleChildScrollView 内直接嵌套 Column 而不设置 shrinkWrap，否则会出现 unbounded height 错误。

组件	方向	尺寸行为	对齐方式	适用场景
Row / Column	水平 / 垂直	非弹性轴 Tight，弹性轴 Loose	mainAxisAlignment / crossAxisAlignment	线性布局、组合表单
Stack	无方向（层叠）	默认撑满父容器	Positioned / Align	图标叠加、遮罩层
Flex (低层)	可指定 Axis	通过 flex 值分配剩余空间	与 Row/Column 相同	自定义 flex 比例场景
Wrap	自动换行	按子组件大小排列	runAlignment + alignment	标签列表、搜索热词
ListView.builder	垂直/水平滚动	按需构建（lazy）	itemExtent / prototypeItem	长列表、聊天消息

  💡 面试加分点：能主动说出“使用 RepaintBoundary 包裹频繁 rebuild 的 Widget 减少重绘范围” 或 “利用 const 构造函数让 Widget 不可变以减少 diff 开销”。

📌 本章备考建议：
✅ 手写一个自定义 RenderBox 体验布局约束流程
✅ 列出 State 生命周期 5 个主要方法及触发条件
✅ 准备 1-2 个布局优化实际案例（如用 LayoutBuilder 替代硬编码尺寸）