flutter底层架构初探

本文出处:​​​​​​​​​​​​​Flutter 中文开发者网站 

架构

embedder嵌入层

提供程序入口(其他原生应用也采用此方式),程序由此和底层操作系统协调(surface渲染、辅助功能和输入服务,管理事件循环队列)

嵌入层在android采用java和c++编写,苹果系采用object-c和object-C++,Windows和linux是c++

Engine引擎--核心

采用C++编写,提供了flutter应用所需的原语,核心api的底层实现

引擎将底层 C++ 代码包装成 Dart 代码,通过 dart:ui 暴露给 Flutter 框架层

补充:android和ios采用impeller渲染图形,其他平台采用skia(鸿蒙arkui也是使用的skia)

Framework框架层

开发者通过此层和flutter交互

build()方法

build方法就是将状态转换为ui的方法,widget重写该方法声明ui

此方法在框架需要时可以被调用,常规是一个渲染针一次

--得利于dart语言的可以快速实例化和清除对象

应用根据事件交互,同志框架替换旧widget为新widget

flutter拥有自己的ui控制实现,而不是由系统自带的方法进行托管

Widget

flutter对于widget的准则是,widget由更小的用途单一的widget组成

两种核心的 widget 类:有状态的 和 无状态的 widget

widget 则需要被重建以更新相关部分的 UI。这些 widget 会继承 StatefulWidget,并且「可变的」状态会保存在继承 State 的另一个子类中(因为 widget 本身是不可变的)。 StatefulWidget 自身没有 build 方法,而在其对应的 State 对象中

每当你更改 State 对象时(例如计数增加),你需要调用 setState() 来告知框架,再次调用 State 的构建方法来更新 UI

将状态和 widget 对象分离,可以使其他 widget 无差异地看待无状态和有状态 widget,而不必担心丢失状态

渲染方式

react native等跨平台框架,一般在android和ios的ui底层库上建立一层抽象,使用js等代码与android和ios系统交互构建ui界面

flutter上文提到额,使用自己的widget,绘制flutter图像的dart代码被编译为机器码,并使用skia渲染

flutter嵌入了自己的skia副本,使得开发者可以不用最新的系统也能跟进系统升级跟新自己的应用

flutter绘制代码片段时,调用build方法返回一个基于当前状态的widget树,build方法会在必要时引入其他的widget--如指定color,coloredBox会被加入用于颜色布局

构建阶段,flutter将widgets转换为对应的element树

在渲染树中,每个节点的基类都是 RenderObject,该基类为布局和绘制定义了一个抽象模型。这是再平凡不过的事情:它并不总是一个固定的大小,甚至不遵循笛卡尔坐标规律(根据该 极坐标系的示例 所示)。每一个 RenderObject 都了解其父节点的信息,但对于其子节点,除了如何 访问 和获得他们的布局约束,并没有更多的信息。这样的设计让 RenderObject 拥有高效的抽象能力,能够处理各种各样的使用场景。

在构建阶段,Flutter 会为 Element 树中的每个 RenderObjectElement 创建或更新其对应的一个从 RenderObject 继承的对象。 RenderObject 实际上是原语:渲染文字的 RenderParagraph、渲染图片的 RenderImage 以及在绘制子节点内容前应用变换的 RenderTransform 是更为上层的实现。

大部分的 Flutter widget 是由一个继承了 RenderBox 的子类的对象渲染的,它们呈现出的 RenderObject 会在二维笛卡尔空间中拥有固定的大小。 RenderBox 提供了 盒子限制模型,为每个 widget 关联了渲染的最小和最大的宽度和高度。

平台嵌入层

平台嵌入层是flutter引擎一部分,充当宿主操作系统和flutter之间的粘合剂

开发者可以创建自定义的嵌入层,如:https://github.com/ardera/flutter-pi是支持树莓派运行的例子

与其他代码集成

flutter提供通过平台通道调用自定义代码的能力,

通过创建一个常用的通道(封装通道名称和编码),开发者可以在 Dart 与使用 Kotlin 和 Swift 等语言编写的平台组件之间发送和接收消息。数据会由 Dart 类型(例如 Map)序列化为一种标准格式,然后反序列化为 Kotlin(例如 HashMap)或者 Swift(例如 Dictionary)中的等效类型。

外部函数接口

dart:ffi库提供了一套直接绑定原生代码的机制,比平台通道更快(不用序列化就可以传输数据)

flutter中渲染原生内容

flutter引入了平台widget解决在flutter应用展示原生组件的问题

目前桌面平台尚未支持平台视图,但这并不是一个架构层面的限制。未来可能将增加对桌面平台的支持

即成flutter widget至原生应用

Flutter 模块模板设计简单,易于嵌入。开发者可以将其作为源代码依赖项集成到 Gradle 或 Xcode 构建定义中,或者将其打包成 Android Archive (AAR) 或 iOS Framework 二进制供其他开发者使用,而无需安装 Flutter。

Flutter 引擎需要一段短暂的时间做初始化,用于加载 Flutter 的共享库、初始化 Dart 的运行时、创建并运行 Dart isolate 线程并将渲染层与 UI 进行绑定。为了最大限度地减少呈现 Flutter 界面时的延迟,最好是在应用初始化时或至少在第一个 Flutter 页面展示前,一并初始化 Flutter 引擎,如此一来用户不会在首个 Flutter 页面加载时感到突然地卡顿。另外,Flutter 的引擎分离使得多个 Flutter 页面可以复用引擎,共享必要库加载时的内存消耗。

flutter对于web的支持

Dart 语言存在之初就已经支持直接编译成 JavaScript,并且针对开发和生产目的对其工具链进行了优化。许多重要的应用已经使用 Dart 编译成的 JavaScript 在生产环境上运行,包括 Google Ads 的广告商工具。

然而,使用 C++ 编写的 Flutter 引擎是为了与底层操作系统进行交互的,而不是 Web 浏览器。因此我们需要另辟蹊径。Flutter 在 Web 平台上以浏览器的标准 API 重新实现了引擎。目前我们有两种在 Web 上呈现内容的选项:HTML 和 WebGL。在 HTML 模式下,Flutter 使用 HTML、CSS、Canvas 和 SVG 进行渲染。而在 WebGL 模式下,Flutter 使用了一个编译为 WebAssembly 的 Skia 版本,名为 CanvasKit。 HTML 模式提供了最佳的代码大小,CanvasKit 则提供了浏览器图形堆栈渲染的最快途径,并为原生平台的内容5提供了更高的图形保真度。

Flutter 框架本身和应用程序代码将一并编译成 JavaScript。同时Dart 在不同模式下(JIT 和 AOT、平台原生和 Web 编译)的语义几乎没有差异,大部分开发者绝对可以无差异地编写这两种模式下的代码。

在进行开发时,Web 版本的 Flutter 使用支持增量编译的编译器 dartdevc 进行编译,以支持应用热重启(尽管目前尚未支持热重载)。相反,当你准备好创建一个生产环境的 Web 应用时,Dart 深度优化的编译器 dart2js 将会用于编译,将 Flutter 核心框架和你的应用打包至缩小的源文件中,可部署在任何服务器上。代码可以在单个文件中提供,也可拆分至多个文件以 延迟加载库 提供。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/643467.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

书生·浦语大模型--第四节课笔记--XTuner大模型单卡低成本微调

文章目录 Finetune简介指令跟随微调增量预训练微调LoRA QLoRA XTuner介绍快速上手 8GB显卡玩转LLM动手实战环节 Finetune简介 增量预训练和指令跟随 通过指令微调获得instructed LLM 指令跟随微调 一问一答的方式进行 对话模板 计算损失 增量预训练微调 不需要问题只…

微签电子印章系统赋能国泰基金办公自动化升级

近期,国泰基金引入微签电子印章系统,通过印章服务器自动化印章方案,成功搭建起电子印章自动化平台,主要解决了其账单数量过多、极度耗费人力的难题,缩短了印章发送流程和时间,提升了国泰基金的整体办公效率…

Prometheus 架构全面解析

在本指南中,我们将详细介绍 Prometheus 架构。 Prometheus 是一个用 Golang 编写的开源监控和告警系统,能够收集和处理来自各种目标的指标。您还可以查询、查看、分析指标,并根据阈值收到警报。 此外,在当今世界,可观…

通过代理服务器的方式解决跨域问题

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes 觉得有帮助的同学,可以点心心支持一下哈 这里以本地访问https://heimahr.itheima.net/api/sys/permission接口为列子 Node.js 代理服务器 (server.js) 本次考虑使用JSONP或CORS代理来…

助力医疗数字化转型,贝锐x医百科技案例解析

在医疗数字化这个历史进程的大浪潮中,医药企业扮演着重要的角色,其重要程度恐怕仅次于医疗机构本身。同时,数字化转型对于医药企业的赋能作用也是十分明显的,尤其在营销端,一系列的数字化管理、数字化推广方案已经成为…

安装IIS及搭建asp.net程序遇到的问题

一、安装IIS 在服务器管理中选择IIS,右键选择添加角色和功能 在服务器角色中,应用程序开发中要选择ASP.NET3.5、ASP.NET4.6功能。 单击下一步执行安装即可。 二、常见问题 问题1. HTTP 错误404.17 - Not Found 解决方法: 出现以上问题没有…

SpringBoot使用Swagger2生成接口文档

一、导入依赖 <!-- knife4j--><dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version>2.0.7</version></dependency> 二、配置类 通过一下配置&am…

USRP相关报错解决办法

文章目录 前言一、本地环境二、相关报错信息二、解决办法1、更换电脑操作系统2、升级最新版固件 前言 在进行 USRP 开发时遇到了一些报错&#xff0c;这里做个记录解决问题的方法。 一、本地环境 电脑操作系统&#xff1a;Windows11MATLAB 版本&#xff1a;MATLAB 2021aUSRP …

rabbitmq基础-java-2、work模型

1、简介 工作队列模式&#xff08;Work Queue Mode&#xff09;&#xff1a;在这个模型中&#xff0c;生产者同样将消息发送到队列&#xff0c;但多个消费者可以从队列中获取消息并发处理。这意味着不同的消费者可以独立地处理各自的任务&#xff0c;从而提高效率。 2、消息发送…

基于springboot+vue的小徐影城管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

C语言进阶——数据结构之链表

前言 hello&#xff0c;大家好呀&#xff0c;我是Humble 在之前的两篇博客&#xff0c;我们学完了数据结构中的顺序表&#xff0c;还对它进行了一个应用&#xff0c;做了一个通讯录的小项目 那今天我们再来学习一个新的数据结构——链表 引入 我们来回忆一下顺序表 对于顺…

小程序技术实践:快速开发适配鸿蒙的App

今年&#xff0c;在中国&#xff0c;被各大媒体和开发者称为“鸿蒙元年”。 在2023年底就有业内人士透露&#xff0c;华为明年将推出不兼容安卓的鸿蒙版本&#xff0c;未来IOS、鸿蒙、安卓将成为三个各自独立的系统。 果不其然&#xff0c;执行力超强的华为&#xff0c;与202…

1、【vue篇】vue框架快速上手

注意事项&#xff1a; methods必须要加s 导入vue&#xff1a;<script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>导入Axios:<script src"https://unpkg.com/axios/dist/axios.min.js"></script> 简单Vue程序…

轻松上手:通过阿里云PAI QuickStart微调部署Qwen-72B-Chat模型

作者&#xff1a;熊兮、求伯、一耘 引言 通义千问-72B&#xff08;Qwen-72B&#xff09;是阿里云研发的通义千问大模型系列的720亿参数规模模型。Qwen-72B的预训练数据类型多样、覆盖广泛&#xff0c;包括大量网络文本、专业书籍、代码等。Qwen-72B-Chat是在Qwen-72B的基础上…

新年钜惠|泰迪智能科技免费协助企业完成3个行业AI案例建模

在新年到来之际&#xff0c;为了感谢各企业一直以来对泰迪智能科技的支持&#xff0c;日前我们推出了新年钜惠活动即&#xff1a;免费协助企业完成3个行业AI案例建模。我们希望通过这样的活动&#xff0c;可以帮助更多的企业迈出AI应用的第一步&#xff0c;同时我们也希望能够为…

如何在阿里云提交使用工单

有时候大家在使用阿里云的服务时候&#xff0c;可能会遇到一些问题&#xff0c;或许是云服务器如何升级了如何改套餐啊之类的&#xff0c;亦或者是域名ICP备案啊看进度啊等等问题&#xff0c;遇到问题怎么办不要慌。我们可以使用阿里云的工单系统&#xff0c;阿里云工单系统可以…

Linux命令大全

文章目录 目录操作与文件管理系统信息与管理软件包管理和系统维护压缩与解压缩网络与通信辅助工具与信息获取文本处理与搜索时间与日期操作网络连接与通信&#xff08;补充&#xff09;链接管理磁盘与存储管理环境变量与路径设置用户和组管理查看系统信息 当然&#xff0c;以下…

Python使用pip命令安装外部库-项目内安装外部库-全局安装外部库

一、前言 在进行Python项目开发时需要安装一些外部库来扩展项目功能&#xff0c;因此需要了解pip命令的详细使用。 二、基本语法 1.安装库 pip install 包名 2.安装特定版本 pip install 包名版本号 3.升级库 pip install --upgrade 包名 4.卸载库 pip uninstall 包名 5.查看已…

搜索与图论第七期 Prime算法

前言 prime算法也是一种图的结构 &#xff0c;哎图的结构还有好多好多&#xff0c;大家慢慢学吧&#xff01;&#xff01;&#xff01; 一、prime 算法的基本内容 过程&#xff1a; 最小生成树prim算法简单理解他的寻找路径的过程&#xff0c;从一个顶点V0开始&#xff0c;…

字节跳动 ByteHouse 云原生之路 – 计算存储分离与性能优化

01 起源 ByteHouse 的故事从字节跳动对于先进数据处理和分析的需求开始&#xff0c;这一需求随着公司业务规模的迅速扩张而日益增长&#xff0c;起源是对开源数据库管理系统 ClickHouse 的改造和增强。面对数据处理的高延迟、大规模数据操作的复杂性以及数据存储和处理成本的上…