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 生命周期和状态至关重要。

相关推荐
jiejiejiejie_7 小时前
Flutter for OpenHarmony 心情日记功能实战指南
flutter·华为
jiejiejiejie_8 小时前
Flutter for OpenHarmony 倒计时功能实战开发
flutter
Math_teacher_fan9 小时前
Flutter 跨平台开发实战:鸿蒙与音乐律动艺术(六)、Lissajous 利萨茹曲线:频率耦合的轨迹艺术
flutter·ui·数学建模·华为·harmonyos·鸿蒙系统
里欧跑得慢9 小时前
17. Flutter Hero动画实现:让界面过渡更加优雅
前端·css·flutter·web
liulian091610 小时前
Flutter for OpenHarmony 跨平台开发:秒表功能实战指南
flutter
xmdy586610 小时前
Flutter+开源鸿蒙实战|智安盾电商溯源平台Day3 溯源查询逻辑+鸿蒙网络请求适配
flutter·开源·harmonyos
maaath11 小时前
【maaath】Flutter 跨平台日历日程应用开发实战
flutter·华为·harmonyos
xmdy586613 小时前
Flutter+开源鸿蒙实战|智安盾电商溯源平台Day2 首页+核心入口UI开发(鸿蒙多端适配)
flutter·开源·harmonyos
jiejiejiejie_13 小时前
Flutter for OpenHarmony 萌系 UI 实战合集:骨架屏 + 引导页一站式指南
flutter·ui·华为
liulian091614 小时前
Flutter for OpenHarmony 跨平台开发:倒计时功能实战指南
flutter