Flutter---生命周期

Flutter 中 Widget 的生命周期分为两大类:StatefulWidget 和 StatelessWidget。

  1. StatelessWidget 生命周期
Dart 复制代码
class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
  1. StatefulWidget 完整生命周期

生命周期方法执行顺序

创建阶段 → 更新阶段 → 销毁阶段

创建阶段

Dart 复制代码
class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  
  // 1. 构造函数
  _MyStatefulWidgetState() {
    print('1. 构造函数调用');
  }
  
  // 2. initState - 最重要的初始化方法
  @override
  void initState() {
    super.initState();
    print('2. initState调用');

  }
  
  // 3. didChangeDependencies - 依赖变化时调用
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('3. didChangeDependencies调用');
    // 用途:处理InheritedWidget依赖变化
    // 在initState之后立即调用,也可能在依赖变化时调用
  }
  
  // 4. build - 构建UI
  @override
  Widget build(BuildContext context) {
    print('4. build调用');
    return Container();
  }
  
  // 5. didUpdateWidget - Widget配置更新时调用
  @override
  void didUpdateWidget(covariant MyStatefulWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('5. didUpdateWidget调用');
    
  }
}

更新阶段

触发更新的方式

Dart 复制代码
// 方式1: setState
setState(() {
  _counter++;
});

// 方式2: 父组件重建传入新props
ParentWidget → MyStatefulWidget(newProps)

// 方式3: InheritedWidget数据变化

更新时的调用顺序

Dart 复制代码
didUpdateWidget() → build()

销毁阶段

Dart 复制代码
// 6. deactivate - 从树中移除时调用
  @override
  void deactivate() {
    print('6. deactivate调用');
    super.deactivate();
    // 用途:临时移除时的清理工作
  }
  
  // 7. dispose - 永久销毁时调用
  @override
  void dispose() {
    print('7. dispose调用');
    // 用途:释放资源、取消订阅、停止动画
   
    super.dispose();
  }
}

完整的生命周期流程图

Dart 复制代码
创建阶段:
构造函数 → initState() → didChangeDependencies() → build()

更新阶段:
setState() 或 props变化 → didUpdateWidget() → build()

销毁阶段:
deactivate() → dispose()
相关推荐
事圆则缓1 小时前
Flutter 状态管理框架对比(六):同一个购物车,四种方案怎么落地?
前端·javascript·flutter
恋猫de小郭18 小时前
Android 原生的 Compose A2UI 也来了,你还抱着 XML 养老吗?
android·前端·flutter
事圆则缓20 小时前
Flutter 状态管理框架对比(三):Riverpod 如何连起购物车与异步价格
开发语言·javascript·flutter
事圆则缓1 天前
Flutter 状态管理框架对比(二):Provider 怎样管住一份购物车
flutter
GitCode官方1 天前
开源鸿蒙跨平台直播|Flutter HCPP 开源鸿蒙实践:让原生视图回到系统合成层
flutter·华为·harmonyos
光影少年1 天前
RN与Flutter架构区别
前端·flutter·react native·react.js·架构·node.js
m0_738185822 天前
Flutter 鸿蒙化实战:flutter_app_minimizer_plus 适配 OpenHarmony,一键最小化应用
flutter·华为·harmonyos·鸿蒙
动物园猫2 天前
Flutter 鸿蒙实战:用 webview_flutter 三方库在 鸿蒙 中内嵌真实网页
flutter·华为·harmonyos
m0_738185822 天前
Flutter 鸿蒙化实战:flutter_app_badger 适配 OpenHarmony,应用角标
flutter·华为·harmonyos·鸿蒙