Flutter state和App生命周期介绍

一、State生命周期介绍
Flutter中一切皆widget。widget分为无状态和有状态两种，分别是StatelessWidget和StatefulWidget。无状态组件只加载一次，无生命周期。有状态组件可以根据数据来更新，下面介绍一下有状态组件的生命周期。

Flutter的生命周期包含一下几个阶段：

CreateState 该函数为StatefulWidget创建State时调用的方法，当StatefulWidget被调用时候会立即调用此方法。
initState 该方法为State初始化调用，因此在此期间可以执行变量的初始化，还可以进行与服务端的初始化，获取到服务端数据之后调用setState方法更新组件。
didChangeDependencies 该函数是在该组件依赖的全局State发生变化的时候调用。
build 该函数主要是渲染Widget，会被调用多次，最好只做返回Widget相关的事情。
reassemble 只要是提供开发阶段使用，只有在debug模式下热重载才会调用。可以添加一些代码来调试。
didUpdateWidget 此方法在组件重新构建，比如热更新，父组件发生Build时候调用此方法，其次此方法会导致本组件的build方法被调用。
deactivate 在组件被移除时候调用，如果组件被移除，未被插入到其他组件。那么会调用dispose永久移除。

flutter生命周期.png

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Lifecycle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'lifecycle',
      home: Scaffold(
        appBar: AppBar(
          title: Text('lifecyle'),
        ),
        body: Center(
          child: LifecycleWidget(),
        ),
      ),
    );
  }
}

class LifecycleWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    print('createState');
    return LifecycleState();
  }
}

class LifecycleState extends State<LifecycleWidget> {
  int count = 1;
  String name = 'test';

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

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

  @override
  void didUpdateWidget(LifecycleWidget oldWidget) {
    count++;
    print('didUpdateWidge  $count');
    super.didUpdateWidget(oldWidget);
  }

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

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

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

  void changeName(){
    setState(() {
      print('set State');
      this.name = 'flutter';
    });
  }


  @override
  Widget build(BuildContext context) {
    print('buid');
    return Column(
      children: <Widget>[
        FlatButton(
          child: Text('$name  $count'),
          onPressed: changeName,
        )
      ],
    );
  }


}

打印结果

I/flutter ( 1431): createState
I/flutter ( 1431): initState
I/flutter ( 1431): didchangeDependencies
I/flutter ( 1431): buid
I/flutter ( 1431): reassemble
I/flutter ( 1431): didUpdateWidge  2
I/flutter ( 1431): buid

点击按钮

I/flutter ( 1604): set State
I/flutter ( 1604): buid

第一次build了两次，正式模式下是不会这样的，build很消耗性能的。

setState会引起build ，而buid会重新更新组件，并且他的子组件也会更新。会调用子组件的didUpdateWidget和build方法。

I/flutter ( 1956): set State
I/flutter ( 1956): buid
I/flutter ( 1956): sub didUpdateWidget
I/flutter ( 1956): sub  build

二、App生命周期的介绍
app的启动到退出的全过程。在Flutter中可以通过WidgetsBindingObserver来实现监听。


abstract class WidgetsBindingObserver {
  //页面pop
  Future<bool> didPopRoute() => Future<bool>.value(false);
  //页面push
  Future<bool> didPushRoute(String route) => Future<bool>.value(false);
  //系统窗口相关改变回调，如旋转
  void didChangeMetrics() { }
  //文本缩放系数变化
  void didChangeTextScaleFactor() { }
  //系统亮度变化
  void didChangePlatformBrightness() { }
  //本地化语言变化
  void didChangeLocales(List<Locale> locale) { }
  //App生命周期变化
  void didChangeAppLifecycleState(AppLifecycleState state) { }
  //内存警告回调
  void didHaveMemoryPressure() { }
  //Accessibility相关特性回调
  void didChangeAccessibilityFeatures() {}
}

重点介绍下didChangeAppLifecycleState这个回调方法。

AppLifecycleState是个枚举，有三个状态：

resume 可见，能响应操作
inactive 处于不可活动状态，无法处理用户响应
paused 不可见，不能响应用户输入，但在后台继续活动中。

写一个demo测试一下打印


class _MyHomePageState extends State<MyHomePage>  with WidgetsBindingObserver{//这里你可以再回顾下，第7篇文章“函数、类与运算符：Dart是如何处理信息的？”中关于Mixin的内容
...
  @override
  @mustCallSuper
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);//注册监听器
  }
  @override
  @mustCallSuper
  void dispose(){
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);//移除监听器
  }
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) async {
    print("$state");
    if (state == AppLifecycleState.resumed) {
      //do sth
    }
  }
}

我们试着切换一下前、后台，观察控制台输出的 App 状态，可以发现：从后台切入前台，控制台打印的 App 生命周期变化如下: AppLifecycleState.paused->AppLifecycleState.inactive->AppLifecycleState.resumed；从前台退回后台，控制台打印的 App 生命周期变化则变成了：AppLifecycleState.resumed->AppLifecycleState.inactive->AppLifecycleState.paused。可以看到，App 前后台切换过程中打印出的状态是完全符合预期的。

App切换前后台状态变化示意图.png

三、帧绘制回调
以安卓为例，有时候我们需要使用view.post等待渲染完成之后去做一些操作。
在flutter中，可以监听帧的回调，有两种：一种是只回调一次，一种是每一帧都回调。

单帧回调：通过addPostFrameCallback回调来监听当前帧绘制完成


WidgetsBinding.instance.addPostFrameCallback((_){
    print("单次Frame绘制回调");//只回调一次
  });

多帧回调：通过addPersistentFrameCallback回调监听每一次帧绘制完成的回调，可以用来做帧的检测。


WidgetsBinding.instance.addPersistentFrameCallback((_){
  print("实时Frame绘制回调");//每帧都回调
});

Flutter state和App生命周期介绍

Flutter 页面之间的跳转监听，有时候通过上面几种方式是无法监听到的，我们可以通过页面监听可以做到，具体见我另一篇文章《Flutter 监听页面切换》