Flutter UI架构(3)

Flutter UI架构

简述

Flutter使用dart语言来构建维护UI数据,然后通过Impeller渲染引擎来进行UI渲染,在学习源码之前,我们先来了解一下Flutter的UI框架的大体架构,这样后面再学习源码可以事半功倍。
使用Flutter开发,主要接触的都是Widget,在业务层实现UI时会构建一个Widget树,然后会根据Widget树构建一套Element,最终Element还会构造RenderObject,Widget树和Element树是一对一的,而Element和RenderObject却不是一对一的,因为有一些组件只是用作结构控制,并没有渲染能力。
RenderObject还会持有layer,最终会构成一个LayerTree,然后Flutter engine会将LayerTree的信息使用渲染引擎渲染合成。

这里涉及的代码逻辑分两个仓库,flutter和engine,其中flutter仓库包含框架,而engine仓库包含渲染引擎,这两个的关系有点类似app和SurfaceFlinger。
其中engine的功能类似于SurfaceFlinger,会进行layer合成,而flutter则负责管理上层UI树结构,描述app UI怎么构建。

概念

Widget

Widget是用于描述UI配置信息的,例如布局,样式,交互之类的,Widget有几种类型

  • StatefulWidget
  • StatelessWidget
  • RenderObjectWidget
    • LeafRenderObjectWidget
    • SingleChildRenderObjectWidget
    • MultiChildRenderObjectWidget
  • ProxyWidget

这里StatefulWidget和StatelessWidget分别为有状态组件和无状态组件,但是他们都没有RenderObject,也就是说没有渲染能力,他们的作用是组合,往往里面都会包含RenderObjectWidget。
而RenderObjectWidget是拥有渲染能力的组件。
ProxyWidget则用于承接父节点和子节点,一般用来共享数据。

Element

Element也有非常多的子类,每种Widget都会构造自己的Element,比如StatefulWidget会构建StatefulElement,StatefulElement是用于记录Widget运行时候的信息,管理Widget生命周期。

RenderObject

RenderObject用于负责渲染逻辑,计算尺寸,布局,绘制。
带有渲染能力的Element都会关联一个RenderObject,而RenderObject有performResize,performLayout,paint等抽象方法,类似于Android的onMeasure,onLayout,onDraw。

其中paint会有一个参数PaintingContext,PaintingContext上下文包含了操作layer的接口能力,其中有的layer可以构建Canvas,后续就可以使用Canvas接口调用渲染引擎渲染绘制

Layer

上面提到过RenderObject在paint的时候会有一个PaintingContext,PaintingContext里面的接口可以构建各种layer,其中PictureLayer可以使用canvas进行渲染,在dart层的Layer会在C++层有一套映射,最终合成时会使用C++层的映射的LayerTree,layer的概念也类似于图层,将组件渲染分图层,这样可以更好的复用,没有改动的图层的就可以完全复用。

小结

本节主要介绍了一下Flutter UI架构核心概念,了解这些概念之后学习Flutter UI框架的代码会比较容易看懂,下一节我们会来看代码学习Flutter UI框架。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

全面解析:云计算技术及其应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 全面解析:云计算技术及其应用 全面解析:云计算技术及其应用 全面解析:云计算技术及其应用 云…

规范:项目、目录、文件、样式、事件、变量、方法、url参数、注释、git提交 命名规范及考证

一、规范命名的重要性 易懂、通用、规范、标准、专业性、是经验积累的体现 1.1、常见命名方法 序号命名方法解释1全小写2全大写3驼峰:小驼峰命名法4驼峰:大驼峰命名法5烤串命名法 / 脊柱命名法6下划线分隔法 二、项目名 采用小写字母和中划线&#…

03-Dubbo的负载均衡及高性能RPC调用

03-Dubbo的负载均衡及高性能RPC调用 Dubbo 的负载均衡策略 负载均衡策略就是当某个服务压力比较大的时候,这时候部署多个节点同时提供相同的服务 当服务消费者来消费的时候,可以从这多个节点中选择一个节点进行消费,这个选择的过程&#xff0…

【LVGL-列表部件 lv_list_create】

LVGL-列表部件 lv_list_create ■ LVGL-列表部件-函数■ 修改样式-■ 修改样式- 背景色■ 修改样式- 改变项的颜色-label■ 修改样式- 改变项的颜色-btn ■ 事件(Event)■ 示例0:综合■ 示例1(自动出现滚动)■ 示例2(滚动捕捉&…

【React】初学React

A. react中如何创建元素呢? 说明一点: 属性都改为驼峰形式(无障碍属性aria-*除外), class改成className 创建元素 B. 变量或表达式如何表示呢?大括号{ }包起来 变量值用大括号包裹 C. 元素和组件的区别 元素…

设备搜索相关协议使用

一、实现原理 首先,Client -> Gateway : 发送 UDP 广播包(含厂商自定义协议)这一步表示客户端开始向网络中发送一个包含厂商自定义协议的 UDP 广播包,目的是寻找本厂商的设备(网关)。客户端此时处于活动状态activa…

TMDOG的Gin学习笔记_01——初识Gin框架

TMDOG的Gin学习笔记_01——初识Gin框架 博客地址:[TMDOG的博客](https://blog.tmdog114514.icu) 作者自述: 停更太久了,是因为开学了课太多了,并且我一直在准备上篇文章的内容正在coding,就先搁置了更新博客QAQ&…

H7-TOOL的CAN/CANFD助手增加帧发送成功标识支持, 继续加强完善功能细节

2.27版本固件正式携带此功能,包括之前做的负载率检测和错误信息展示也将集成到这个版本固件中。 对于接收,我们可以直接看到效果,而发送不行,所以打算在发送的地方展示下发送成功标识。CAN发送不像串口,需要等待应答后…

Pr 视频效果:超级键

视频效果/键控/超级键 Keying/Ultra Key 超级键 Ultra Key效果是 Premiere Pro 中功能强大的抠像工具,主要用于绿幕/蓝幕抠像。通过选择要抠除的颜色(通常是绿幕或蓝幕的颜色),即可以将该颜色的像素设为透明,实现主体与…

善用Git LFS来降低模型文件对磁盘的占用

将讲一个实际的例子:对于模型文件,动辄就是好几个G,而有的仓库更是高达几十G,拉一个仓库到本地,稍不注意直接磁盘拉满都有可能。 比如:meta-llama-3.1-8b-instruct,拉到本地后发现居然占用了60G…

「树链剖分」学习笔记

一、引入 “在一棵树上进行路径的修改、求极值、求和”乍一看只要线段树就能轻松解决,实际上,仅凭线段树是不能搞定它的。我们需要用到一种貌似高级的复杂算法——「树链剖分」。 树链剖分(简称树剖),顾名思义&#xf…

Golang--数组、切片、映射

1、数组 1.1 数组类型 var 数组名 [数组大小]数据类型 package main import "fmt"func main(){//1、定义一个数组var arr1 [5]intarr1[0] 100arr1[1] 200fmt.Println(arr1) //[100 200 0 0 0] } 1.2 数组的初始化方式 package main import "fmt" func …

结构体对齐,位段

大家好,今天来给大家分享一些结构体的知识,结构体是我们学习数据结构的基础,只有把它了解清楚才能让我们学习数据结构是得心应手,现在让我们来看看它的一些内容吧。 1.结构体的定义和调用我们就跳过吧 大家如果还不熟悉的话可以去…

ElementUI中el-table双击单元格显示输入框

效果图 实现 <el-table:data"formData.products"row-key"id":show-header"true"style"width: 100%; margin-top: 16px"class"zq-table-theme-info"bordercell-dblclick"handleDbClick"> <el-table-col…

Python OpenCV 图像改变

更改图像数据 通过 改像素点 或者 切片的区域 import cv2 import numpy as np img cv2.imread("image.jpg") print(img[3,5]) # 显示某位置(行3列5)的像素值( 如 [53 34 29] 它是有三通道 B G R 组成) img[3,5] (0,0,255) # 更改该位置的像素…

学习虚幻C++开发日志——定时器

官方文档&#xff1a;虚幻引擎中的Gameplay定时器 | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 定时器 安排在经过一定延迟或一段时间结束后要执行的操作。例如&#xff0c;您可能希望玩家在获取某个能力提升道具后变得无懈可击&#xff0c;…

网络安全设备Bypass功能介绍及分析

网络安全平台厂商往往需要用到一项比较特殊的技术&#xff0c;那就是Bypass&#xff0c;那么到底什么是Bypass呢&#xff0c;Bypass设备又是如何来实现的&#xff1f;下面我就对Bypass技术做一下简单的介绍和说明。 一、 什么是Bypass。 大家知道&#xff0c;网络安全设备一般…

如何更改Android studio的项目存储路径

如果你希望永久更改Android Studio的默认项目保存路径&#xff0c;可以通过以下步骤进行设置&#xff1a; 打开Android Studio&#xff0c;选择“File”菜单下的“Settings”&#xff08;Windows&#xff09;或“Preferences”&#xff08;Mac&#xff09;。在设置窗口中&…

ESP8266 自定义固件烧录-mqtt透传固件

esp8266 mqtt固件配网及使用说明_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV196421G7Xc/?spm_id_from333.999.0.0一、固件介绍 固件为自定义开发的一个适配物联网项目的开源固件&#xff0c;支持网页配网、支持网页mqtt服务器配置、支持主题设置。 方便、快捷、稳…

二十三、Mysql8.0高可用集群架构实战

文章目录 一、MySQL InnoDB Cluster1、基本概述2、集群架构3、搭建一主两从InnoDB集群3.1、 安装3个数据库实例3.2、安装mysqlrouter和安装mysqlshell3.2.1、安装mysql-router3.2.2、安装mysql-shell 3.3、InnoDB Cluster 初始化3.1 参数及权限配置预需求检测3.2 初始化InnoDB …