Flutter分享

Flutter是什么

Google开源的，基于skia（开源，C/C++）绘图引擎，支持OpenGL，metal，Vulcan，使用dart语言进行编写的UI框架。
dart
源码

Flutter提供两种编译模式

JIT：脚本模式，通过dart虚拟机，解析代码，重新装载代码，在框架中对应的方法是resemble，在resemble覆盖下的情况，可使用热重载的方式调试代码，如果热重载没反应，考虑重新进入并加载页面or重新编译并启动项目。
AOP：静态编译，编译出来的项目，性能接近原生。

目前项目架构，混编模式

Flutter模块是独立于已有的iOS，Android项目的子项目，实现业务隔离。
通信通过已经写好的channel模块进行，可以实现方法调用，数据传递。
iOS模块：OC+swift代码编写的，支持Flutter<->原生通信的模块。
Android模块：Java代码编写的，支持Flutter<->原生通信的模块。
Flutter模块：业务代码

在混编项目中，flutter是在原生项目中是一个什么样的存在

因为需要获取原生层提供的页面生命周期，所以本质上，咱Android中，一个绑定与某个activity的view，在iOS中是一个绑定与一VC的view。
由于是独立于原生的UI框架，使用时包含多个重型对象，因此首次启动会比较慢。

Flutter配置，演示

配置链接
AS：
VS：

flutter 框架介绍

Widget

描述了他们的视图在给定其当前配置和状态时应该看起来像什么，可以理解为配置，类比Android和前端，是xml和css。但是widget不止于此，还可以用来描述事件，如GestureDetectorwidget并不具有显示效果，而是检测由用户做出的手势。
widget 非常轻量，虽然关联绘制对象，但是框架层有进行优化，避免了不必要的大型对象重建/销毁，所以在操作的过程中，不需要担心new一个widget像new一个view那样耗费性能。

Element

通常作为框架创建的实例对象，存在于element树中，存放上下文，通过Element遍历视图树，Element同时持有Widget和RenderObject。

Renderobject

根据Widget的布局属性进行layout，paint Widget传入的内容。

Widget,Element,Renderobject关系图

树的更新规则

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() 触发该子树的刷新

几个关键的源码文件

framework.dart：介绍Flutter 作为一个UI框架，他的UI是怎么构建的。
basic.dart：基础控件库，及一些基于基础控件构建的控件及相关示例。
object.dart：核心对象renderobject，包含页面布局及页面绘制前期工作等内容。

入门开发演示

项目结构
项目入口
页面构成
生命周期
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,会触发此接口被调用

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.

dispose():Widget彻底销毁时调用
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没有触发重新读取文件内容，页面显示还是原来的旧内容。

路由

Route和 Navigator。 一个route是一个屏幕或页面的抽象，Navigator是管理route的Widget。Navigator可以通过route入栈和出栈来实现页面之间的跳转。

InheritedWidget

数据从根往下传数据，常规做法是一层层往下，当深度变大，数据的传输变的困难，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
context.inheritFromWidgetOfExactType(FrogColor)其实是通过context/element往上遍历树，查找到第一个FrogColor的祖先节点，取该节点的widget对象

Notification

类似我们原生的通知方式，
1、注册监听
2、dispatch监听信息
3、remove监听
Notification参考

用InheritedWidget实现自上而下的数据流动
用Notification实现数据从下往上的流动