Flutter 開發小結

Flutter 開發知識

本文記錄一下，本身Flutter開發過程當中的點點滴滴，若有錯誤，請諒解

Widget 生命週期

1. 一切皆widget

2. StatelessWidget狀態不可變，一般用於那些狀態不變的控件

   無狀態的widget的生命週期方只有 createElement 和 build兩個生命週期方法

   注意:並非寫了以後，就完全沒法改變， 經過狀態管理框架，依舊可以使StatelessWidget發生改變

3. StatefulWidget狀態，多個生命週期函數參與回調

   初始化時期 createState 和 initState

   更新時期 didChangeDependencies 、build 、didUpdateWidget

   銷燬時期 deactivate 和 dispose

• initState 建立之初調用一次 相似於onCreate

• didChangeDependencies 在initState以後調用，能夠在這個方法中跨組件拿到數據

• build 建立Widget的地方，在離開和回到頁面的時候都會調用

• didUpdateWidget 當組件的狀態改變的時候就會調用,好比調用-了setState

• deactivate 在離開和回到頁面的時候都會調用

• dispose 銷燬的時候調用

三棵樹 (Widget Element RenderObject)

Flutter 的渲染流程

runApp(rootWidget)，將rootWidget傳給rootElement,作爲rootElement的子節點,生成Element樹，由Element樹生成Render樹

Widget:存放渲染內容、視圖佈局信息,widget的屬性

Element:存放上下文，經過Element遍歷視圖樹，Element同時持有Widget和RenderObject

RenderObject:根據Widget的佈局屬性進行layout，paint Widget傳入的內容

https://juejin.im/post/5c7cd2f4e51d4537b05b0974

https://www.jianshu.com/u/74ca1c6607b6

線程和異步

• Dart是單線程模型，沒有線程的概念，只有isolate，每一個isolate都是隔離的，並不會共享內存。

  而一個Dart程序是在Main isolate的main函數開始 而在Main函數結束後，Main isolate線程開始一個一個（one by on e）的開始處理Event Queue中的每個Event

• Dart事件循環機制是由一個 消息循環(Event looper) 和兩個消息隊列：事件隊列(Event queue) 和 微任務隊列(Micro Task queue) 構成

• 消息循環的處理機制爲

  1是否有微任務隊列，若是有微任務，處理微任務，走2。若是沒有微任務，走3

  2 微任務處理完成後，回來走1

  3 是否有事件隊列，若是有事件隊列，處理事件，走4。若是沒有事件，走5

  4 事件處理完成以後，回來走1

  5 程序正常exit

https://segmentfault.com/a/1190000008800122

https://www.didierboelens.com/2019/01/futures-isolates-event-loop

https://medium.com/dartlang/dart-asynchronous-programming-isolates-and-event-loops-bffc3e296a6

狀態管理

• 1 狀態管理的目的就是爲了讓界面與業務分離，界面根據state來顯示

• 2 下圖是一個多頁面共享，維護困難，邏輯混亂的頁面狀態

• 3 StatefulWidget Flutter默認的狀態管理

• 4 InheritedWidget

  主要做用在widget樹種傳遞信息

• 5 Provider

  Provider是基於觀察者模式, 狀態改變時要notifyListeners()

  https://pub.dev/packages/provider

• 6 Scoped Model ，Bloc，Redux ，Flutter Redux，Rxdart等等

  目前推薦是使用谷歌的provider

  http://fluttersamples.com/

  https://flutter.dev/docs/development/data-and-backend/state-mgmt

  https://flutter.dev/docs/development/data-and-backend/state-mgmt/options

模式

• 1 Bloc

  https://cloud.tencent.com/developer/article/1345645

• 2 MVVM

  https://zhuanlan.zhihu.com/p/81520059

  https://www.jianshu.com/p/384919408dda