1. 設為首頁   文化中國網歡迎您~!

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

          第一次看文章的朋友可以關注我和我的專欄,會不定期發布大廠面試題、Android架構技術知識點及解析等內容,還有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沒有狀態,可以類比react中的傻瓜組件;

          StatefulWidget有狀態,狀態存在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) { }}復制代碼

          現象

          為了驗證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對象的依賴發生變化時,這是當state中通過InheritedWidget使用了父級widget的共享數據,當數據變化的時候,就會調用子widget的didChangeDependencies()

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

          疑問

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

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

          最后

          現在,很多公司的項目已經上flutter,還有些公司在上flutter的路上

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



          推薦閱讀:蘋果7p和蘋果8
          好运来 www.kingbcw.com:康平县| www.autapoleasingowe.net:建始县| www.hg79678.com:昭通市| www.tech133.com:桐梓县| www.booksgratis.com:霞浦县| www.ptcdw.cn:确山县| www.imeldats.com:内黄县| www.prematureblog4u.com:榕江县| www.jsahs.com:从化市| www.airmaxshoesnike.net:徐闻县| www.kenyahotelresort.com:凤翔县| www.lvvbbe.com:临安市| www.bateriaslight-infinity.com:仪陇县| www.povprofits.com:大方县| www.beeyourlashes.com:鄄城县| www.666er456546.com:徐汇区| www.agaogluexport.com:安新县| www.zhiyitwp.com:甘孜县| www.whatssparkling.com:安泽县| www.smufet.com:泰兴市| www.thetalisker.com:清镇市| www.fotoprincipediano.com:乌兰察布市| www.skatesharks.com:盐池县| www.bethesdauk.com:灵丘县| www.rncjw.cn:黄山市| www.apofraxeis-athina.com:安塞县| www.3iiiii.com:云南省| www.dominic-paul.com:思南县| www.house-of-jorob.com:镇远县| www.cf1000.com:苍南县| www.gvrfr.com:高雄县| www.mxfz8.com:望城县| www.serviceideas-blog.com:方城县| www.774006.com:高雄县| www.myrtlebeachrealestatetips.com:林口县| www.buchuebersetzungen.com:乌拉特前旗| www.tradersofcamden.com:丰台区| www.r3989.com:右玉县| www.217765.com:安达市| www.thewinconcept.com:崇明县| www.dg-dacheng.com:墨竹工卡县| www.classicblindscc.com:日土县| www.pravasiadventure.com:连城县| www.amde-in-china.com:河间市| www.m2676.com:阳泉市| www.360cityvisit.com:开封县| www.hg15345.com:宁陵县| www.557934.com:安义县| www.yr597.com:新余市| www.852315.com:南通市| www.090577.com:旅游| www.www2246v.com:手游| www.aquaherbals.com:张家界市| www.versign-grs.com:泸定县| www.global-b2b-market.com:华宁县| www.magazintelevizyonu.com:岑溪市| www.spiritridersmc.org:涟水县| www.consumsostenible.com:扶风县| www.dantealighieribsb.com:阳西县| www.qiaotaitai-bj.com:云林县| www.actuneups.com:霍邱县| www.yhjzsd.com:衡南县| www.hg71789.com:福贡县| www.navarrosent.com:会宁县| www.auto-exclusive67.com:洛宁县| www.rentanaudience.com:梁河县| www.zxqlw.cn:察隅县| www.gmbmw.com:邢台县| www.55conduitroad.com:汤阴县| www.wagescout.com:蓬莱市| www.jswenzhuomjg.com:英德市| www.comtery.com:城口县| www.netjetmarketing.com:开江县| www.taxi053.com:东阳市| www.hg62345.com:辽宁省| www.rubinsteintaybi.org:宁陕县| www.meujp.com:金乡县| www.70088a.com:巴林右旗| www.pianfang120.com:永胜县| www.qyu3.com:南康市| www.chansamabut.com:互助| www.inlogan.com:定远县| www.kinostream.net:彭阳县| www.sevtree.com:临夏市|