Flutter核心技术与实战11 | 生命周期

2023-10-11 07:02:33

Flutter核心技术与实战11 | 生命周期

在Flutter的世界里，State是构建UI并管理其状态的核心概念。State的生命周期与页面渲染息息相关，理解State的生命周期有助于我们构建更稳定、更健壮的Flutter应用程序。

State的生命周期

State的生命周期可以分为3个阶段：创建（插入视图树）、更新（在视图树中存在）、销毁（从视图树中移除）。在State初始化时，会依次执行：构造方法 -> initState -> didChangeDependencies -> build，随后完成页面渲染。

构造方法

构造方法是State的入口，用于初始化State对象。在构造方法中，我们可以完成一些基本的初始化工作，例如获取参数、设置默认值等。需要注意的是，构造方法不能执行任何异步操作，否则可能会导致UI渲染异常。

initState

initState方法在构造方法之后立即执行，用于进行一些异步操作，例如网络请求、数据库查询等。在initState方法中，我们可以获取数据并更新State，从而触发页面重新渲染。需要注意的是，initState方法只在State第一次创建时执行，不会在后续更新中执行。

didChangeDependencies

didChangeDependencies方法在initState方法之后执行，用于监听依赖项的变化。当依赖项发生变化时，didChangeDependencies方法会被调用，我们可以在此方法中更新State并触发页面重新渲染。

build

build方法是State的核心方法，用于构建UI。在build方法中，我们可以使用Flutter提供的各种组件来构建页面布局，并根据State的数据来渲染页面内容。build方法在State初始化时执行，也会在State更新时执行。

State更新

State更新是指State数据发生变化，从而触发页面重新渲染的过程。State更新可以由用户交互、网络请求或其他因素触发。当State发生更新时，Flutter会自动调用State的build方法，重新构建UI。

State销毁

State销毁是指State从视图树中移除的过程。当页面被销毁时，State也会被销毁。在State销毁之前，Flutter会调用State的dispose方法，以便State可以释放资源并进行一些清理工作。

实战示例

下面我们通过一个实战示例来演示State的生命周期。

class MyState extends State<MyHomePage> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    // 异步获取数据
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        _counter = 10;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyHomePage'),
      ),
      body: Center(
        child: Text('Count: $_counter'),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    // 释放资源
  }
}