Flutter - Widget的生命周期

前言

---

生命在于不断学习，探索未知的世界！！！

---

就像在iOS开发中ViewController有生命周期一样，Flutter中的widget对象也有它的生命周期，那么今天我们就来一探究竟！

生命周期

什么是生命周期？
说白了生命周期就是一系列回调方法，从初始化到销毁的这么一个过程，每个回调方法就是让我们知道当前的这个Widget正在处于什么样的状态！
生命周期有啥作用？

1. 监听Widget的事件
2. 初始化数据
   • 创建数据
   • 发送网络数据
3. 内存管理
   • 销毁数据、销毁监听者
   • 销毁Timer 等等

StatelessWidget 的生命周期

下面我们通过一个例子：

class StateLessDemo extends StatelessWidget {
  final String? title;
  StateLessDemo({this.title}) {
    print('构造函数被调用了');
  }

  @override
  Widget build(BuildContext context) {
    print('build方法被调用了');
    return Scaffold(
        appBar: AppBar(
          title: Text('demo'),
        ),
        body: Center(
          child: Text(title ?? 'lcr'),
        ));
  }
}

StatelessWidget生命周期

由打印结果可知，StatelessWidget 的生命周期中包括构造方法及build方法。（当然，此处没有写dispose方法）

StatefullWidget的生命周期

同样我们举个例子：

class MyHomePage extends StatefulWidget {
  final String? title;
  MyHomePage({this.title}) {
    print('Widget构造函数被调用了！');
  }

  @override
  // ignore: no_logic_in_create_state
  _MyHomePageState createState() {
    print('createState来了！');
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State {
  int _count = 0;

  _MyHomePageState() {
    print('State的构造方法');
  }
  @override
  void initState() {
    print('State的init方法');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print('State的build方法被调用了！');
    return Scaffold(
      appBar: AppBar(
        title: Text('demo'),
        backgroundColor: Colors.blue,
      ),
      body: Column(
        children: [
          ElevatedButton(
              onPressed: () {
                _count++;
                setState(() {});
              },
              child: const Icon(Icons.add)),
          Text('$_count')
        ],
      ),
    );
  }

  @override
  void dispose() {
    print('State的dispose');
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    print('didChangeDependencies');
    super.didChangeDependencies();
  }
}

StatefullWidget生命周期

从打印结果来看，StatefullWidget 的生命周期的回调方法就更多了，因为其中包含了两个对象（Widget、State）。

1. 构造Widget这个对象
2. 调用CreateState去构建State对象
3. State对象的构造方法
4. State对象initState方法（一般初始化数据及网络请求数据在这步进行）
5. didChangeDependencies方法 （改变依赖关系，依赖的InheritedWidget发生变化之后，方法也会调用，这是和数据共享有关，之后的文章会详细举例）
6. State 的build方法
7. Widget 销毁时，会调用State的dispose方法

点击➕按钮

当我们点击加按钮时，_count++，setState(() {}),随即打印的结果如下图：

setState时打印

所以，当setState调用时，只有State的build方法会重新运行，也就是界面会重新渲染。