Flutter State生命周期 Flutter Widget生命周期 Flutter 应用程序生命周期

在 Flutter应用程序中，生命周期涉及两个，一个是 Widget 的生命周期，一个是应用程序的生命周期，本文章说明通过 flutter_life_state 依赖库实现在 Flutter 中类似 Android 中Activity的生命周期监听，类似 iOS UIViewController 的生命周期。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text("测试生命周期"),
              onPressed: () {
                Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
                  return new TestPage();
                }));
              },
            )
          ],
        ),
      ),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends BaseLifeState<TestPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("A页面"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text(" push B页面 "),
              onPressed: () {
                Navigator.of(context).push(new MaterialPageRoute(builder: (_) {
                  return new TestBPage();
                }));
              },
            )
          ],
        ),
      ),
    );
  }


  @override
  void onWillCreat() {
    super.onWillCreat();
    print(" A 页面 onWillCreat");
  }
  @override
  void onCreat() {
    super.onCreat();
    print(" A 页面 onCreat");
  }
  @override
  void onStart() {
    super.onStart();
    print(" A 页面 onStart");
  }
  @override
  void onResumed() {
    super.onResumed();
    print(" A 页面 onResumed");
  }
  @override
  void onPause() {
    super.onPause();
    print(" A 页面 onPause");
  }
  @override
  void onStop() {
    super.onStop();
    print(" A 页面 onStop");
  }
  @override
  void onWillDestory() {
    super.onWillDestory();
    print(" A 页面 onWillDestory");
  }
  @override
  void onDestory() {
    super.onDestory();
    print(" A 页面 onDestory");
  }
}

class TestBPage extends StatefulWidget {
  @override
  _TestBPageState createState() => _TestBPageState();
}

class _TestBPageState extends BaseLifeState<TestBPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("B页面"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
                child: Text("返回A页面 "),
                onPressed: () {
                  Navigator.of(context).pop();
                }),
          ],
        ),
      ),
    );
  }


  @override
  void onWillCreat() {
    super.onWillCreat();
    print(" B 页面 onWillCreat");
  }
  @override
  void onCreat() {
    super.onCreat();
    print(" B 页面 onCreat");
  }
  @override
  void onStart() {
    super.onStart();
    print(" B 页面 onStart");
  }
  @override
  void onResumed() {
    super.onResumed();
    print(" B 页面 onResumed");
  }
  @override
  void onPause() {
    super.onPause();
    print(" B 页面 onPause");
  }
  @override
  void onStop() {
    super.onStop();
    print(" B 页面 onStop");
  }
  @override
  void onWillDestory() {
    super.onWillDestory();
    print(" B 页面 onWillDestory");
  }
  @override
  void onDestory() {
    super.onDestory();
    print(" B 页面 onDestory");
  }
}

1 添加依赖

点击查看 flutter_life_state pub仓库最新版本

dependencies:
  flutter_life_state: ^1.0.1

当然你也可以点击查看 github 源码，在Flutter 中也可通过git方式来引用如下：

dependencies:
	shake_animation_widget:
	      git:
	        url: https://github.com/zhaolongs/flutter_life_state.git

然后在人的入口添加 lifeFouteObserver ：


import 'package:flutter_life_state/flutter_life_state.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ... 
      navigatorObservers: [
      lifeFouteObserver
      ],
    );
  }
}

然后在使用到的 Widget 页面中导包如下：

import 'package:flutter_life_state/flutter_life_state.dart';

2 监听 Widget 页面生命周期

使用 flutter_life_state 来监听 Widget 的生命周期时，你需要在你的 StatefulWidget 对应的State 继承 BaseLifeState 如下代码清单 2-1 所示：

///代码清单 2-1
class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends BaseLifeState<TestPage> {
  @override
  Widget build(BuildContext context) { ...}
}

当使用 Navigator.push 方式将上述代码清单 2-1 所示的 TestPage 打开时，会调用 BaseLifeState 的生命周期如下图所示：

当然如果你需要在生命周期中处理你的业务需要，直接复写父类 BaseLifeState 的生命周期函数就好，如下代码清单 2-2所示：

///代码清单 2-2
class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends BaseLifeState<TestPage> {
  @override
  Widget build(BuildContext context) {...}

  @override
  void onCreat() {
    super.onCreat();
    print(" A 页面 onCreat");
  }

  @override
  void onDestory() {
    super.onDestory();
    print(" A 页面 onDestory");
  }
}

3 BaseLifeState 生命周期概述

BaseLifeState 生命周期回调完全实现了 Android 中Activity、iOS UIViewController 的生命周期，如下源码清单 3-1 所示。

///源码清单 3-1 
class StateLiveState{
  ///页面即将创建时回调
  void onWillCreat(){}
  ///页面创建时的回调 已创建好
  void onCreat(){}
  ///页面可见时回调
  void onStart() {}
  ///页面获取焦点时回调
  void onResumed() {}
  ///页面失去焦点时回调
  void onPause() {}
  ///页面不可见时回调
  void onStop() {}
  ///页面即将销毁时回调
  void onWillDestory(){}
  ///页面销毁
  void onDestory(){}
}

Widget 的完整生存期会在 [onCreate]调用和[onDestroy]调用之间发生：

onWillCreat 方法一般在这个方法中初始化一些数据，在此方法中 State与 BuildContext还未绑定好，所以是不可使用context的，就如大家平时在 [State]的initState方法中初始化的数据就可以在这个方法回调中进行操作。
onCreate 方法在页面可见时回调，也就是页面的第一帧绘制完毕后回调，类似Android中的onCreat方法，类似iOS中ViewController的 viewDidLoad 方法。
onStart 方法在[onWillCreat]之后回调，类似Android的Activity的onStart方法，类似iOS中ViewController的 viewWillAppear 。
onResumed 方法在[onStart]方法后执行，页面有焦点时的回调，类似Android的Activity的onResumed方法，类似iOS中ViewController的viewDidAppear 。
onPause 方法在页面失去焦点时的回调，类似Android的Activity的onPause方法，类似iOS中ViewController的 viewWillDisappear。
onStop 方法在页面不可见时的回调，类似Android的Activity的onStop方法，类似iOS中ViewController的 viewDidDisappear。
onWillDestory 方法在页面即将销毁时调用 context 可用，一般在这里进行解绑操作，只会调用一次。
onDestory方法在页面销毁时回调 context 已解绑不可使用，类似Android的Activity的onDestory,类似iOS中ViewController的 dealloc。

4 生命周期使用场景

4.1 页面 A - 页面B - 页面 A

4.2 Dialog 弹框

Flutter State生命周期 Flutter Widget生命周期 Flutter 应用程序生命周期

10分钟搞定Mysql主从部署配置

如何使用 JS 判断用户是否处于活跃状态

「Pygors跨平台GUI」2：安装MinGW-w64、MSYS2还是WSL2

[转帖]

python列出centos7内存使用前50的进程信息

「Pygors跨平台GUI」1：Pygors跨平台GUI应用研究

一键自动化博客发布工具,用过的人都说好(掘金篇)

lightdb数据库超时相关控制参数

lightdb秒级增加列和删除列（not null带默认值）

Java ThreadPoolShutdown

JavaScript中，模擬 call 的底層實現

肥豬的鋼琴牀（dp好題）

《賽博朋克2077》是捏臉遊戲？上科大學生社團開發了一款賽博“濾鏡”

Visual Studio 即時窗口實用技巧

一日一技：實現函數調用結果的 LRU 緩存

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結