前言
如何快速高效的掌握一门知识,建议先阅读下这篇文章关于学习的一些看法。
Flutter渲染原理系列文章:
Flutter渲染原理系列之开篇问题
一、开篇问题
问题:在Flutter
中,"Hello world
"是如何显示到屏幕上的? 详细说说其实现原理
。
如果面对上述问题头脑一片空白,或者只能想起零星的知识点,那就跟随我一起开始探索吧。
学完该系列文章后,面对上述问题就能游刃有余了。
Tips
:带着问题去探索其背后的实现原理,记忆更为深刻,记得慢就是快,重要的核心知识从来都不是那么容易掌握的。
二、实现代码示例
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World',
home: Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: Center(
child: Text('Hello World!'),
),
),
);
}
}
三、考察知识点
1、Widget
相关概念的理解。
2、runApp
(widget
) 的执行流程。
3、核心
:渲染原理
。
四、如何高效掌握渲染原理?
高效学习的金字塔图:
Flutter
渲染原理图:
牢记上图,两周内回想并能熟练默写 20
遍以上,并深刻理解其中每个知识点,然后教给他人。
关于渲染过程中的知识点,后续章节会专门讲解。
Tips
:教给他人或面试回答时,头脑中应立即浮现该图,图像更能让人记忆深刻
。
五、如何回答开篇问题?
开场引入
在Flutter
中,所有的UI
组件都是通过Widget
构建的。为了显示"Hello world
",需要定义一个Widget
树,然后调用runApp
方法将其渲染到屏幕上。
正式回答
Flutter
应用程序的启动始于main
函数中的runApp
调用。- 在
runApp
中,首先会调用ensureInitialized
方法确保WidgetsFlutterBinding
被初始化,即七大xxxBinding
的初始化操作 。 - 其次会调用
scheduleAttachRootWidget
方法,该过程可视为渲染阶段
。
渲染阶段的六个主要步骤
1、构建Widget
树( Build
阶段 ):
Flutter
引擎会根据当前状态
构建一个Widget
树。Widget
会创建一个与之对应的Element
树,其关系可为一对多
。
2、构建Element
树( Build
阶段 ):
- 每个
Element
关联着一个Widget
和一个RenderObject
。 Element
管理着Widget
的生命周期,并且负责将Widget
的属性传递给对应的RenderObject
。Element
会创建或更新RenderOject
树,其关系为一对一
。
3、构建RenderObject
树( Layout
和Paint
阶段 ):
RenderObject
树负责实际的布局
和绘制
工作。RenderObject
中的节点会递归
地计算它们的尺寸
和位置
,该过程称为布局
。RenderObject
会调用paint
方法,将自身和子节点的内容绘制到画布上,该过程称为绘制
。
4、合成Layer
树:
RenderObject
绘制过程中会创建Layer
对象,这些Layer
对象会形成一个Layer
树。Layer
树的目的是为了优化渲染
过程,通过将UI
的不同部分分隔到不同的层中,可以减少重绘
的区域,提高渲染效率
。- 对
Layer
层中合成的数据进行栅格化后生成纹理
,然后发送到GPU
中处理。
5、GPU
渲染:
- 使用
Skia/Impeller
图形库对Layer
层发送过来的数据进行渲染。 - 再使用
OpenGL
或Vulkan
等图形库进行最终的像素渲染。 - 最后将渲染好的图像数据发送到显示器,完成一次渲染周期。
6、屏幕刷新
:
Flutter
的帧调度
依赖于垂直同步
(VSync
)信号,这确保了屏幕刷新率与应用帧率同步,通常为60Hz
。UI线程
在收到VSync
信号后开始新的帧的构建过程。
渲染完成后,从而显示"Hello world
"文本,这便是如何将文本显示到屏幕的大致过程。
后续章节会针对渲染过程中的各个核心知识点进行讲解,如果对你有帮助,记得关注 ! ! !
码字不易,记得 关注 + 点赞 + 收藏 + 评论