Flutter 核心原理 - UI 框架(UI Framework)

Flutter 既能保证很高的开发效率,又能获得很好的性能。 

这两年 Flutter 技术热度持续提高,整个 Flutter 生态和社区也发生了翻天覆地的变化。目前Flutter 稳定版发布到了3.0,现在已经支持移动端、Web端和PC端,通过Flutter 开发的应用程序能够轻松的在各个平台迁移并获得很好的性能。另外,Flutter 在 Github Star 数上排名已经进入了前20,在跨端框架中已经成为稳稳的第一。

根据近几年实践统计,Flutter 相比原生开发,人效能提高近一倍,且性能可以接近原生。

Flutter 源起 


Flutter 属于在实现三个跨端框架方向之一的“自绘UI + 原生”的范畴。在上一篇中也介绍过。

Flutter 实现一套自绘UI引擎,并拥有一套自己的 UI 布局框架。

得益于但Dart开发语言的JIT 运行方式支持动态化的。因此,在开发过程中 Flutter 的热重载可帮助开发者快速地进行测试、构建UI、添加功能并更快地修复错误。在 iOS 和 Android 模拟器或真机上可以实现毫秒级热重载,并且不会丢失状态。

Flutter 从上到下分为UI框架层、引擎层和嵌入层。开发者基本上都是与UI框架层打交道。 


UI 框架

UI 框架(UI Framework)指基于一个操作系统和浏览器之上快速开发GUI(图形用户接口)的框架。通常来讲平台只提供非常基础的图形 API(Canvas),如画线、画几何图形等。

可以想象一下,如果没有UI 框架的封装而直接用 Canvas 来构建用户界面将会是怎样的一个体验和效率!

简单来讲, UI 框架解决的主要问题就是:如何基于基础的图形API(Canvas)来封装一套可以高效创建UI的框架

各个平台 UI 框架的实现原理基本是相通的,在介绍Flutter UI框架之前,可以先了解平台图形处理的基本原理。操作系统(Android&IOS)图像绘图的基本原理-CSDN博客


Flutter UI框架

Android SDK封装了Android操作系统API,提供了一个“UI描述文件 XML+Java/Kotlin 操作 DOM”的UI 框架。iOS的 UIKit 对 View 的抽象也是一样的。他们都将操作系统API抽象成一个基础对象,然后再定义一套规则来描述UI,如UI树结构,UI 操作的单线程原则等。

如果可以使用同一种编程语言开发,在不同操作系统API上封装一个对上接口一致,对下适配不同操作系统的中间层。那么我们就可以使用同一套代码编写跨平台的应用了。

而Flutter的原理正是如此:它提供了一套Dart API,然后在底层通过OpenGL这种跨平台的绘制库(内部会调用操作系统API)实现了一套代码跨多端。

由于Dart API也是调用操作系统API,所以它的性能接近原生。

*注解:

  1. 虽然Dart是先调用了OpenGL,OpenGL才会调用操作系统API,但是这仍然是原生渲染,因为OpenGL只是操作系统API的一个封装库,它并不像WebView渲染那样需要 JavaScript 运行环境和CSS渲染器,所以不会有性能损失。
  2. Flutter 早期版本底层会调用 OpenGL 这样的跨平台库,但在 iOS 设备上苹果提供了专门的图形库Metal,使用 Metal可以在iOS上获得比OpenGL更好的绘图性能,因此Flutter后来在 iOS 上会优先调用 Metal ,只有当 Metal 不可用时才会降级到OpenGL。不过 Flutter 底层到底是调用的哪个库,作为应用开发者是不需要关注的,我们只需要知道调用的是原生的绘图接口,可以保证高性能即可。

FlutterUI框架

简单概括:组合+响应式

在Flutter开发UI中,一切皆是Widget。我们要开发一个UI界面,需要组合不同Widget来实现。而当UI要发生变化时,我们不去直接修改DOM,而是通过更新状态State,让Flutter UI 框架来根据新的状态来重新构建UI。

先介绍一下BuildContext、RenderObject、Element,它们是组成Flutter UI 框架的基石。


​BuildContext

StatelessWidgetStatefulWidgetbuild方法都会传一个BuildContext对象。

Widget build(BuildContext context) {}

我们也知道,在很多时候我们都需要使用这个context 做一些事,比如:

Theme.of(context) //获取主题
Navigator.push(context, route) //入栈新路由
context.findRenderObject() //查找当前或最近的一个祖先RenderObject

那么BuildContext到底是什么呢,查看其定义,发现其是一个抽象接口类:

abstract class BuildContext {...
}

那这个context对象对应的实现类到底是谁呢?以StatelessElement为例:

class StatelessElement extends ComponentElement {...@overrideWidget build() => widget.build(this);...
}

发现build传递的参数是this。这个BuildContext的实现类就是StatelessElement

虽然StatelessElementStatefulElement并没有实现BuildContext接口,但它们继承自Element类,而Element类实现了BuildContext接口:

class Element extends DiagnosticableTree implements BuildContext {...
}

结论:BuildContext就是widget对应的Element。所以,我们可以通过contextStatelessWidgetStatefulWidgetbuild方法中访问到Element对象。


RenderObject 

RenderObject的主要职责是Layout布局和绘制。

所有的RenderObject会组成一棵渲染树“Render Tree”。

RenderObject就是渲染树中的一个对象,它可以实现事件响应以及布局、绘制、显示。

RenderObject类本身实现了一套基础的布局和绘制协议。 它本身没有定义坐标系统和具体的布局协议。为此,Flutter框架提供了一个RenderBox 的盒模型布局和基于 Sliver 的按需加载模型。布局坐标系统采用笛卡尔坐标系,屏幕的(top, left)是原点。

一个Element都对应一个RenderObject,我们可以通过Element.renderObject 来获取。


Element

我们知道UI树其实是由一个个独立的Element节点构成。Element就是Widget在UI树具体位置的一个实例化对象。

所有Element的RenderObject构成一棵树,我们称之为”Render Tree“即”渲染树“。

UI框架的三棵树:Widget树、Element树、渲染树。

Element树根据Widget树生成,而渲染树又依赖于Element树。

从创建到渲染的流程是:根据Widget生成Element,然后创建相应的RenderObject并关联到Element.renderObject属性上,最后再通过RenderObject来完成布局排列和绘制。

其实对于开发者来说只需要关注Widget树就行,Flutter框架已经将对Widget树的操作映射到了Element树上,这可以极大的降低复杂度,提高开发效率。

但是了解Element对理解整个Flutter UI框架是至关重要的,Flutter正是通过Element这个纽带将Widget和RenderObject关联起来。

了解Element层不仅会帮助读者对Flutter UI框架有个清晰的认识,而且也会提高自己的抽象能力和设计能力。

Element的生命周期
  1. Framework 调用Widget.createElement 创建一个Element实例,记为element
  2. element调用所对应Widget的createRenderObject方法创建与element相关联的RenderObject对象。然后element.attachRenderObjectrenderObject添加到渲染树。此时element就处于“active”状态,就可以显示在屏幕上了
  3. 当有父Widget的配置数据改变时,同时其State.build返回的Widget结构与之前不同,就需要重新构建对应的Element树。此时Element会先尝试复用旧树上相同位置的element。通过调用Widget.canUpdate方法判断newWidgetoldWidgetruntimeTypekey是否同时相等,如果同时相等就返回true复用旧Element。否则就创建新的Element。
  4. 当Widget树结构发生了变化,导致element对应的Widget被移除时,该祖先Element就会调用deactivateChild 方法来移除element。Framework会调用element.deactivate 方法,这时element状态变为“inactive”状态。“inactive”态的element将不会再显示到屏幕。
  5. 如果element要重新插入到Element树其他的位置,Framework会先将element从现有位置移除,然后再调用其activate(激活方法,将其renderObject重新attach到渲染树。

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

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

相关文章

sql注入重学

sql基本操作 基本查询语句 union (必须得是前面的列与后面的列相同才可以查询) 看第二局uses表中的列有3列,而emails中的列只有两列,所有无法成功查询 这就相当于我们再加了一列 group by (分组) 相当于将其分为10列…

力扣大厂热门面试算法题 24-26

24. 两两交换链表中的节点,25. K 个一组翻转链表,26. 删除有序数组中的重复项,每题做详细思路梳理,配套Python&Java双语代码, 2024.03.14 可通过leetcode所有测试用例。 目录 24. 两两交换链表中的节点 解题思路…

硬盘新建分区时选4096扇区 是4K对齐吗?

环境: 固态硬盘 问题描述: 硬盘新建分区时或者格式化选4096扇区 是4K对齐吗 解决方案: 1.选择4096扇区大小,实际上是进行了4K对齐。在传统硬盘格式化时,通常会选择以4096字节(4K)为单位的扇…

html--钢琴

代码 <!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>html钢琴</title> <script src"js/js.js"></script> <link href"…

CVE-2022-1310:RegExp[@@replace] missing write barrier lead a UAF

文章目录 环境搭建漏洞分析漏洞利用漏洞触发链RCE原语构造 总结参考 环境搭建 嗯&#xff0c;这里不知道是不是环境搭建的有问题&#xff0c;笔者最后成功的实现了任意地址读写&#xff0c;但是任意读写的存在限制&#xff0c;任意写 wasm 的 RWX 区域时会直接报错&#xff0c…

leetcode刷题日志-108/1382将有序数组转换为二叉搜索树/将二叉搜索树变平衡

由于这两道题思路极其类似&#xff0c;在此统一记录&#xff1a; 108题.将有序数组转换为平衡二叉搜索树 思路&#xff1a;给定的数组已经升序排列&#xff0c;而二叉搜索树中序遍历的结果就是升序&#xff0c;但是仅凭中序遍历不能确定一颗二叉树&#xff0c;但是题目只是说…

郭炜老师mooc第十一章数据分析和展示(numpy,pandas, matplotlib)

多维数组库numpy numpy创建数组的常用函数 # numpy数组import numpy as np #以后numpy简写为np print(np.array([1,2,3])) #>>[1 2 3] print(np.arange(1,9,2)) #>>[1 3 5 7] 不包括9 print(np.linspace(1,10,4)) #>>[ 1. 4. 7. 10.] # linespace(x,y,n)&…

【C++ 】stack 和 queue

1. 标准库中的stack stack 的介绍&#xff1a; 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行 元素的插入与提取操作 2. stack是作为容器适配器被实现的&#xff0c;容器适配器即是对特定类封装作为其…

Solidity 智能合约开发 - 基础:基础语法 基础数据类型、以及用法和示例

苏泽 大家好 这里是苏泽 一个钟爱区块链技术的后端开发者 本篇专栏 ←持续记录本人自学两年走过无数弯路的智能合约学习笔记和经验总结 如果喜欢拜托三连支持~ 本篇主要是做一个知识的整理和规划 作为一个类似文档的作用 更为简要和明了 具体的实现案例和用法 后续会陆续给出…

RUST 每日一省:rust logo收集

rust的logo集合&#xff0c;看看有没有你喜欢的&#xff0c;挑一个吧&#xff1b; GitHub - XuHugo/rust-logo: Collection of logo images for all rust languages 下边只是挑选了几个&#xff0c;更多的还是看github吧。

Apache Doris 2.1.0 版本发布:开箱盲测性能大幅优化,复杂查询性能提升 100%

亲爱的社区小伙伴们&#xff0c;我们很高兴地向大家宣布&#xff0c;在 3 月 8 日我们引来了 Apache Doris 2.1.0 版本的正式发布&#xff0c;欢迎大家下载使用。 在查询性能方面&#xff0c; 2.1 系列版本我们着重提升了开箱盲测性能&#xff0c;力争不做调优的情况下取得较好…

第四百零二回

文章目录 知识回顾示例代码经验总结 我们在上一章回中介绍了MethodChannel的使用方法&#xff0c;本章回中将介绍EventChannel的使用方法.闲话休提&#xff0c;让我们一起Talk Flutter吧。 知识回顾 我们在前面章回中介绍了通道的概念和作用&#xff0c;并且提到了通道有不同的…

Qt 线程池 QThreadPool

一.Qt 线程池 QThreadPool介绍 Qt线程池是一种管理多个线程的并发编程模型&#xff0c;通过使用线程池可以提高性能、控制并发度、提供任务队列和简化线程管理。 在Qt中&#xff0c;线程池的使用主要涉及以下几个步骤&#xff1a; 创建任务类&#xff1a;需要定义一个任务类&am…

javaweb数据传参类型(2)

前言 友友们好呀&#xff0c;今天来分享一下对于各种数据类型传参的问题&#xff0c;今天陪伴我们的云海 目录 前言 数组集合传参 补充 日期参数 补充 Json格式数据传参 补充 路径参数 补充 今日分享 ​​​​​​​数组集合传参 类似于我们之前进行的简单的参数传递…

【C++】string的底层剖析以及模拟实现

一、字符串类的认识 C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c; 但是这些库函数与字符串是分离开的&#xff0c;不太符合OOP的思想&#xff0c;而且底层空间需要用户自己管理&a…

Android14之禁止vbmeta.img签名校验(一百九十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

区别于传统家!三翼鸟定制智慧家电家居一体化场景

在这个科技创新、智能AI主导的时代&#xff0c;寻求更便捷智慧、舒心适宜、一体化的居家场景&#xff0c;成为一个时代的命题和竞赛&#xff0c;也是家居行业共同奔赴的使命。在纷繁复杂的竞争格局和方向答案中&#xff0c;一条清晰坚定的路径正在显露出来…… AWE前一天&…

Jsp在Javaweb中扮演什么角色?

1.什么是Jsp JSP&#xff08;Java Server Pages&#xff0c;Java 服务器页面&#xff09;是一种动态网页技术&#xff0c;它允许在 HTML 页面中嵌入 Java 代码&#xff0c;并由 Web 服务器在请求页面时动态生成 HTML 页面。JSP 通常用于创建动态 Web 内容&#xff0c;如交互式表…

影城管理系统|基于springboot框架+ Mysql+Java+B/S架构的影城管理系统设计与实现(可运行源码+数据库+设计文档+部署说明)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 管理员功能登录前台功能效果图 系统功能设计 数据库E-R图设计 lunwen参考 摘要 研究…

智慧文旅|AI数字人导览:让旅游体验不再局限于传统

AI数字人导览作为一种创新的展示方式&#xff0c;已经逐渐成为了VR全景领域的一大亮点&#xff0c;不仅可以很好的嵌入在VR全景中&#xff0c;更是能够随时随地为观众提供一种声情并茂的讲解介绍&#xff0c;结合VR场景的沉浸式体验&#xff0c;让观众仿佛置身于真实场景之中&a…