flutter中實現仿Android端的onResume和onPause方法

追夢人君發表於2019-07-12
FlutterAndroid

flutter中實現仿Android端的onResume和onPause方法

Android端Activity的生命週期

Android中的Activity的生命週期方法如下所示：

Activity生命週期圖

這些方法中，對我們比較重要的如下：

  • onCreate方法：頁面建立時呼叫。
  • onDestroy方法：頁面銷燬時呼叫，除了正常關閉頁面，還包括異常銷燬，比如kill掉應用程式。
  • onResume方法：頁面由不可見變為可見時呼叫。
  • onPause方法：頁面由可見變為不可見時呼叫，與onResume方法成對出現。

在使用過程中，onCreate和onDestroy方法成對出現，只會呼叫一次。onResume和onPause方法也是成對出現，會出現多次。

這幾個方法為何如此重要呢？為什麼非要在flutter端獲取到這幾個方法呢？ 這是因為在現有條件下，flutter相關的社群環境還不夠強大，flutter端並不能實現一套程式碼適配多種終端的效果，相反，它還會嚴重的依賴宿主App端的實現。

這時，就需要我們在flutter頁面中合適的時機，傳送訊息給宿主App，讓其完成對應的實現。

當然了，這類問題在以後可能會得到很好的解決，不必像現在這麼費勁。

實現效果

demo的結構

flutter_lifecycle_state

效果圖

1、桌面 --> home --> a --> c --> a --> home --> 桌面

flutter中實現仿Android端的onResume和onPause方法

對應log：

I/flutter ( 1954): Home --> onCreate()
I/flutter ( 1954): Home --> onResume()
I/flutter ( 1954): ARoute --> onCreate()
I/flutter ( 1954): ARoute --> onResume()
I/flutter ( 1954): Home --> onPause()
I/flutter ( 1954): CRoute --> onCreate()
I/flutter ( 1954): CRoute --> onResume()
I/flutter ( 1954): ARoute --> onPause()
I/flutter ( 1954): ARoute --> onResume()
I/flutter ( 1954): CRoute --> onPause()
I/flutter ( 1954): CRoute --> onDestroy()
I/flutter ( 1954): Home --> onResume()
I/flutter ( 1954): ARoute --> onPause()
I/flutter ( 1954): ARoute --> onDestroy()
I/flutter ( 1954): Home --> onPause()
複製程式碼

這裡解釋下： 桌面 --> home操作對應log： 1、2行 home --> a操作對應log： 3、4、5行 a --> c操作對應log： 6、7、8行 c --> a操作對應log： 9、10、11行 a --> home操作對應log： 12、13、14行 home --> 桌面操作對應log： 15行

2、桌面 --> home --> b --> e --> b --> home --> 桌面

flutter中實現仿Android端的onResume和onPause方法

對應log：

I/flutter ( 2048): Home --> onCreate()
I/flutter ( 2048): Home --> onResume()
I/flutter ( 2048): BRoute --> onCreate()
I/flutter ( 2048): BRoute --> onResume()
I/flutter ( 2048): Home --> onPause()
I/flutter ( 2048): FRoute --> onCreate()
I/flutter ( 2048): FRoute --> onResume()
I/flutter ( 2048): BRoute --> onPause()
I/flutter ( 2048): BRoute --> onResume()
I/flutter ( 2048): FRoute --> onPause()
I/flutter ( 2048): FRoute --> onDestroy()
I/flutter ( 2048): Home --> onResume()
I/flutter ( 2048): BRoute --> onPause()
I/flutter ( 2048): BRoute --> onDestroy()
I/flutter ( 2048): Home --> onPause()
複製程式碼

這裡解釋下： 桌面 --> home操作對應log： 1、2行 home --> b操作對應log： 3、4、5行 b --> e操作對應log： 6、7、8行 e --> b操作對應log： 9、10、11行 b --> home操作對應log： 12、13、14行 home --> 桌面操作對應log： 15行

專案地址：

flutter_lifecycle_state

使用方式：

1、新增依賴：

在pubspec.yaml檔案中新增如下依賴：這裡選擇最新版本即可。

dependencies:
  flutter_lifecycle_state: ^0.0.x
複製程式碼

note:最新配置請看pub.dartlang.org/packages/fl…頁面。

2、給MaterialApp#navigatorObservers屬性設定routeObserver。

這個值定義在我們的package包中，需要導包。

import 'package:flutter/material.dart';
import 'package:flutter_lifecycle_state/flutter_lifecycle_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 Demo',
      ...
      navigatorObservers: [routeObserver],
    );
  }
}
複製程式碼
3、頁面中使用StateWithLifecycle替換State。

將每個頁面級別的Widget的State替換為我們的StateWithLifecycle，導包即可。然後我們可以選擇重寫onCreate、onPause、onResume、onDestroy方法，在這些方法內部執行對應的業務邏輯即可。

如果需要自定義當前頁面的log標識的話，如下所示：給tagInStateWithLifecycle欄位賦值即可。

@override
  void initState() {
    tagInStateWithLifecycle = "WidgetsTestPage";
    super.initState();
  }
複製程式碼

注意事項

需要注意的是：

1、onDestroy方法某些情況下不會呼叫

在flutter專案的根頁面中，在它正常銷燬時，它的的dispose方法是不會呼叫的，因此我們的onDestroy方法也不會呼叫。

2、應用非正常關閉時，生命週期方法不會呼叫。

這就意味著，如果應用在後臺被回收，或者其他方式非正常關閉，則某些頁面的生命週期方法可能不會正常的呼叫。

參考：

developer.android.com/guide/compo…

demo地址

相關文章