Skip to content

概述

Flutter架构分为三层：

  • Framework：使用Dart编写的UI应用框架，依赖engine层的Dart封装。
  • Engine：大部分是用 C++ 编写的，它提供了 Flutter 核心 API 的底层实现，包括图形（通过Skia）、文本布局、文件和网络 I/O、可访问性支持、插件架构以及 Dart 运行时和编译工具链。
  • Embeder: 嵌入层主要是提供各平台接入Flutter所提供的平台相关代码，采用平台主流语言编写，包括插件、渲染表面、线程配置等。

Dart vs Javascript

它们都是单线程语言。且受Node.js启发。Dart:io也依赖异步回调、事件驱动。

Dart is a single-threaded programming language. If an operation blocks the Dart thread, the application makes no progress before that operation completes. For scalability it is therefore crucial that no I/O operations block. Instead of blocking on I/O operations, dart:io uses an asynchronous programming model inspired by node.js, EventMachine, and Twisted.

Flutter vs Compose

两者的编写比较相似，Compose则是借鉴于Flutter，借助于Kotlin DSL。它在编写安卓UI应用的时候比Flutter显然更高效，更小的包体积，但总的来说，Compose相对小众。

Widget tree, Element tree, Render tree.

每个Widget在构建时可能还会引入其他Widget，每个Widget都会对应一个Element节点，Element有两类基本节点：

  • ComponentElement, 其他元素的宿主。
  • RenderObjectElement，参与布局或绘制阶段的元素。

widget是不可变的，包括节点之间的父/子关系，所以对widget tree的任何更改都会导致返回一组新的小部件对象。但这并不意味着必须重建底层表示。Elements tree在帧与帧之间是持久的，因此起着关键的性能作用，允许 Flutter 在缓存其底层表示的同时，就好像小部件层次结构是完全一次性的一样。通过仅遍历更改的小部件，Flutter 可以仅重建元素树中需要重新配置的部分。

渲染树中每个节点的基类是 RenderObject，它的子类们负责具体的测量和绘制。树的根是RenderView。它表示渲染树的总输出。当平台要求渲染新帧时（例如，由于 vsync或由于纹理解压缩/上传完成），将调用该 compositeFrame()方法，该方法是RenderView渲染树根部对象的一部分. 这将创建一个SceneBuilder来触发场景的更新。场景完成后，RenderView对象将合成的场景传递给 中的Window.render()方法dart:ui，该方法将控制权传递给 GPU 进行渲染。