flutter的widget的执行顺序,单个组建的执行顺序

Flutter Widget 执行顺序详解

单个 Widget 的执行顺序

在 Flutter 中,单个 Widget 的生命周期执行顺序如下:

1. 创建阶段 (Creation)

  • 构造函数:Widget 首先通过构造函数被创建

  • createState():对于 StatefulWidget,会调用 createState() 方法创建对应的 State 对象

2. 初始化阶段 (Initialization)

  • initState():StatefulWidget 的 State 对象被插入到树中时调用(只调用一次)

  • didChangeDependencies():在 initState() 之后立即调用,或当依赖的 InheritedWidget 发生变化时调用

3. 构建阶段 (Building)

  • build():构建 Widget 的 UI 表示,这个方法会被频繁调用

4. 更新阶段 (Update)

  • didUpdateWidget():当父 Widget 重建并需要更新当前 Widget 时调用

  • setState():触发 Widget 重新构建

5. 销毁阶段 (Disposal)

  • deactivate():当 State 从树中移除时调用

  • dispose():当 State 对象被永久移除时调用(释放资源)

完整执行顺序流程图

text

复制代码
构造函数 → createState() (仅Stateful) → initState() → didChangeDependencies() → build()
       ↑                                ↓
       ←────── didUpdateWidget() ←───────
       ↓
deactivate() → dispose()

不同类型 Widget 的执行差异

StatelessWidget

  1. 构造函数

  2. build()

StatefulWidget

  1. 构造函数

  2. createState()

  3. State 类的构造函数

  4. initState()

  5. didChangeDependencies()

  6. build()

  7. (更新时) didUpdateWidget()

  8. (销毁时) deactivate()

  9. dispose()

重要说明

  • build() 方法:可能被频繁调用,应保持轻量级

  • initState():适合执行一次性初始化操作

  • dispose():必须释放所有控制器、订阅等资源

  • 热重载:会重新创建 Widget 但保留 State,触发 build() 但不触发 initState()

理解这些执行顺序对于正确管理 Widget 生命周期和状态至关重要。

相关推荐
风华圆舞26 分钟前
鸿蒙 + Flutter 下 AI 页面的状态协同设计
人工智能·flutter·harmonyos
风华圆舞2 小时前
鸿蒙语音播报功能 的 Flutter 侧封装思路
flutter·华为·harmonyos
brycegao3212 小时前
Flutter 国际化富文本解决方案:基于双层占位符的轻量化图文混排方案
flutter·国际化·i18n·富文本·rtl·移动端工程架构
风华圆舞2 小时前
鸿蒙 + Flutter 下美食探索场景为什么 AI 推荐比传统搜索更自然
flutter·harmonyos·美食
MemoriKu3 小时前
Flutter 相册 APP 收尾优化实战:未分析任务横幅持久隐藏与标签回归测试补强
大数据·人工智能·flutter·elasticsearch·机器学习·搜索引擎·重构
风华圆舞4 小时前
鸿蒙 + Flutter 如何把 AI 助手嵌进应用页面里——以食界探味为
人工智能·flutter·harmonyos
风华圆舞5 小时前
鸿蒙 + Flutter 下如何管理 AI 会话——AgentService 设计解析
人工智能·flutter·harmonyos
spmcor20 小时前
Flutter 学习笔记 (3):布局初探 —— Row、Column、Stack 与 Container
flutter
风华圆舞21 小时前
DevEco Studio 和 Flutter 工具链如何协同工作
flutter·华为·架构·harmonyos
朱莉^_^JuneLee1 天前
Flutter 性能优化实战:用 ConsumerWidget + select 做到真正的局部刷新
flutter