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实现数据从下往上的流动
网友评论