Flutter state和App生命周期介绍

102 阅读3分钟

「这是我参与2022首次更文挑战的第10天,活动详情查看:2022首次更文挑战

一、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永久移除。

image.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 前后台切换过程中打印出的状态是完全符合预期的。

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

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


WidgetsBinding.instance.addPostFrameCallback((_){
    print("单次Frame绘制回调");//只回调一次
  });
  • 多帧回调:通过addPersistentFrameCallback回调监听每一次帧绘制完成的回调,可以用来做帧的检测。


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

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