深刻了解Flutter界面开发

闲鱼技术-朝空

概要

本文不是flutter界面开发入门文章，而是一篇深刻介绍Flutter framework关于视图树的建立与管理机制、布局、渲染的原理、以及flutter布局与渲染相关性能优化的设计思路的文章。同时介绍在使用flutter开发过程当中，遇到的一些坑和相应的解决方案。

Flutter框架简介

1. 跨平台应用的框架，没有使用WebView或者系统平台自带的控件，使用自身的高性能渲染引擎(Skia)自绘，
2. 界面开发语言使用dart，底层渲染引擎使用C, C++
3. 组合大于继承，控件自己一般由许多小型、单用途的控件组成，结合起来产生强大的效果，类的层次结构是扁平的，以最大化可能的组合数量

Rendering Pipeline

本文主要介绍build、layout、paint的三个阶段

视图树

Widget&Element&RenderObject

flutter视图树包含了三种树，上图只是介绍了三颗树的基础class的对应关系和功能介绍

建立树

1. 建立widget树
2. 调用runApp(rootWidget)，将rootWidget传给rootElement,作为rootElement的子节点,生成Element树，由Element树生成Render树
   

• Widget:存放渲染内容、视图布局信息,widget的属性最好都是immutable(如何更新数据呢？查看后续内容)
• Element:存放上下文，经过Element遍历视图树，Element同时持有Widget和RenderObject
• RenderObject:根据Widget的布局属性进行layout，paint Widget传人的内容

更新树

为何widget都是immutable？

flutter界面开发是一种响应式编程，主张simple is fast，flutter设计的初衷但愿数据变动时发送通知到对应的可变动节点（多是一个StatefullWidget子节点,也能够是rootWidget）,由上到下从新create widget树进行刷新，这种思路比较简单，不用关心数据变动会影响到哪些节点。

widget从新建立，element树和renderObject树是否也从新建立？

widget只是一个配置数据结构，建立是很是轻量的，加上flutter团队对widget的建立/销毁作了优化，不用担忧整个widget树从新建立所带来的性能问题，可是renderobject就不同了，renderobject涉及到layout、paint等复杂操做，是一个真正渲染的view，整个view 树从新建立开销就比较大，因此答案是否认的。

树的更新规则

1. 找到widget对应的element节点，设置element为dirty，触发drawframe, drawframe会调用element的performRebuild()进行树重建
2. widget.build() == null, deactive element.child,删除子树，流程结束
3. element.child.widget == NULL, mount 的新子树，流程结束
4. element.child.widget == widget.build() 无需重建，不然进入流程5
5. Widget.canUpdate(element.child.widget, newWidget) == true，更新child的slot，element.child.update(newWidget)(若是child还有子节点，则递归上面的流程进行子树更新),流程结束，不然转6
6. Widget.canUpdate(element.child.widget, newWidget) ！= true（widget的classtype 或者 key 不相等），deactivew element.child，mount 新子树

注意事项：

1. element.child.widget == widget.build(),不会触发子树的update，当触发update的时候，若是没有生效，要注意widget是否使用旧widget，没有new widget，致使update流程走到该widget就中止了
2. 子树的深度变化，会引发子树重建，若是子树是一个复杂度很高的树，可使用GlobalKey作为子树widget的key。GlobalKey具备缓存功能

如何触发树更新

1. 全局更新：调用runApp(rootWidget)，通常flutter启动时调用后再也不会调用
2. 局部子树更新, 将该子树作StatefullWidget的一个子widget，并建立对应的State类实例，经过调用state.setState() 触发该子树的刷新

Widget

StatefullWidget vs StatelessWidget

1. StatelessWidget:无中间状态变化的widget，须要更新展现内容就得经过从新new，flutter推荐尽可能使用StatelessWidget
2. StatefullWidget:存在中间状态变化，那么问题来了，widget不是都immutable的，状态变化存储在哪里？flutter 引入state的类用于存放中间态，经过调用state.setState()进行此节点及如下的整个子树更新

State 生命周期

1. initState(): state create以后被insert到tree时调用的
2. didUpdateWidget(newWidget):祖先节点rebuild widget时调用
3. deactivate():widget被remove的时候调用，一个widget从tree中remove掉，能够在dispose接口被调用前，从新instert到一个新tree中

4. didChangeDependencies():

   • 初始化时，在initState()以后马上调用
   • 当依赖的InheritedWidget rebuild,会触发此接口被调用

5. build():

   • After calling [initState].
   • After calling [didUpdateWidget].
   • After receiving a call to [setState].
   • After a dependency of this [State] object changes (e.g., an[InheritedWidget] referenced by the previous [build] changes).
   • After calling [deactivate] and then reinserting the [State] object into the tree at another location.
6. dispose():Widget完全销毁时调用
7. reassemble(): hot reload调用

注意事项：

1. A页面push一个新的页面B,A页面的widget树中的全部state会依次调用deactivate(), didUpdateWidget(newWidget)、build()（这里怀疑是bug，A页面push一个新页面，理论上并无将A页面进行remove操做），固然从功能上，没有看出来有什么异常
2. 当ListView中的item滚动出可显示区域的时候，item会被从树中remove掉，此item子树中全部的state都会被dispose，state记录的数据都会销毁，item滚动回可显示区域时，会从新建立全新的state、element、renderobject
3. 使用hot reload功能时，要特别注意state实例是没有从新建立的，若是该state中存在一下复杂的资源更新须要从新加载才能生效，那么须要在reassemble()添加处理，否则当你使用hot reload时候可能会出现一些意想不到的结果，例如，要将显示本地文件的内容到屏幕上，当你开发过程当中，替换了文件中的内容，可是hot reload没有触发从新读取文件内容，页面显示仍是原来的旧内容

数据流转

从上往下

数据从根往下传数据，常规作法是一层层往下，当深度变大，数据的传输变的困难，flutter提供InheritedWidget用于子节点向祖先节点获取数据的机制，以下例子：

class FrogColor extends InheritedWidget {
   const FrogColor({
     Key key,
     @required this.color,
     @required Widget child,
   }) : assert(color != null),
        assert(child != null),
        super(key: key, child: child);

   final Color color;

   static FrogColor of(BuildContext context) {
     return context.inheritFromWidgetOfExactType(FrogColor);
   }

   @override
   bool updateShouldNotify(FrogColor old) => color != old.color;
}

child及其如下的节点能够经过调用下面的接口读取color数据
 FrogColor.of(context).color 

说明：BuildContext 就是Element的一个接口类

context.inheritFromWidgetOfExactType(FrogColor)实际上是经过context/element往上遍历树，查找到第一个FrogColor的祖先节点，取该节点的widget对象

从下往上

子节点状态变动，向上上报经过发送通知的方式

• 定义通知类，继承至Notification
• 父节点使用NotificationListener 进行监听捕获通知
• 子节点有数据变动调用下面接口进行数据上报
   Notification(data).dispatch(context) 

闲鱼flutter的界面框架设计

Layout

Size 计算

parent传入约束条件，在dramframe的layout阶段，child根据自身的渲染内容返回size

问题：在build()阶段获取不到size，不少时候须要提早知道部分widget size来进行布局，解决方案当widget 在对应renderobject的layout阶段以后，发送一个LayoutChangeNotification,参考SizeChangedLayoutNotifier class，可是SizeChangedLayoutNotifier没有上报init layout size，能够本身参考这个实现封装一个Notifier

Offset 计算

1. renderObject拿到计算好的size，再加上一些布局属性（align、paddig）等，计算child相对parent的offset
2. offset存放在每一个child renderObject的BoxParentData中
3. 当parent拥有mutil children时，BoxParentData还用来存children兄弟节点之间的遍历顺序

Relayout boundary

renderObject在layout阶段作了Relayout boundary的优化，

>>>>阅读全文