Flutter：State生命周期以及页面重载问题详解

1.流程图

1600828878156.jpg

2.上代码

这里需要混入WidgetsBindingObserver，重写didChangeAppLifecycleState方法才能看到app进入前后台的状态

class _HomeItemPageState extends State
    with WidgetsBindingObserver {
  @override
  void initState() {
    print('_HomeItemPageState initState');
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

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

  @override
  Widget build(BuildContext context) {
    print('_HomeItemPageState build');
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        children: [
          Text('首页'),
          Text('num：$_count'),
          RaisedButton(
            onPressed: () {
              _count++;
              setState(() {});
            },
            child: Text('num++'),
          ),
          RaisedButton(
            onPressed: () {
              Navigator.pushNamed(context, Constant.homeHomePage);
            },
            child: Text('下一个页面'),
          ),
          RaisedButton(
            onPressed: () {
              setState(() {

              });
            },
            child: Text('刷新页面'),
          ),
        ],
      ),
    );
  }

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

  @override
  void didUpdateWidget(HomeItemPage oldWidget) {
    print('_HomeItemPageState didUpdateWidget');
    super.didUpdateWidget(oldWidget);
  }

  @override
  void dispose() {
    print('_HomeItemPageState dispose');
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

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

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    print('_HomeItemPageState didChangeAppLifecycleState $state');
    super.didChangeAppLifecycleState(state);
  }

3.日志

我这边使用的是一个嵌套行页面，主页面(TabBarViewPage)是一个TabBar+TabBarView实现的子页面切换，子页面是三个页面(HomeItemPage,EmailItemPage,MineItemPage)

1600829390232.jpg

当页面创建的时候

I/flutter (25213): _TabBarViewPageState initState
I/flutter (25213): _TabBarViewPageState didChangeDependencies
I/flutter (25213): _TabBarViewPageState build
I/flutter (25213): _HomeItemPageState initState
I/flutter (25213): _HomeItemPageState didChangeDependencies
I/flutter (25213): _HomeItemPageState build

当内部子页面切换的时候

子页面互相切换的时候下一个页面创建，上一个页面就会被销毁，这是flutter默认的情况，页面会被移除然后重载。当然你也可以设置需要的页面不被重载的页面，这个后面再讲

I/flutter (25213): _tabController.addListener
I/flutter (25213): _EmailItemPageState initState
I/flutter (25213): _EmailItemPageState didChangeDependencies
I/flutter (25213): _EmailItemPageState build
I/flutter (25213): _tabController.addListener
I/flutter (25213): _HomeItemPageState deactivate
I/flutter (25213): _HomeItemPageState dispose
I/flutter (25213): _tabController.addListener
I/flutter (25213): _MineItemPageState initState
I/flutter (25213): _MineItemPageState didChangeDependencies
I/flutter (25213): _MineItemPageState build
I/flutter (25213): _tabController.addListener
I/flutter (25213): _EmailItemPageState deactivate
I/flutter (25213): _EmailItemPageState dispose

当刷新当前页面的时候

I/flutter (25213): _HomeItemPageState build

当跳转新页面在返回的时候

I/flutter (25213): _TabBarViewPageState didChangeDependencies
I/flutter (25213): _TabBarViewPageState build
I/flutter (25213): _TabBarViewPageState didChangeDependencies
I/flutter (25213): _TabBarViewPageState build

当页面进入后台在返回的时候

I/flutter (25213): _TabBarViewPageState didChangeAppLifecycleState AppLifecycleState.inactive
I/flutter (25213): _HomeItemPageState didChangeAppLifecycleState AppLifecycleState.inactive
I/flutter (25213): _TabBarViewPageState didChangeAppLifecycleState AppLifecycleState.paused
I/flutter (25213): _HomeItemPageState didChangeAppLifecycleState AppLifecycleState.paused
I/flutter (25213): _TabBarViewPageState didChangeAppLifecycleState AppLifecycleState.inactive
I/flutter (25213): _HomeItemPageState didChangeAppLifecycleState AppLifecycleState.inactive
I/flutter (25213): _TabBarViewPageState didChangeAppLifecycleState AppLifecycleState.resumed
I/flutter (25213): _HomeItemPageState didChangeAppLifecycleState AppLifecycleState.resumed

app热重载的时候

I/flutter (25213): _TabBarViewPageState reassemble
I/flutter (25213): _HomeItemPageState reassemble
I/flutter (25213): _TabBarViewPageState didUpdateWidget
I/flutter (25213): _TabBarViewPageState build
I/flutter (25213): _HomeItemPageState didUpdateWidget
I/flutter (25213): _HomeItemPageState build

主页页面销毁

I/flutter (25213): _TabBarViewPageState deactivate
I/flutter (25213): _HomeItemPageState deactivate
I/flutter (25213): _HomeItemPageState dispose
I/flutter (25213): _TabBarViewPageState dispose

4.各回调方法解析

• initState：State对象载入，可以在里面做一些数据初始化等
• didChangeDependencies：当State对象的依赖发生变化时会被调用
• build ：页面构建
• reassemble：在热重载时调用，Release模式下不会被调用。
• didUpdateWidget：页面重新buid的时候会调用该方法。
• deactivate：当State对象被移除时，会调用此回调。
• dispose：当State对象被移除时调用，通常在此回调中释放资源。

5.页面重载问题

解决页面重载需要三步

• 混入（with）AutomaticKeepAliveClientMixin
• build方法添加super.build(context)
• 重写wantKeepAlive返回true
  （注意这里是对不需要重载的页面添加，就是对TabBarView里的页面，不是对主页面添加，网上有大多博文都是错误的）
  （对混入（with）不了解的可以看一下这个文章Flutter（Dart）中extends 、 implements 、 with的用法与区别）
  我们将_HomeItemPageState混入AutomaticKeepAliveClientMixin看看效果
  上代码

class _HomeItemPageState extends State
    with WidgetsBindingObserver, AutomaticKeepAliveClientMixin 

 Widget build(BuildContext context) {
    super.build(context);

  @override
  bool get wantKeepAlive => true;

当子页面切换时（home切换mail再返回home再切换mail）

可以看到home并没有被销毁也没有重载，但是mail被销毁了然后重载了

I/flutter (25213): _TabBarViewPageState initState
I/flutter (25213): _TabBarViewPageState didChangeDependencies
I/flutter (25213): _TabBarViewPageState build
I/flutter (25213): _HomeItemPageState initState
I/flutter (25213): _HomeItemPageState didChangeDependencies
I/flutter (25213): _HomeItemPageState build
I/flutter (25213): _tabController.addListener
I/flutter (25213): _EmailItemPageState initState
I/flutter (25213): _EmailItemPageState didChangeDependencies
I/flutter (25213): _EmailItemPageState build
I/flutter (25213): _tabController.addListener
I/flutter (25213): _tabController.addListener
I/flutter (25213): _tabController.addListener
I/flutter (25213): _EmailItemPageState deactivate
I/flutter (25213): _EmailItemPageState dispose
I/flutter (25213): _tabController.addListener
I/flutter (25213): _EmailItemPageState initState
I/flutter (25213): _EmailItemPageState didChangeDependencies
I/flutter (25213): _EmailItemPageState build
I/flutter (25213): _tabController.addListener

主页页面销毁

可以看到当主页面销毁的时候，home也是被销毁的

I/flutter (25213): _TabBarViewPageState deactivate
I/flutter (25213): _HomeItemPageState deactivate
I/flutter (25213): _HomeItemPageState dispose
I/flutter (25213): _TabBarViewPageState dispose

代码下载

Github源代码

更多Flutter学习请移步

Flutter入门教学目录持续更新中

Github源代码持续更新中