天天看點

【Flutter 專題】54 圖解 Flutter 基本生命周期

和尚使用 Flutter 這麼長時間,并沒有認真研究過 Flutter 的生命周期,今天和尚分幾個場景學習一下 Flutter 的生命周期;

和尚借助 WidgetsBinding 通過觀察和監聽 didChangeAppLifecycleState 來分析生命周期事件,與 Android 原生類似;

【Flutter 專題】54 圖解 Flutter 基本生命周期

基本場景

1. 初始化

initState -> didChangeDependencies -> build

【Flutter 專題】54 圖解 Flutter 基本生命周期

2. 頁面資料更新

和尚嘗試頁面按鈕點選或彈框處理,均不會涉及生命周期變化,隻是在 build 更新 Widget 資源;但是若進行 熱重載 生命周期如下:

reassemble -> didUpdateWidget -> build

【Flutter 專題】54 圖解 Flutter 基本生命周期

3. 橫豎屏切換

didUpdateWidget -> build -> didUpdateWidget -> build (執行兩次)

4. 切至背景

didChangeAppLifecycleState(AppLifecycleState.inactive) -> didChangeAppLifecycleState(AppLifecycleState.paused) -> build

【Flutter 專題】54 圖解 Flutter 基本生命周期

5. 切回前台

didChangeAppLifecycleState(AppLifecycleState.inactive) -> didChangeAppLifecycleState(AppLifecycleState.resumed) -> build

【Flutter 專題】54 圖解 Flutter 基本生命周期

6. 銷毀頁面

deactivate -> dispose

【Flutter 專題】54 圖解 Flutter 基本生命周期

進階場景

7. 打開新的頁面

新頁面initState -> didChangeDependencies -> build -> 舊頁面deactivate -> didChangeDependencies -> build (新頁面初始化+舊頁面置于背景)

【Flutter 專題】54 圖解 Flutter 基本生命周期

8. 新頁面切至背景(舊頁面未銷毀)

舊/新頁面didChangeAppLifecycleState(AppLifecycleState.inactive) -> didChangeAppLifecycleState(AppLifecycleState.paused) -> build

【Flutter 專題】54 圖解 Flutter 基本生命周期

9. 新頁面切回前台

舊/新頁面didChangeAppLifecycleState(AppLifecycleState.inactive) -> didChangeAppLifecycleState(AppLifecycleState.resumed) -> build

【Flutter 專題】54 圖解 Flutter 基本生命周期

10. 新頁面銷毀

舊頁面deactivate -> build(AppLifecycleState.resumed) -> 新頁面deactivate -> dispose

【Flutter 專題】54 圖解 Flutter 基本生命周期

特殊場景

和尚也嘗試了一下 Android7.0 分屏情況下的生命周期;

11. 進入分屏視窗

didChangeAppLifecycleState(AppLifecycleState.inactive) -> didChangeAppLifecycleState(AppLifecycleState.paused) -> build (與切至背景相同)

【Flutter 專題】54 圖解 Flutter 基本生命周期
【Flutter 專題】54 圖解 Flutter 基本生命周期

12. 進行分屏

didChangeAppLifecycleState(AppLifecycleState.inactive) -> didChangeAppLifecycleState(AppLifecycleState.resumed) -> didChangeAppLifecycleState(AppLifecycleState.inactive) -> build

【Flutter 專題】54 圖解 Flutter 基本生命周期
【Flutter 專題】54 圖解 Flutter 基本生命周期

13. 擷取焦點

didChangeAppLifecycleState(AppLifecycleState.resumed) -> build

【Flutter 專題】54 圖解 Flutter 基本生命周期

14. 螢幕大小調整

與 Android 不同,調整螢幕大小不會進行生命周期變化,前提是目前應用已擷取焦點,若未擷取焦點,則會在調整螢幕大小為全屏時進行擷取焦點的生命周期方法;

小總結

  1. 生命周期整體分為三個部分:初始化 / 狀态改變 / 銷毀;
  2. initState 在整個生命周期中的初始化階段隻會調用一次;
  3. didChangeDependencies 當 State 對象依賴發生變動時調用;
  4. didUpdateWidget 當 Widget 狀态發生改變時調用;實際上每次更新狀态時,Flutter 會建立一個新的 Widget,并在該函數中進行新舊 Widget 對比;一般調用該方法之後會調用 build;
  5. reassemble 隻有在 debug 或 熱重載 時調用;
  6. deactivate 從 Widget Tree 中移除 State 對象時會調用,一般用在 dispose 之前;
  7. dispose 用于 Widget 被銷毀時,通常會在此方法中移除監聽或清理資料等,整個生命周期隻會執行一次;
  8. resumed 應用程式可見且擷取焦點狀态,類似于 Android onResume();
  9. inactive 應用程式處于非活動狀态;
  10. paused 應用程式處于使用者不可見,不響應使用者狀态,處于背景運作狀态,類似于 Android onPause();
【Flutter 專題】54 圖解 Flutter 基本生命周期

生命周期非常重要也非常有趣,值得我們多多嘗試和研究,和尚僅嘗試了幾種常見的情況,如有錯誤請多多指導!

來源:阿策小和尚