Flutter

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

2020-09-24  本文已影响0人  starryxp

1.流程图

1600828878156.jpg

2.上代码

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

class _HomeItemPageState extends State<HomeItemPage>
    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.各回调方法解析

5.页面重载问题

解决页面重载需要三步

class _HomeItemPageState extends State<HomeItemPage>
    with WidgetsBindingObserver, AutomaticKeepAliveClientMixin<HomeItemPage> 

 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源代码持续更新中

上一篇 下一篇

猜你喜欢

热点阅读