久久综合给合久久狠狠狠974色|亚洲成熟丰满熟妇高潮xxxxx|国产又黄又黄又大又粗又爽的视频|日韩久久久精品无码一区二区三区|中文字幕无码乱人伦一区二区三区|国产成人无码区免费内射一片色欲|亚洲av无码久久精品一区二区三区

用Flutter做APP學習心得:Flutter widget的生命周期

2020-03-23 07:18:00  閱讀:-  來源:

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



前言

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

Widget、StatefulWidget、StatelessWidget

看源碼就知道這三者的關系了,代碼如下:

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], initStateI/flutter ( 4980): [debug],[lifeCycle], didChangeDependenciesI/flutter ( 4980): [debug],[lifeCycle], build復制代碼

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

I/flutter ( 4980): [debug],[lifeCycle], deactivateI/flutter ( 4980): [debug],[lifeCycle], didChangeDependenciesI/flutter ( 4980): [debug],[lifeCycle], build復制代碼

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

I/flutter ( 4980): [debug],[lifeCycle], deactivateI/flutter ( 4980): [debug],[lifeCycle], didChangeDependenciesI/flutter ( 4980): [debug],[lifeCycle], build復制代碼

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

I/flutter ( 4980): [debug],[lifeCycle], deactivateI/flutter ( 4980): [debug],[lifeCycle], dispose復制代碼

生命周期的總結

直接看圖,應該很清晰了,

上述的生命周期,有兩個地方需要重點理解:

1. state對象的依賴發(fā)生變化時,這是當state中通過InheritedWidget使用了父級widget的共享數(shù)據(jù),當數(shù)據(jù)變化的時候,就會調(diào)用子widget的didChangeDependencies()

2. widget重新構建時,會調(diào)用state的didUpdateWidget();首先要知道,每個StatefulWidget都有一個state對應; 當widget重新構建的時候,會先調(diào)用widget的canUpdate方法來判斷是否需要更新;如果 key與runtimeType都一樣的,會返回true,表示可以對widget進行更新,從而調(diào)用state的didUpdateWidget();如果 key或runtimeType不一樣的時候,那就沒必要更新,直接刪除舊的,創(chuàng)建個新的就可以了。

疑問

在嘗試的時候,有個現(xiàn)象,當widget頁面在可見到不可見之間切換的時候,調(diào)用的方法都是一樣的,都是deativate->didChangeDependencies->build;這里有個疑問,既然都已經(jīng)不可見了為啥還要build?或者說都build了為啥還能不可見?

這個疑問應該需要進一步挖掘Flutter的widget、element、render樹的關系,等俺進一步理解了Flutter UI原理后再來分享哈

最后

現(xiàn)在,很多公司的項目已經(jīng)上flutter,還有些公司在上flutter的路上

學習要先人一步,關注我,私信【安卓】領取flutter學習視頻