flutter 架构、渲染原理、家族

简介: flutter 架构、渲染原理、家族

Flutter 架构

引擎层

  • Skia 是独立的渲染引擎库,不依赖原生引擎库
  • Dart 虚拟机包含了Dart中编译方式、垃圾回收等机制的实现
  • Text 负责Flutter中文字的渲染

框架层

Foundation层是框架层的最底层,主要定义了框架层的各类基础API,提供了上一层会使用到的工具类和方法接口等。

Animation层包含了Flutter中实现动画的相关类。Painting层中封装了Flutter引擎层提供的绘图接口,包括绘制图像、文本、阴影的功能以及自定画布等,Gestures层提供了与手势识别相关的类,包括触摸、缩放以及拖曳等。

而渲染层则依赖下面的Painting、Animation等层,通过调用下一层的接口可以为UI设计具体的布局,完成绘画和合成等操作。这一层也是Flutter能够将代码中的组件渲染在屏幕中的核心层。

组件层中提供了非常丰富的组件供我们在开发中使用,包括了基本的Text、Image、Container、TextField等组件。我们通过在代码中组合、嵌套该层中提供的不同类型的各个组件可以构建出任意功能和任意复杂度的界面。这里的组件最终也会生成一个个渲染对象,在渲染层中做具体的渲染工作,Flutter在该层的基础上也提供了Material和Cupertino两种分别对应Android与iOS视觉风格的组件库。。

Flutter 渲染原理

html 有DOM树,类似的,Flutter 有组件树,以默认的计数器应用为例:

但组件的渲染并不由组件层完成,而渲染层完成,整个渲染过程如下图:


  1. 开发者用dart语言编写【组件树】(组件的配置和属性信息)
  2. Flutter框架根据组件树里组件的配置和属性信息生成【元素树】(在调用 build()方法时,Flutter会根据配置信息生成一个个与组件对应的元素实例,这些元素实例与组件一一对应,是展示在屏幕上的真正的UI组件,这便创建了元素树。)
  3. 最后交由RenderObject完成页面中组件的绘制和布局,形成对应的RenderObject树(也称为渲染树)

类似于公司的总经理,组件的任务就是把近期的战略部署(即配置信息)写在纸上并下发给经理人——元素,元素看到详细的配置信息就开始干活。我们还需要注意一点,总经理随时会改变战略部署,而由于组件的不可变性,它并不会在原有的纸上修改,而只能拿一张新的白纸并重新写下配置信息。这时,经理人——元素为了减少工作量需要将新的计划与旧的计划仔细比较,再采取相应的更新措施。这就是Flutter框架层在此基础上做的一部分优化操作。问题又来了,元素作为经理人很体面。当然,元素不会把活全干完,于是又找了一个叫作RenderObject的员工来帮它做粗重的工作。

由用户触发重新渲染UI的操作。用户可能会单击页面中的某个按钮,触发页面更新,接下来就会执行过渡动画,在动画执行期间,Flutter将会一直更新,直到渲染完成。构建组件的过程就是Flutter构建【组件树】【元素树】【渲染树】的过程。构建完成之后,Flutter就会通过RenderObject树上的RenderObject节点执行真正的渲染工作。


RenderObject依赖在代码中配置的组件,它会根据已经设置的属性完成接下来的布局(layout)、绘制(paint)以及合成(composite)操作。

  • 布局操作会使用布局约束等原理计算各部分组件的实际大小
  • 绘制过程就是根据配置的视图数据将组件的内容绘制在屏幕当中
  • 合成就是将各部分的视图层合并在一起

Flutter 家族

Dart

Dart运行在Dart 虚拟机(Virtual Machine,VM)上,但也可以编译为直接在硬件上运行的ARM代码。

Dart同时支持预(Ahead Of Time,AOT)编译和运行时(Just-In-Time,JIT)编译两种编译方式,可以同时提高开发和执行应用程序的效率。

Dart可以使用隔离(isolate)实现多线程。如果没有共享内存,则可以实现快速无锁分配。

Dart虚拟机采用了分代垃圾回收方案,适用于UI框架中产生大量的组件对象的创建和销毁。

当为创建的对象分配内存时,Dart使用指针在现有的堆上移动,可以确保内存的线性增长,从而节省了查找可用内存的时间。

Dart还有其他各种优势。例如,当使用Dart编写应用程序时,不在需要将布局代码与逻辑代码分离而又引入xml、JSX这类模板和布局文件。

提示:


Dart语言同时支持AOT和JIT两种编译方式,而目前主流的语言大多只支持其中一种编译方式,如C仅支持AOT编译方式,JavaScript仅支持JIT编译方式。



一般来说,静态语言会使用AOT编译方式。在AOT编译方式下,编译器必须在执行代码前直接将代码编译成机器的原生代码,这样在程序运行时就不需要做其他额外的操作而能够直接快速地执行,它带来的不便就是编译时需要区分用户机器的架构,生成不同架构的二进制代码。而JIT编译方式通常适用于动态语言。在JIT编译方式下,程序运行前不需要编译代码而在运行时动态编译,不用考虑用户的机器是什么架构,为应用的用户提供丰富而动态的内容。虽然JIT编译方式缩短了开发周期,但是可能导致程序执行速度更慢。



Dart语言同时使用了以上两种编译方式,这一点为它能应用在Flutter中提供了显著的优势。在调试模式下,Dart使用JIT编译方式 ,编译器速度特别快,这使Flutter开发中支持热加载的功能。在发布模式下,Dart使用AOT编译方式,这样就能够大大提高应用运行速度。因此,借助先进的工具和编译器,Dart具有更多的优势——极快的开发周期和执行速度以及极短的启动时间。

MaterialDesign

MaterialDesign是谷歌推出的一套视觉设计语言。

Flutter引入MaterialDesign降低了开发者美化用户界面的工作量,使应用风格趋于统一。

Fuchsia

Fuchsia 是谷歌推出的可能取代Android的下一代移动操作系统。

Flutter 可能将作为Fuchsia的原生开发方式。

Flutter Web

Flutter Web 让 Flutter 已经可以同时作为移动端、Web端、桌面端的开发方式,实现一次编写,到处运行!

目录
打赏
0
0
3
1
64
分享
相关文章
Anolis OS 23 架构支持家族新成员:Anolis OS 23.3 版本及 RISC-V 预览版发布
Anolis OS 23.3在保障基础功能持续演进、完善安全漏洞的修复的同时,实现了对 RISC-V 的初步支持。
为什么混合专家模型(MoE)如此高效:从架构原理到技术实现全解析
本文深入探讨了混合专家(MoE)架构在大型语言模型中的应用与技术原理。MoE通过稀疏激活机制,在保持模型高效性的同时实现参数规模的大幅扩展,已成为LLM发展的关键趋势。文章分析了MoE的核心组件,包括专家网络与路由机制,并对比了密集与稀疏MoE的特点。同时,详细介绍了Mixtral、Grok、DBRX和DeepSeek等代表性模型的技术特点及创新。MoE不仅解决了传统模型扩展成本高昂的问题,还展现出专业化与适应性强的优势,未来有望推动AI工具更广泛的应用。
513 4
为什么混合专家模型(MoE)如此高效:从架构原理到技术实现全解析
图神经网络在信息检索重排序中的应用:原理、架构与Python代码解析
本文探讨了基于图的重排序方法在信息检索领域的应用与前景。传统两阶段检索架构中,初始检索速度快但结果可能含噪声,重排序阶段通过强大语言模型提升精度,但仍面临复杂需求挑战
95 0
图神经网络在信息检索重排序中的应用:原理、架构与Python代码解析
Spring框架 - 深度揭秘Spring框架的基础架构与工作原理
所以,当你进入这个Spring的世界,看似一片混乱,但细看之下,你会发现这里有个牢固的结构支撑,一切皆有可能。不论你要建设的是一座宏大的城堡,还是个小巧的花园,只要你的工具箱里有Spring,你就能轻松搞定。
119 9
基于LlamaIndex实现CodeAct Agent:代码执行工作流的技术架构与原理
CodeAct是一种先进的AI辅助系统范式,深度融合自然语言处理与代码执行能力。通过自定义代码执行代理,开发者可精准控制代码生成、执行及管理流程。本文基于LlamaIndex框架构建CodeAct Agent,解析其技术架构,包括代码执行环境、工作流定义系统、提示工程机制和状态管理系统。同时探讨安全性考量及应用场景,如软件开发、数据科学和教育领域。未来发展方向涵盖更精细的代码生成、多语言支持及更强的安全隔离机制,推动AI辅助编程边界拓展。
142 3
基于LlamaIndex实现CodeAct Agent:代码执行工作流的技术架构与原理
RocketMQ原理—5.高可用+高并发+高性能架构
本文主要从高可用架构、高并发架构、高性能架构三个方面来介绍RocketMQ的原理。
497 21
RocketMQ原理—5.高可用+高并发+高性能架构
深入解析Tiktokenizer:大语言模型中核心分词技术的原理与架构
Tiktokenizer 是一款现代分词工具,旨在高效、智能地将文本转换为机器可处理的离散单元(token)。它不仅超越了传统的空格分割和正则表达式匹配方法,还结合了上下文感知能力,适应复杂语言结构。Tiktokenizer 的核心特性包括自适应 token 分割、高效编码能力和出色的可扩展性,使其适用于从聊天机器人到大规模文本分析等多种应用场景。通过模块化设计,Tiktokenizer 确保了代码的可重用性和维护性,并在分词精度、处理效率和灵活性方面表现出色。此外,它支持多语言处理、表情符号识别和领域特定文本处理,能够应对各种复杂的文本输入需求。
546 6
深入解析Tiktokenizer:大语言模型中核心分词技术的原理与架构
Git进阶笔记系列(01)Git核心架构原理 | 常用命令实战集合
通过本文,读者可以深入了解Git的核心概念和实际操作技巧,提升版本管理能力。
一文彻底讲透GPT架构及推理原理
本篇是作者从开发人员的视角,围绕着大模型正向推理过程,对大模型的原理的系统性总结,希望对初学者有所帮助。
Druid 架构原理及核心特性详解
Druid 是一个分布式、支持实时多维OLAP分析的列式存储数据处理系统,适用于高速实时数据读取和灵活的多维数据分析。它通过Segment、Datasource等元数据概念管理数据,并依赖Zookeeper、Hadoop和Kafka等组件实现高可用性和扩展性。Druid采用列式存储、并行计算和预计算等技术优化查询性能,支持离线和实时数据分析。尽管其存储成本较高且查询语言功能有限,但在大数据实时分析领域表现出色。
1353 19
AI助理
登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问

你好,我是AI助理

可以解答问题、推荐解决方案等