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 彈框