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端、桌面端的开发方式,实现一次编写,到处运行!

目录
相关文章
|
1天前
|
SQL Java 数据库连接
Mybatis架构原理和机制,图文详解版,超详细!
MyBatis 是 Java 生态中非常著名的一款 ORM 框架,在一线互联网大厂中应用广泛,Mybatis已经成为了一个必会框架。本文详细解析了MyBatis的架构原理与机制,帮助读者全面提升对MyBatis的理解和应用能力。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
Mybatis架构原理和机制,图文详解版,超详细!
|
15天前
|
消息中间件 编解码 开发者
深入解析 Flutter兼容鸿蒙next全体生态的横竖屏适配与多屏协作兼容架构
本文深入探讨了 Flutter 在屏幕适配、横竖屏切换及多屏协作方面的兼容架构。介绍了 Flutter 的响应式布局、逻辑像素、方向感知、LayoutBuilder 等工具,以及如何通过 StreamBuilder 和 Provider 实现多屏数据同步。结合实际应用场景,如移动办公和教育应用,展示了 Flutter 的强大功能和灵活性。
86 6
|
15天前
|
开发者 容器
Flutter&鸿蒙next 布局架构原理详解
本文详细介绍了 Flutter 中的主要布局方式,包括 Row、Column、Stack、Container、ListView 和 GridView 等布局组件的架构原理及使用场景。通过了解这些布局 Widget 的基本概念、关键属性和布局原理,开发者可以更高效地构建复杂的用户界面。此外,文章还提供了布局优化技巧,帮助提升应用性能。
78 4
|
15天前
|
Dart UED 开发者
flutter鸿蒙版本通过底部导航栏的实现熟悉架构及语法
这篇博客详细解析了一个 Flutter 应用的完整代码,实现了带有底部导航栏的功能,允许用户在不同页面之间切换。通过逐行讲解,帮助读者理解 Flutter 的结构、状态管理和组件交互。代码涵盖了从引入包、创建主入口、定义无状态和有状态组件,到构建用户界面的全过程。希望对 Flutter 开发者有所帮助。
144 3
|
15天前
|
存储 Dart 前端开发
flutter鸿蒙版本mvvm架构思想原理
在Flutter中实现MVVM架构,旨在将UI与业务逻辑分离,提升代码可维护性和可读性。本文介绍了MVVM的整体架构,包括Model、View和ViewModel的职责,以及各文件的详细实现。通过`main.dart`、`CounterViewModel.dart`、`MyHomePage.dart`和`Model.dart`的具体代码,展示了如何使用Provider进行状态管理,实现数据绑定和响应式设计。MVVM架构的分离关注点、数据绑定和可维护性特点,使得开发更加高效和整洁。
145 3
|
21天前
动画控制器在 Flutter 中的工作原理
【10月更文挑战第18天】总的来说,动画控制器 `AnimationController` 在 Flutter 中起着关键的作用,它通过控制动画的数值、速度、节奏和状态,实现了丰富多彩的动画效果。理解它的工作原理对于我们在 Flutter 中创建各种精彩的动画是非常重要的。
|
27天前
|
容器
Flutter&鸿蒙next 布局架构原理详解
Flutter&鸿蒙next 布局架构原理详解
|
3天前
|
缓存 负载均衡 JavaScript
探索微服务架构下的API网关模式
【10月更文挑战第37天】在微服务架构的海洋中,API网关犹如一座灯塔,指引着服务的航向。它不仅是客户端请求的集散地,更是后端微服务的守门人。本文将深入探讨API网关的设计哲学、核心功能以及它在微服务生态中扮演的角色,同时通过实际代码示例,揭示如何实现一个高效、可靠的API网关。
|
2天前
|
Dubbo Java 应用服务中间件
服务架构的演进:从单体到微服务的探索之旅
随着企业业务的不断拓展和复杂度的提升,对软件系统架构的要求也日益严苛。传统的架构模式在应对现代业务场景时逐渐暴露出诸多局限性,于是服务架构开启了持续演变之路。从单体架构的简易便捷,到分布式架构的模块化解耦,再到微服务架构的精细化管理,企业对技术的选择变得至关重要,尤其是 Spring Cloud 和 Dubbo 等微服务技术的对比和应用,直接影响着项目的成败。 本篇文章会从服务架构的演进开始分析,探索从单体项目到微服务项目的演变过程。然后也会对目前常见的微服务技术进行对比,找到目前市面上所常用的技术给大家进行讲解。
11 1
服务架构的演进:从单体到微服务的探索之旅
|
1天前
|
Cloud Native 安全 API
云原生架构下的微服务治理策略与实践####
—透过云原生的棱镜,探索微服务架构下的挑战与应对之道 本文旨在探讨云原生环境下,微服务架构所面临的关键挑战及有效的治理策略。随着云计算技术的深入发展,越来越多的企业选择采用云原生架构来构建和部署其应用程序,以期获得更高的灵活性、可扩展性和效率。然而,微服务架构的复杂性也带来了服务发现、负载均衡、故障恢复等一系列治理难题。本文将深入分析这些问题,并提出一套基于云原生技术栈的微服务治理框架,包括服务网格的应用、API网关的集成、以及动态配置管理等关键方面,旨在为企业实现高效、稳定的微服务架构提供参考路径。 ####
13 5