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

相关推荐
LinXunFeng12 小时前
Flutter 拖拉对比组件,换装图片前后对比必备
前端·flutter·开源
2501_9197490312 小时前
配置flutter鸿蒙的环境和创建并运行第一个flutter鸿蒙项目【精心制作】
flutter·华为·harmonyos
YUFENGSHI.LJ14 小时前
Flutter 如何使用fvm进行多项目sdk管理
flutter
开心-开心急了16 小时前
关于Flutter与Qt for python 的一些技术、开源、商用等问题
开发语言·python·qt·flutter
猫林老师1 天前
Flutter for HarmonyOS开发指南(四):国际化与本地化深度实践
flutter·华为·harmonyos
猫林老师1 天前
Flutter for HarmonyOS 开发指南(一):环境搭建与项目创建
flutter·华为·harmonyos
sunly_2 天前
Flutter:视频预览功能
javascript·flutter·音视频
勤劳打代码2 天前
条分缕析 —— 通过 Demo 深入浅出 Provider 原理
flutter·面试·dart
2501_915918412 天前
Flutter 加固方案对比与实战,多工具组合的跨平台安全体系(Flutter App 加固/IPA 成品混淆/Ipa Guard CLI/自动化安全流程)
安全·flutter·ios·小程序·uni-app·自动化·iphone
Bryce李小白2 天前
Flutter中mixing的原理及应用场景
flutter