Flutter框架分析(二)-- 初始化
前言
上篇文章《Flutter框架分析(一)-- 总览和Window》介绍了Flutter框架最核心的渲染流水线和最基础的Window
。这篇文章里,我们从Flutter框架的初始化来进入,来一步步揭开Flutter的面纱。写过Flutter程序的同学都知道,Flutter app的入口就是函数runApp()
。
void main() {
runApp(MyApp());
}
那么我们就从函数runApp()
入手,看看这个函数被调用以后发生了什么。
初始化
runApp()
的函数体位于widgets/binding.dart
。长这样:
void runApp(Widget app) {
WidgetsFlutterBinding.ensureInitialized()
..attachRootWidget(app)
..scheduleWarmUpFrame();
}
从调用的函数名称就可以看出来,它做了3件事,
- 确保
WidgetsFlutterBinding
被初始化。 - 把你的Widget贴到什么地方去。
- 然后调度一个“热身”帧。
OK,那我们就来挨个看一下这3件事具体都做了什么。
ensureInitialized()
首先我们先看一下WidgetsFlutterBinding
是什么,从这个类的名称来看,是把Widget和Flutter绑定在一起的意思。
class WidgetsFlutterBinding extends BindingBase with GestureBinding, ServicesBinding, SchedulerBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding {
static WidgetsBinding ensureInitialized() {
if (WidgetsBinding.instance == null)
WidgetsFlutterBinding();
return WidgetsBinding.instance;
}
}
这个类继承自BindingBase
并且混入(Mixin
)了很多其他类,看名称都是不同功能的绑定。而静态函数ensureInitialized()
所做的就是返回一个WidgetsBinding.instance
单例。
混入的那些各种绑定类也都是继承自抽象类BindingBase
的。
abstract class BindingBase {
BindingBase() {
...
initInstances();
...
}
...
ui.Window get window => ui.window;
}
关于抽象类BindingBase
,你需要了解两个地方,一个是在其构造的时候会调用函数initInstances()
。这个函数会由其子类,也就是上面说那些各种混入(Mixin)的绑定类各自实现,具体的初始化都是在其内部实现的。另一个就是BindingBase
有一个getter
,返回的是window
。还记得在《Flutter框架分析(一)-- 总览和Window》中提到过的窗口吗?没错,这里的window
就是它。那我们是不是可以推论,这些个绑定其实就是对window
的封装?来,让我们挨个看一下这几个绑定类在调用initInstances()
的时候做了什么的吧。
第一个是GestureBinding
。手势绑定。
mixin GestureBinding on BindingBase implements HitTestable, HitTestDispatcher, HitTestTarget {
@override
void initInstances() {
super.initInstances();
_instance = this;
window.onPointerDataPacket = _handlePointerDataPacket;
}
在调用initInstances()
的时候,主要做的事情就是给window
设置了一个手势处理的回调函数。所以这个绑定主要是负责管理手势事件的。
第二个是ServicesBinding
。服务绑定
mixin ServicesBinding on BindingBase {
@override
void initInstances() {
super.initInstances();
_instance = this;
window
..onPlatformMessage = BinaryMessages.handlePlatformMessage;
initLicenses();
}
这个绑定主要是给window
设置了处理Platform Message的回调。
第三个是SchedulerBinding
。调度绑定。
mixin SchedulerBinding on BindingBase, ServicesBinding {
@override
void initInstances() {
super.initInstances();
_instance = this;
window.onBeginFrame = _handleBeginFrame;
window.onDrawFrame = _handleDrawFrame;
SystemChannels.lifecycle.setMessageHandler(_handleLifecycleMessage);
}
这个绑定主要是给window
设置了onBeginFrame
和onDrawFrame
的回调,回忆一下上一篇文章讲渲染流水线的时候,当Vsync信号到来的时候engine会回调Flutter的来启动渲染流程,这两个回调就是在SchedulerBinding
管理的。
第四个是PaintingBinding
。绘制绑定。
mixin PaintingBinding on BindingBase, ServicesBinding {
@override
void initInstances() {
super.initInstances();
_instance = this;
_imageCache = createImageCache();
}
这个绑定只是创建了个图片缓存,就不细说了。
第五个是SemanticsBinding
。辅助功能绑定。
mixin SemanticsBinding on BindingBase {
@override
void initInstances() {
super.initInstances();
_instance = this;
_accessibilityFeatures = window.accessibilityFeatures;
}
这个绑定管理辅助功能,就不细说了。
第六个是RendererBinding
。渲染绑定。这是比较重要的一个类。
mixin RendererBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, SemanticsBinding, HitTestable {
@override
void initInstances() {
super.initInstances();
_instance = this;
_pipelineOwner = PipelineOwner(
onNeedVisualUpdate: ensureVisualUpdate,
onSemanticsOwnerCreated: _handleSemanticsOwnerCreated,
onSemanticsOwnerDisposed: _handleSemanticsOwnerDisposed,
);
window
..onMetricsChanged = handleMetricsChanged
..onTextScaleFactorChanged = handleTextScaleFactorChanged
..onPlatformBrightnessChanged = handlePlatformBrightnessChanged
..onSemanticsEnabledChanged = _handleSemanticsEnabledChanged
..onSemanticsAction = _handleSemanticsAction;
initRenderView();
_handleSemanticsEnabledChanged();
assert(renderView != null);
addPersistentFrameCallback(_handlePersistentFrameCallback);
_mouseTracker = _createMouseTracker();
}
这个绑定是负责管理渲染流程的,初始化的时候做的事情也比较多。
首先是实例化了一个PipelineOwner
类。这个类负责管理驱动我们之前说的渲染流水线。随后给window
设置了一系列回调函数,处理屏幕尺寸变化,亮度变化等。接着调用initRenderView()
。
void initRenderView() {
assert(renderView == null);
renderView = RenderView(configuration: createViewConfiguration(), window: window);
renderView.scheduleInitialFrame();
}
这个函数实例化了一个RenderView
类。RenderView
继承自RenderObject
。我们都知道Flutter框架中存在这一个渲染树(render tree)。这个RenderView
就是渲染树(render tree)的根节点,这一点可以通过打开"Flutter Inspector"看到,在"Render Tree"这个Tab下,最根部的红框里就是这个RenderView
。
RenderView
最后调用addPersistentFrameCallback
添加了一个回调函数。请大家记住这个回调,渲染流水线的主要阶段都会在这个回调里启动。
第七个是WidgetsBinding
,组件绑定。
mixin WidgetsBinding on BindingBase, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
@override
void initInstances() {
super.initInstances();
_instance = this;
buildOwner.onBuildScheduled = _handleBuildScheduled;
window.onLocaleChanged = handleLocaleChanged;
window.onAccessibilityFeaturesChanged = handleAccessibilityFeaturesChanged;
SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);
SystemChannels.system.setMessageHandler(_handleSystemMessage);
}
这个绑定的初始化先给buildOwner
设置了个onBuildScheduled
回调,还记得渲染绑定里初始化的时候实例化了一个PipelineOwner
吗?这个BuildOwner
是在组件绑定里实例化的。它主要负责管理Widget的重建,记住这两个"owner"。他们将会Flutter框架里的核心类。接着给window
设置了两个回调,因为和渲染关系不大,就不细说了。最后设置SystemChannels.navigation
和SystemChannels.system
的消息处理函数。这两个回调一个是专门处理路由的,另一个是处理一些系统事件,比如剪贴板,震动反馈,系统音效等等。
至此,WidgetsFlutterBinding.ensureInitialized()
就跑完了,总体上来讲是把window
提供的API分别封装到不同的Binding里。我们需要重点关注的是SchedulerBinding
,RendererBinding
和WidgetsBinding
。这3个是渲染流水线的重要存在。
接下来就该看一下runApp()
里的第二个调用了。
attachRootWidget(app)
这个函数的代码如下:
void attachRootWidget(Widget rootWidget) {
_renderViewElement = RenderObjectToWidgetAdapter<RenderBox>(
container: renderView,
debugShortDescription: '[root]',
child: rootWidget
).attachToRenderTree(buildOwner, renderViewElement);
}
在之前说的RendererBinding
的初始化的时候,我们得到了一个RenderView
的实例,render tree的根节点。RenderView
是继承自RenderObject
的,而RenderObject
需要有对应的Widget
和Element
。上述代码中的RenderObjectToWidgetAdapter
就是这个Widget
。而对应的Element
就是RenderObjectToWidgetElement
了,既然是要关联到render tree的根节点,那它自然也就是element tree的根节点了。
从上述分析我们可以得出结论:
- 渲染绑定(
RendererBinding
)通过pipelineOwner
间接持有render tree的根节点RenderView
。 - 组件绑定(
WidgetsBinding
)持有element tree的根节点RenderObjectToWidgetElement
。
那么RenderObjectToWidgetElement
是怎么和RenderView
关联起来的呢,那自然是通过一个Widget做到的了,看下RenderObjectToWidgetAdapter
的代码:
class RenderObjectToWidgetAdapter<T extends RenderObject> extends RenderObjectWidget {
/// Creates a bridge from a [RenderObject] to an [Element] tree.
///
/// Used by [WidgetsBinding] to attach the root widget to the [RenderView].
RenderObjectToWidgetAdapter({
this.child,
this.container,
this.debugShortDescription
}) : super(key: GlobalObjectKey(container));
@override
RenderObjectToWidgetElement<T> createElement() => RenderObjectToWidgetElement<T>(this);
@override
RenderObjectWithChildMixin<T> createRenderObject(BuildContext context) => container;
...
}
你看,createElement()
返回的就是RenderObjectToWidgetElement
,而createRenderObject
返回的container
就是构造这个Widget传入的RenderView
了。而我们自己的MyApp
作为一个子widget存在于RenderObjectToWidgetAdapter
之中。
最后调用的attachToRenderTree
做的事情属于我们之前说的渲染流水线的构建(Build)阶段,这时会根据我们自己的widget生成element tree和render tree。构建(Build)阶段完成以后,那自然是要进入布局(Layout)阶段和绘制(Paint)阶段了。怎么进呢?那就是runApp
里的最后一个函数调用了。
scheduleWarmUpFrame()
void scheduleWarmUpFrame() {
...
Timer.run(() {
...
handleBeginFrame(null);
...
});
Timer.run(() {
...
handleDrawFrame();
...
});
}
这个函数其实就调了两个函数,就是之前我们讲window
的时候说的两个回调函数onBeginFrame
和onDrawFrame
吗?这里其实就是在具体执行这两个回调。最后渲染出来首帧场景送入engine显示到屏幕。这里使用Timer.run()
来异步运行两个回调,是为了在它们被调用之前有机会处理完微任务队列(microtask queue)。关于Dart代码异步执行可以参考我的文章《Flutter/Dart中的异步》
我们之前说渲染流水线是由Vsync信号驱动的,但是上述过程都是在runApp()
里完成的。并没有看到什么地方告诉engine去调度一帧。这是因为我们是在做Flutter的初始化。为了节省等待Vsync信号的时间,所以就直接把渲染流程跑完做出来第一帧图像来了。
总结
Flutter框架的初始化就介绍完了。顺带还包括了Flutter app首帧渲染的一个大致流程。本文中所说的Flutter框架初始化过程其实主要的点都在几个绑定(binding)的初始化。理解的时候要记住上篇文章中介绍的渲染流水线和window
。Flutter框架其实就是围绕这两个东西在做文章。总结起来本文的要点这么几个:
- 3个重要绑定:
SchedulerBinding
,RendererBinding
和WidgetsBinding
。 - 2个“owner”:
PipelineOwner
和BuildOwner
。 - 2颗树的根节点:render tree根节点
RenderView
;element tree根节点RenderObjectToWidgetElement
。
有了这些基础以后,后续的文章我们会再去分析Widget
,Element
和RenderObject
之间的关系,以及具体的Flutter渲染流水线各阶段是如何工作的。
- 史上最清晰的红黑树讲解(上)
- C++之new/delete/malloc/free详解
- 验证 结构体指针与自增运算符
- Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失下篇
- ONOS1.3.0集群实验
- Spring Boot下的TDD(测试驱动开发)
- MySQL的索引是什么?怎么优化?
- C语言之函数
- ElasticSearch搜索引擎在SpringBoot中的实践
- 消费者驱动的微服务契约测试套件Spring Cloud Contract
- 使用Spring Boot开发一个Spring Mobile程序
- Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失
- 内网穿透工具-ittun
- Elastic-Job-Spring-Boot-Starter简化你的任务配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 关于本博客皮肤样式配置
- 03 . Go开发一个日志平台之Elasticsearch使用及kafka消费消息发送到Elasticsearch
- GO 匿名函数和闭包
- Nginx升级加固SSL/TLS协议信息泄露漏洞(CVE-2016-2183)和HTTP服务器的缺省banner漏洞
- GO中间件(Middleware )
- TomcatAJP文件包含漏洞及线上修复漏洞
- golang new和make的区别
- Magicodes.IE之导入导出筛选器
- 界面酷炫,功能强大!这款 Linux 性能实时监控工具超好用!老斯机搞它!
- httprunner学习28-yaml文件 参数化读取 csv 文件字符串转 int
- 30个编程小技巧,提高代码性能
- httprunner学习27-参数关联时在 yaml 文件 int 和 str 数据类型转换
- python笔记47-面试题:如何判断字典a在字典b
- Go操作腾讯云COS对象存储的简单使用案例
- Go channel 实现原理分析