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

相关推荐
喵个咪14 小时前
GoWind ShortPlay 拆解:Flutter 沉浸式 Feed 的播放器工程——生命周期、手势状态机与游客降级
前端·flutter·架构
恋猫de小郭2 天前
Flutter 的文字为什么比 SwiftUI 更细?问题主要在 Skia 的 256 项查找表里
android·前端·flutter
好的佩奇2 天前
Dart 之类型系统
flutter·dart
恋猫de小郭3 天前
Dart 3.15 新特性:this 终于支持类型提升了
android·前端·flutter
FungLeo4 天前
成为全栈·Flutter App 篇·主题与可访问性:深浅色、大字号和触控体验
flutter·移动开发·深色模式·可访问性·成为全栈·大字号适配
用户95421573334854 天前
只是选个照片,怎么留下了这么多访问记录?Flutter 图片选择器排查与优化实录
flutter
FungLeo5 天前
成为全栈·Flutter App 篇·第四批复盘:复用了什么,移动端又新增了什么
flutter·移动开发·跨端开发·成为全栈·api契约·全栈复盘
jason.zeng@15022075 天前
使用vscode+flutter开发android程序(入门)
android·vscode·flutter
jason.zeng@15022075 天前
Flutter 项目标准分层目录(repository/dto/page,对齐后端思想)
flutter