文章目錄

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

一、Flutter 頁面生命周期

---

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

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

1、StatelessWidget 組件生命周期函數(shù)

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

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 組件生命周期函數(shù)

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

① 初始化期 : createState , initState ;

② 更新期 : didChangeDependencies , build , didUpdateWidget ;

③ 銷毀期 : deactivate , dispose ;

二、StatefulWidget 組件生命周期

---

1、createState

createState 函數(shù) :

• 所處時(shí)期 : 初始化期的生命周期函數(shù)
• 調(diào)用時(shí)機(jī) : 創(chuàng)建 StatefulWidget 之后調(diào)用的第一個(gè)方法 ;
• 抽象方法 : 該方法是抽象方法 , 必須覆蓋重寫該方法 ;

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

2、initState

initState 函數(shù) :

• 所處時(shí)期 : 初始化期的生命周期函數(shù)
• 調(diào)用時(shí)機(jī) : 該方法是創(chuàng)建 Widget 組件時(shí)除構(gòu)造方法之外的第一個(gè)方法 ,
• 對應(yīng)方法 : 對應(yīng) Android 中的 onCreate 方法 ; 對應(yīng) iOS 中的 viewDidLoad 方法 ;
• 常用用法 : 在該方法中執(zhí)行一些初始化操作 ;

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

3、didChangeDependencies

didChangeDependencies 函數(shù) :

• 所處時(shí)期 : 更新期的生命周期函數(shù) ;
• 調(diào)用時(shí)機(jī) : ① 創(chuàng)建 Widget 組件時(shí) , 調(diào)用完 initState 方法后 , 調(diào)用該方法 ; ② InheritedWidget 相關(guān) ( 暫不涉及 ) ;

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

4、build

build 函數(shù) :

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

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

5、didUpdateWidget

didUpdateWidget 函數(shù) :

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

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

6、deactivate

deactivate 函數(shù) :

• 所處時(shí)期 : 銷毀期的生命周期函數(shù) ;
• 調(diào)用時(shí)機(jī) : 該生命周期方法不經(jīng)常調(diào)用 , 只有在組件被移除時(shí)才調(diào)用 ;

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

7、dispose

dispose 函數(shù) :

• 所處時(shí)期 : 銷毀期的生命周期函數(shù) ;
• 調(diào)用時(shí)機(jī) : 組件被銷毀時(shí)調(diào)用 , 要在該方法中進(jìn)行資源的釋放與銷毀操作 ;

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

三、完整代碼示例

---

完整代碼示例 :

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

運(yùn)行效果 :

打印日志 : 進(jìn)入界面 , 點(diǎn)擊 $3$ 下按鈕 , 然后退出界面 ;

• 進(jìn)入界面 : 先調(diào)用 initState 方法 , 然后調(diào)用 didChangeDependencies 方法 , 最后調(diào)用 build 方法 ;

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

• 點(diǎn)擊按鈕 : 每次點(diǎn)擊按鈕都打印一次 build , 總共調(diào)用了 $3$ 次 build 方法 ;

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

• 退出界面 : 先調(diào)用 deactivate 方法 , 最后調(diào)用 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

四、相關(guān)資源

---

參考資料 :

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

博客源碼下載 :

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。