Flutter渲染原理系列之开篇问题

1,414 阅读4分钟

image.png

前言

如何快速高效的掌握一门知识,建议先阅读下这篇文章关于学习的一些看法

Flutter渲染原理系列文章:

Flutter渲染原理系列之开篇问题

Flutter渲染原理系列之runApp执行流程

Flutter渲染原理系列之构建Widget树

Flutter渲染原理系列之构建Element树

Flutter渲染原理系列之构建RenderObject

Flutter渲染原理系列之合成Layer树

Flutter渲染原理系列之GPU渲染及屏幕刷新(Async)

一、开篇问题

问题:在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、核心渲染原理

四、如何高效掌握渲染原理?

高效学习的金字塔图: image.png

Flutter渲染原理图: image.png

牢记上图,两周内回想并能熟练默写 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树( LayoutPaint阶段 ):

  • RenderObject树负责实际的布局绘制工作。
  • RenderObject中的节点会递归地计算它们的尺寸位置,该过程称为布局
  • RenderObject会调用paint方法,将自身和子节点的内容绘制到画布上,该过程称为绘制

4、合成Layer树:

  • RenderObject绘制过程中会创建Layer对象,这些Layer对象会形成一个Layer树。
  • Layer树的目的是为了优化渲染过程,通过将UI的不同部分分隔到不同的层中,可以减少重绘的区域,提高渲染效率
  • Layer层中合成的数据进行栅格化后生成纹理,然后发送到GPU中处理。

5、GPU渲染:

  • 使用Skia/Impeller图形库对Layer层发送过来的数据进行渲染。
  • 再使用OpenGLVulkan等图形库进行最终的像素渲染。
  • 最后将渲染好的图像数据发送到显示器,完成一次渲染周期。

6、屏幕刷新

  • Flutter帧调度依赖于垂直同步(VSync)信号,这确保了屏幕刷新率与应用帧率同步,通常为60Hz
  • UI线程在收到VSync信号后开始新的帧的构建过程。

渲染完成后,从而显示"Hello world"文本,这便是如何将文本显示到屏幕的大致过程。

后续章节会针对渲染过程中的各个核心知识点进行讲解,如果对你有帮助,记得关注 ! ! !

码字不易,记得 关注 + 点赞 + 收藏 + 评论