Flutter 開發小結

荒天帝葉凡發表於2020-05-26
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

相關文章