文章目錄

• 一、Flutter 頁面生命周期
• • 1、StatelessWidget 組件生命周期函數
  • 2、StatefulWidget 組件生命周期函數
• 二、StatefulWidget 組件生命周期
• • 1、createState
  • 2、initState
  • 3、didChangeDependencies
  • 4、build
  • 5、didUpdateWidget
  • 6、deactivate
  • 7、dispose
• 三、完整代碼示例
• 四、相關資源

一、Flutter 頁面生命周期

---

Flutter 頁面生命周期就是 Flutter 頁面組件 Widget 的生命周期 ;

頁面的組件就是 StatefulWidget 組件 和 StatelessWidget 組件 ;

1、StatelessWidget 組件生命周期函數

StatelessWidget 組件生命周期函數 : 只有兩個 , 分別是 createElement() , build() 兩個方法 ;

abstract class StatelessWidget extends Widget {/// Initializes [key] for subclasses.const StatelessWidget({ Key key }) : super(key: key);@overrideStatelessElement createElement() => StatelessElement(this);@protectedWidget build(BuildContext context); }

2、StatefulWidget 組件生命周期函數

StatefulWidget 組件生命周期分為三組 :

① 初始化期 : createState , initState ;

② 更新期 : didChangeDependencies , build , didUpdateWidget ;

③ 銷毀期 : deactivate , dispose ;

二、StatefulWidget 組件生命周期

---

1、createState

createState 函數 :

• 所處時期 : 初始化期的生命周期函數
• 調用時機 : 創建 StatefulWidget 之后調用的第一個方法 ;
• 抽象方法 : 該方法是抽象方法 , 必須覆蓋重寫該方法 ;

/// 1. 初始化期的生命周期函數/// 創建 StatefulWidget 之后調用的第一個方法 ,/// 該方法是抽象方法 , 必須覆蓋@override_WidgetLiftCyclePageState createState() => _WidgetLiftCyclePageState();

2、initState

initState 函數 :

• 所處時期 : 初始化期的生命周期函數
• 調用時機 : 該方法是創建 Widget 組件時除構造方法之外的第一個方法 ,
• 對應方法 : 對應 Android 中的 onCreate 方法 ; 對應 iOS 中的 viewDidLoad 方法 ;
• 常用用法 : 在該方法中執行一些初始化操作 ;

/// 2. 初始化期的生命周期函數/// 該方法是創建 Widget 組件時除構造方法之外的第一個方法/// 該方法對應 Android 中的 onCreate 方法/// 對應 iOS 中的 viewDidLoad 方法/// 常用用法 : 在該方法中執行一些初始化操作@overridevoid initState() {print("initState");super.initState();}

3、didChangeDependencies

didChangeDependencies 函數 :

• 所處時期 : 更新期的生命周期函數 ;
• 調用時機 : ① 創建 Widget 組件時 , 調用完 initState 方法后 , 調用該方法 ; ② InheritedWidget 相關 ( 暫不涉及 ) ;

/// 3. 更新期的生命周期函數/// 方法調用時機 :/// ① 創建 Widget 組件時 , 調用完 initState 方法后 , 調用該方法/// ② InheritedWidget 相關 ( 暫不涉及 )@overridevoid didChangeDependencies() {/// 該方法在開始處必須調用父類的方法super.didChangeDependencies();print("didChangeDependencies");}

4、build

build 函數 :

• 所處時期 : 更新期的生命周期函數 ;
• 調用時機 : ① 調用完 didChangeDependencies 方法后調用該方法 ; ② 調用 setState 方法之后 , 該方法也會被調用 ;
• 方法作用 : 頁面每次渲染時都會調用該方法 ;

/// 4. 更新期的生命周期函數/// 方法調用時機 :/// ① 調用完 didChangeDependencies 方法后調用該方法/// ② 調用 setState 方法之后 , 該方法也會被調用 ;/// 頁面每次渲染時都會調用該方法@overrideWidget build(BuildContext context) {print("build");return Scaffold(appBar: AppBar(// 標題title: Text("StatefulWidget 頁面生命周期"),// 回退按鈕leading: BackButton(),),body: Center(child: Column(children: <Widget>[RaisedButton(// 點擊事件onPressed: (){// 回調更新期 生命周期函數setState(() {});},child: Text("調用 setState() 方法"),),],),),);}

5、didUpdateWidget

didUpdateWidget 函數 :

• 所處時期 : 更新期的生命周期函數 ;
• 調用時機 : 該生命周期方法不經常調用 , 只有在父容器組件重繪時才調用該方法 ;
• 方法機制 : 傳入的 oldWidget 參數是舊的組件信息 , 將當前的 Widget 與舊的 Widget 進行對比 , 如果不相等 , 便執行額外操作 ;

/// 5. 更新期的生命周期函數/// 方法調用時機 : 該生命周期方法不經常調用 , 只有在父容器組件重繪時才調用該方法/// 方法機制 : 傳入的 oldWidget 參數是舊的組件信息 ,/// 將當前的 Widget 與舊的 Widget 進行對比 , 如果不相等 , 便執行額外操作/// 如 : 組件的屬性不相等 , 字段的值不相等@overridevoid didUpdateWidget(WidgetLiftCyclePage oldWidget) {super.didUpdateWidget(oldWidget);print("didUpdateWidget");}

6、deactivate

deactivate 函數 :

• 所處時期 : 銷毀期的生命周期函數 ;
• 調用時機 : 該生命周期方法不經常調用 , 只有在組件被移除時才調用 ;

/// 6 . 銷毀期的生命周期函數/// 方法調用時機 : 該生命周期方法不經常調用 , 只有在組件被移除時才調用/// 該方法在 dispose 方法之前被調用@overridevoid deactivate() {super.deactivate();print("deactivate");}

7、dispose

dispose 函數 :

• 所處時期 : 銷毀期的生命周期函數 ;
• 調用時機 : 組件被銷毀時調用 , 要在該方法中進行資源的釋放與銷毀操作 ;

/// 7 . 銷毀期的生命周期函數/// 方法調用時機 : 組件被銷毀時調用 , 要在該方法中進行資源的釋放與銷毀操作@overridevoid dispose() {super.dispose();print("dispose");}

三、完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart';class WidgetLiftCyclePage extends StatefulWidget {/// 1. 初始化期的生命周期函數/// 創建 StatefulWidget 之后調用的第一個方法 ,/// 該方法是抽象方法 , 必須覆蓋@override_WidgetLiftCyclePageState createState() => _WidgetLiftCyclePageState(); }class _WidgetLiftCyclePageState extends State<WidgetLiftCyclePage> {/// 2. 初始化期的生命周期函數/// 該方法是創建 Widget 組件時除構造方法之外的第一個方法/// 該方法對應 Android 中的 onCreate 方法/// 對應 iOS 中的 viewDidLoad 方法/// 常用用法 : 在該方法中執行一些初始化操作@overridevoid initState() {print("initState");super.initState();}/// 3. 更新期的生命周期函數/// 方法調用時機 :/// ① 創建 Widget 組件時 , 調用完 initState 方法后 , 調用該方法/// ② InheritedWidget 相關 ( 暫不涉及 )@overridevoid didChangeDependencies() {/// 該方法在開始處必須調用父類的方法super.didChangeDependencies();print("didChangeDependencies");}/// 4. 更新期的生命周期函數/// 方法調用時機 :/// ① 調用完 didChangeDependencies 方法后調用該方法/// ② 調用 setState 方法之后 , 該方法也會被調用 ;/// 頁面每次渲染時都會調用該方法@overrideWidget build(BuildContext context) {print("build");return Scaffold(appBar: AppBar(// 標題title: Text("StatefulWidget 頁面生命周期"),// 回退按鈕leading: BackButton(),),body: Center(child: Column(children: <Widget>[RaisedButton(// 點擊事件onPressed: (){// 回調更新期 生命周期函數setState(() {});},child: Text("調用 setState() 方法"),),],),),);}/// 5. 更新期的生命周期函數/// 方法調用時機 : 該生命周期方法不經常調用 , 只有在父容器組件重繪時才調用該方法/// 方法機制 : 傳入的 oldWidget 參數是舊的組件信息 ,/// 將當前的 Widget 與舊的 Widget 進行對比 , 如果不相等 , 便執行額外操作/// 如 : 組件的屬性不相等 , 字段的值不相等@overridevoid didUpdateWidget(WidgetLiftCyclePage oldWidget) {super.didUpdateWidget(oldWidget);print("didUpdateWidget");}/// 6 . 銷毀期的生命周期函數/// 方法調用時機 : 該生命周期方法不經常調用 , 只有在組件被移除時才調用/// 該方法在 dispose 方法之前被調用@overridevoid deactivate() {super.deactivate();print("deactivate");}/// 7 . 銷毀期的生命周期函數/// 方法調用時機 : 組件被銷毀時調用 , 要在該方法中進行資源的釋放與銷毀操作@overridevoid dispose() {super.dispose();print("dispose");}}

運行效果 :

打印日志 : 進入界面 , 點擊 $3$ 下按鈕 , 然后退出界面 ;

• 進入界面 : 先調用 initState 方法 , 然后調用 didChangeDependencies 方法 , 最后調用 build 方法 ;

I/flutter (21393): initState I/flutter (21393): didChangeDependencies I/flutter (21393): build

• 點擊按鈕 : 每次點擊按鈕都打印一次 build , 總共調用了 $3$ 次 build 方法 ;

I/flutter (21393): build I/flutter (21393): build I/flutter (21393): build

• 退出界面 : 先調用 deactivate 方法 , 最后調用 dispose 方法 ;

I/flutter (21393): deactivate I/flutter (21393): dispose

• 完整日志 :

Performing hot reload... Syncing files to device Pixel 2... Reloaded 2 of 489 libraries in 510ms. I/flutter (21393): initState I/flutter (21393): didChangeDependencies I/flutter (21393): build I/flutter (21393): build I/flutter (21393): build I/flutter (21393): build I/flutter (21393): deactivate I/flutter (21393): dispose

四、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15547438 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Flutter 页面生命周期 ( 初始化期 | createState | initState | 更新期 | build | 销毁期 | dispose)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。