Flutter生命周期

迪吧哥
1,620 阅读3分钟

和Android或iOS类似，flutter应用也有自己的生命周期，本文将通过多个场景来学习flutter生命周期。

生命周期方法

学过Android的都知道Android有各种生命周期方法，比如：

  • onCreate
  • onStart
  • onResume
  • ......
  • 等等，就不一一举例了。

说了那么多，flutter的生命周期方法有哪些呢？请看

  • initState
  • didChangeDependencies
  • reassemble
  • build
  • didUpdateWidget
  • didChangeAppLifecycleState
  • deactivate
  • dispose

以上就是flutter的所有生命周期方法，下面我们通过输出log的方式，分场景看一下各个生命周期方法的调用时机。

基本场景

初始化

initState -> didChangeDependencies -> build

I/flutter ( 9557): Lifecycle HomePage ----> initState
I/flutter ( 9557): Lifecycle HomePage ----> didChangeDependencies
I/flutter ( 9557): Lifecycle HomePage ----> build

前台切后台

AppLifecycleState.inactive -> AppLifecycleState.paused

I/flutter (13599): didChangeAppLifecycleState ----> AppLifecycleState.inactive
I/flutter (13599): didChangeAppLifecycleState ----> AppLifecycleState.paused

后台切前台

AppLifecycleState.resumed

I/flutter (13599): didChangeAppLifecycleState ----> AppLifecycleState.resumed

横竖屏切换

和Android类似，和flutter应用的android:configChanges配置有关

  • 默认配置： android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" 不会重新创建应用，生命周期如下：

    不执行任何生命周期方法

  • 不配置android:configChanges属性，生命周期如下：

    initState -> didChangeDependencies -> build -> deactivate -> build

    I/flutter (14179): Lifecycle SecondPage ----> initState
I/flutter (14179): Lifecycle SecondPage ----> didChangeDependencies
I/flutter (14179): Lifecycle SecondPage ----> build
I/flutter (14179): Lifecycle HomePage ----> deactivate
I/flutter (14179): Lifecycle HomePage ----> build

新页面切后台

AppLifecycleState.inactive(HomePage) -> AppLifecycleState.inactive(SecondPage) -> AppLifecycleState.paused(HomePage) -> AppLifecycleState.paused(SecondPage)

I/flutter (14179): HomePage didChangeAppLifecycleState ----> AppLifecycleState.inactive
I/flutter (14179): SecondPage didChangeAppLifecycleState ----> AppLifecycleState.inactive
I/flutter (14179): HomePage didChangeAppLifecycleState ----> AppLifecycleState.paused
I/flutter (14179): SecondPage didChangeAppLifecycleState ----> AppLifecycleState.paused

注意：所有非dispose页面都会执行inactive和paused

新页面切前台

AppLifecycleState.resumed(HomePage) -> AppLifecycleState.resumed(SecondPage)

I/flutter (14179): HomePage didChangeAppLifecycleState ----> AppLifecycleState.resumed
I/flutter (14179): SecondPage didChangeAppLifecycleState ----> AppLifecycleState.resumed

注意：所有非dispose页面都会执行resumed

从新页面返回

deactivate -> build -> deactivate -> dispose

I/flutter (14179): Lifecycle HomePage ----> deactivate
I/flutter (14179): Lifecycle HomePage ----> build
I/flutter (14179): Lifecycle SecondPage ----> deactivate
I/flutter (14179): Lifecycle SecondPage ----> dispose

热重载

reassemble -> didUpdateWidget -> build

I/flutter (16996): Lifecycle HomePage ----> reassemble
I/flutter (16996): Lifecycle HomePage ----> didUpdateWidget
I/flutter (16996): Lifecycle HomePage ----> build

新页面热重载

reassemble(SecondPage) -> reassemble(HomePage) -> didUpdateWidget(HomePage) -> build(HomePage) -> didUpdateWidget(SecondPage) -> build(SecondPage)

I/flutter (16996): Lifecycle SecondPage ----> reassemble
I/flutter (16996): Lifecycle HomePage ----> reassemble
I/flutter (16996): Lifecycle HomePage ----> didUpdateWidget
I/flutter (16996): Lifecycle HomePage ----> build
I/flutter (16996): Lifecycle SecondPage ----> didUpdateWidget
I/flutter (16996): Lifecycle SecondPage ----> build

注意：热重载所有非dispose页面都会执行一边reassemble -> didUpdateWidget -> build

生命周期总结

生命周期整体分为三个部分：初始化 / 状态改变 / 销毁；

  • initState 在整个生命周期中的初始化阶段只会调用一次；
  • didChangeDependencies 当 State 对象依赖发生变动时调用；
  • didUpdateWidget 当 Widget 状态发生改变时调用；实际上每次更新状态时，Flutter 会创建一个新的 Widget，并在该函数中进行新旧 Widget 对比；一般调用该方法之后会调用 build；
  • reassemble 只有在 debug 或 热重载 时调用；
  • deactivate 从 Widget Tree 中移除 State 对象时会调用，一般用在 dispose 之前；
  • dispose 用于 Widget 被销毁时，通常会在此方法中移除监听或清理数据等，整个生命周期只会执行一次；
  • didChangeAppLifecycleState->resumed 应用程序可见且获取焦点状态，类似于 Android onResume()； inactive 应用程序处于非活动状态；
  • didChangeAppLifecycleState->paused 应用程序处于用户不可见，不响应用户状态，处于后台运行状态，类似于 Android onPause()

最后，为了更好的理解flutter应用生命周期，附图一张：

avatar
文章
阅读
粉丝