Flutter有状态组件StatefulWidget生命周期详解

下面详细讲解Flutter有状态组件StatefulWidget生命周期的完整攻略。

Flutter有状态组件StatefulWidget生命周期详解

什么是Flutter的生命周期

Flutter的生命周期是指Widget从创建到销毁的整个生命周期过程。在这个过程中，Flutter会自动调用相应的生命周期函数，以便开发者可以执行必要的操作。

StatelessWidget和StatefulWidget的区别

• StatelessWidget是一个静态的组件，它的属性在创建后不会再发生变化。
• StatefulWidget是一个动态的组件，它的属性在创建后会发生变化。

StatefulWidget生命周期

下面是StatefulWidget的生命周期函数执行顺序：

1. createState(): 创建State对象
2. initState(): 初始化状态
3. didChangeDependencies(): 当State对象依赖的对象发生变化时调用，只会调用一次
4. build(): 构建视图
5. didUpdateWidget(): 当Widget重新构建时调用，只会调用一次
6. deactivate(): 在State对象从树上被移除时调用
7. dispose(): 销毁State对象
8. setState(): 当State对象的状态发生改变时调用

StatefulWidget生命周期示例

下面是一个简单的示例，涉及一个基本的计数器小部件实现。

import 'package:flutter/material.dart';

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    print("initState");
  }

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

  @override
  void dispose() {
    super.dispose();
    print("dispose");
  }

  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      appBar: AppBar(title: Text("Counter App")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline2,
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  _counter++;
                });
              },
              child: Text("Increase"),
            ),
          ],
        ),
      ),
    );
  }
}

上述代码中initState函数在初始化状态时自动调用，didChangeDependencies函数在依赖项改变时调用，dispose函数在销毁组件时调用，而build函数根据需要反复调用。

StatefulWidget生命周期示例2

下面是另外一个示例，这个示例涉及到更复杂的业务逻辑，展示了StatefulWidget完整的生命周期。

import 'package:flutter/material.dart';

class ExampleApp extends StatefulWidget {
  @override
  _ExampleAppState createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  int _counter = 0;

  //首次插入到widget树时调用，只执行一次
  @override
  void initState() {
    super.initState();
    print("initState");
  }

  //在依赖的State对象改变时调用。例如：在之前构建InheritedWidget的父Widget中依赖的InheritedWidget发生改变时会被调用
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("didChangeDependencies");
  }

  //框架构建widget时调用，这个函数是必须实现的，返回一个当前widget的描述信息
  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      appBar: AppBar(title: Text("Example App")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline2,
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  _counter++;
                });
              },
              child: Text("Increase"),
            ),
          ],
        ),
      ),
    );
  }

  //在widget重新构建时，Flutter Framework会调用Widget.canUpdate来检测Widget树中同一位置的新旧节点，然后决定是否需要更新，如果Widget.canUpdate返回true则会调用此回调。正常情况下，由于框架会自动检测，所以我们很少去显式调用该方法
  @override
  void didUpdateWidget(ExampleApp oldWidget) {
    super.didUpdateWidget(oldWidget);
    print("didUpdateWidget");
  }

  //当State对象从树上被移除时，会调用这个回调
  @override
  void deactivate() {
    super.deactivate();
    print("deactivate");
  }

  //组件将被永久从树中移除时调用。通常在这里释放资源
  @override
  void dispose() {
    super.dispose();
    print("dispose");
  }
}

该示例中包括了initState、didChangeDependencies、build、didUpdateWidget、deactivate和dispose函数，这是StatefulWidget生命周期的完整流程。

总结

通过上述示例可以看出，Flutter生命周期函数可以帮助开发者在各个阶段执行必要的操作，从而减少因为状态变化而导致的错误。充分理解StatefulWidget的生命周期是使用Flutter进行开发的前提之一。