Flutter Widget 生命周期

最新推荐文章于 2025-06-30 17:22:14 发布

原创最新推荐文章于 2025-06-30 17:22:14 发布 · 889 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Widget生命周期

Flutter 专栏收录该内容

112 篇文章

订阅专栏

这篇博客详细介绍了Flutter中StatefulWidget的生命周期，包括初始化、更新和销毁三个阶段的关键方法：createState、initState、didChangeDependencies、build、didUpdateWidget、deactivate和dispose。在每个方法中，作者阐述了其调用时机和主要用途，如initState用于初始化工作，build用于构建页面内容，而dispose则用于释放资源。此外，还提供了一个示例代码来展示这些生命周期方法的调用顺序。

Flutter Widget什么周期主要讲解 StatefulWidget 的生命周期：应为无状态就两种;
StatelessWidget 两个生命周期
@override
StatelessElement createElement() => StatelessElement(this);

@protected
Widget build(BuildContext context);

StatefulWidget

StatefulWidget 生命周期按照不同时期可以分为三组：
1.初始化：
         createState, initState
2.更新时期
         didChangeDependencie, build, didUpdateWidget
3.销毁期
         deactivate, dispose

createState 构造函数之前调用

initState

◉ 创建 Widget 时 除了构造函数以外 第一个被调用的方法
◉ 类似 android: onCreate()  ios: viewDidLoad()
◉ 在这个方法中 一般会做一些初始化工作， 比如： channel的初始化； 监听器的初始化

didChangeDependencies

◉ 当依赖的 State对象发生改变的时候  调用
 a. 在第一次构建 Widget时， 在initState() 之后会立即调用 此方法
 b. 如果StatefulWidget 依赖 InheritedWidget, 那么当前 State 所依赖的 
◉ InheritedWidget 中的变量改变时会再次调用 该方法
◉ 拓展：InheritedWidget 可以高效的将数据在 Widget 树中向下传递，共享 ；https://book.flutterchina.club/chapter7/inherited_widget.html

build

◉ 这是一个必须实现的方法：在这里实现你要呈现的页面内容
◉ 它会在 didChangeDependencies（） 之后体积调用
◉ 另外当调用 setState() 后也会再次调用 该方法

didUpdateWidget

◉ 这是一个不常用的生命周期方法； 当父组件需要重新绘制的时候才会调用
◉ 该方法会携带一个 oldWidget， 可以将其与当前的 widget进行对比 以便更新一些额外的逻辑
◉ if( oldWidget.xx != widget.xxx) ...

deactivate

◉ 很少使用，在组件被移除调用； 在 dispose 之前调用

dispose

◉ 常用 在组件被销毁时 调用
◉ 通过在该方法中执行 一些资源释放工作 比如： 监听器的卸载， channel 的销毁

I/flutter (21669): ------------>createState
I/flutter (21669): ------------>initState
I/flutter (21669): ------------>didChangeDependencies
I/flutter (21669): ------------>build 第一次自己调用
I/flutter (21669): ------------>build setState 引起的调用
I/flutter (21669): ------------>build setState 引起的调用
I/flutter (21669): ------------>deactivate
I/flutter (21669): ------------>dispose

import 'package:flutter/material.dart';

class FlutterLife extends StatefulWidget {
  //createState 立即调用；必须重写
  @override
  State<StatefulWidget> createState() {
    print("------------>createState");
    return _FlutterLifeState();
  }
}

class _FlutterLifeState extends State<FlutterLife> {
  int clickCount = 0;

  ///创建 Widget 时 除了构造函数以外 第一个被调用的方法
  ///类似 android: onCreate()  ios: viewDidLoad()
  ///在这个方法中 一般会做一些初始化工作， 比如： channel的初始化； 监听器的初始化
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print("------------>initState");
  }

  ///当依赖的 State对象发生改变的时候  调用
  /// a. 在第一次构建 Widget时， 在initState() 之后会立即调用 此方法
  /// b. 如果StatefulWidget 依赖 InheritedWidget, 那么当前 State 所依赖的 InheritedWidget 中的变量改变时会再次调用 该方法
  /// 拓展：InheritedWidget 可以高效的将数据在 Widget 树中向下传递，共享 ；https://book.flutterchina.club/chapter7/inherited_widget.html
  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
    print("------------>didChangeDependencies");
  }

  /// 这是一个必须实现的方法：在这里实现你要呈现的页面内容
  /// 它会在 didChangeDependencies（） 之后体积调用
  /// 另外当调用 setState() 后也会再次调用 该方法
  @override
  Widget build(BuildContext context) {
    print("------------>build");
    String title = (ModalRoute.of(context)!.settings.arguments as Map)['desc'];
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.only(top: 28),
              child: Text('点击了：$clickCount'),
            ),
            Divider(
              height: 20,
            ),
            FlatButton(
              onPressed: () {
                setState(() {
                  ++clickCount;
                });
              },
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(25),
                ),
                width: double.infinity,
                height: 50,
                child: Center(
                  child: Text(
                    '点击累计更新',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  /// 这是一个不常用的生命周期方法； 当父组件需要重新绘制的时候才会调用
  /// 该方法会携带一个 oldWidget， 可以将其与当前的 widget进行对比 以便更新一些额外的逻辑
  /// if( oldWidget.xx != widget.xxx) ...
  @override
  void didUpdateWidget(covariant FlutterLife oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
    print("------------>didUpdateWidget");
  }

  /// 很少使用，在组件被移除调用； 在 dispose 之前调用
  @override
  void deactivate() {
    // TODO: implement deactivate
    super.deactivate();
    print("------------>deactivate");
  }

  /// 常用 在组件被销毁时 调用
  /// 通过在该方法中执行 一些资源释放工作 比如： 监听器的卸载， channel 的销毁
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    print("------------>dispose");
  }
}