用Flutter做APP學習心得：Flutterwidget的生命周期-創(chuàng)新互聯(lián)

第一次看文章的朋友可以關(guān)注我，會不定期發(fā)布大廠面試題、Android架構(gòu)技術(shù)知識點及解析等內(nèi)容，還有Android學習PDF+源碼筆記+面試文檔+進階視頻分享

更多還可以看我的GitHub鏈接： https://github.com/Meng997998/AndroidJX，看完順便點亮一下星星哦

前言

最近一直在用flutter做app，感覺就像用vue或react寫web頁面一樣，蠻好玩的。為了加深自己對Flutter的理解，記錄一下自己的學習心得。

成都創(chuàng)新互聯(lián)公司專業(yè)提供德陽服務(wù)器托管服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購買德陽服務(wù)器托管服務(wù)，并享受7*24小時金牌售后服務(wù)。

Widget、StatefulWidget、StatelessWidget

看源碼就知道這三者的關(guān)系了，代碼如下：

abstract class Widget extends DiagnosticableTree {  const Widget({ this.key });  final Key key;  @protected
  Element createElement();  static bool canUpdate(Widget oldWidget, Widget newWidget) {    return oldWidget.runtimeType == newWidget.runtimeType
        && oldWidget.key == newWidget.key;
  }  
}abstract class StatelessWidget extends Widget {  const StatelessWidget({ Key key }) : super(key: key);  @override
  StatelessElement createElement() => StatelessElement(this);  @protected
  Widget build(BuildContext context);  
}abstract class StatefulWidget extends Widget {  const StatefulWidget({ Key key }) : super(key: key);  @override
  createElement() => StatefulElement(this);  @protected
  State createState();
}

StatelessWidget沒有狀態(tài)，可以類比react中的傻瓜組件；

StatefulWidget有狀態(tài)，狀態(tài)存在State對象中；所以一般說的生命周期都是指的是State的生命周期；

abstract class State extends Diagnosticable {  void initState() { }  void didChangeDependencies() { }  Widget build(BuildContext context);  void setState(VoidCallback fn) {}  void deactivate() { }  void dispose() { }  void reassemble() { }  void didUpdateWidget(covariant T oldWidget) { }
}

現(xiàn)象

為了驗證State的生命周期，我的操作是從Home->page1->page2->page1->Home

從Home->page1，這是初始化的過程

I/flutter ( 4980): [debug],[lifeCycle], initState
I/flutter ( 4980): [debug],[lifeCycle], didChangeDependencies
I/flutter ( 4980): [debug],[lifeCycle], build

從page1->page2，相當于page1被暫時移出

I/flutter ( 4980): [debug],[lifeCycle], deactivate
I/flutter ( 4980): [debug],[lifeCycle], didChangeDependencies
I/flutter ( 4980): [debug],[lifeCycle], build

從page2->page1，相當于page1又被移回來了

I/flutter ( 4980): [debug],[lifeCycle], deactivate
I/flutter ( 4980): [debug],[lifeCycle], didChangeDependencies
I/flutter ( 4980): [debug],[lifeCycle], build

從page1->Home，相當于page1被刪除

I/flutter ( 4980): [debug],[lifeCycle], deactivate
I/flutter ( 4980): [debug],[lifeCycle], dispose

生命周期的總結(jié)

直接看圖，應(yīng)該很清晰了，

image
文章名稱：用Flutter做APP學習心得：Flutterwidget的生命周期-創(chuàng)新互聯(lián)
文章地址：http://m.jiaotiyi.com/article/dpejdg.html