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