flutter知识点---三棵树

news/2024/5/19 18:31:41/ 标签: flutter

在Flutter开发领域中,提到“三棵树”这个概念,通常是指构成Flutter UI构建体系的三个核心组件树:Widget树、Element树和RenderObject树。这三棵树相互关联、协同工作,共同构成了Flutter灵活、高效、高性能的UI渲染机制。下面分别对这三个树进行简要介绍:

  1. Widget树

    • **Widget(小部件)**是Flutter中最基础的构建单元,用于描述UI的配置信息,如布局、样式、交互逻辑等。它们是不可变的、无状态的,仅包含描述界面应该如何显示的数据。当Widget的配置数据发生变化时,Flutter会创建一个新的Widget对象来替换旧的。

    • Widget树是由多个Widget通过嵌套关系形成的层次结构,顶层通常是MaterialAppCupertinoApp等应用程序Widget。每当一个Widget的状态改变或者其父Widget重新构建时,都会触发整个子树的重建过程。尽管看起来每次重建整个子树可能效率低下,但实际上Flutter通过高效的Diff算法只对有变化的部分进行实际的更新操作。

  2. Element树

    • Element是Widget在运行时的实例化表现,每个Widget都有对应的Element对象。Element负责管理Widget的生命周期、处理Widget的事件以及与RenderObject通信。相比于Widget,Element是可变的,并且可以保持一定的状态。

    • Element树与Widget树一一对应,当Widget树发生变动时,Flutter框架会根据新的Widget树创建或更新相应的Element树。Element树主要承担了将Widget的配置信息转化为具体渲染指令的任务。

  3. RenderObject树

    • RenderObject是Flutter中负责实际渲染工作的部分,它包含了尺寸计算、布局和绘制等与视觉呈现直接相关的逻辑。RenderObject具有明确的几何属性(如大小、位置等)和绘图指令,是Flutter实现高性能图形渲染的基础。

    • RenderObject树是由RenderObject节点组成的,每个Element都关联一个RenderObject。RenderObject树是扁平化的,没有Widget树和Element树那样的嵌套结构,这是因为布局过程中需要高效的遍历和计算。RenderObject树中的节点根据需要进行布局和绘制,当Element树发生变化时,RenderObject树会相应地调整布局并触发重绘。

总结来说,Flutter中的“三棵树”分工明确、各司其职:Widget树负责描述UI配置,Element树负责管理和连接Widget与RenderObject,RenderObject树则专注于实际的渲染工作。这种设计使得Flutter能够在保证高性能渲染的同时,提供声明式、响应式的UI开发体验。


http://www.ppmy.cn/news/1424581.html

相关文章

C#值传递和引用传递,ref和out关键字,装箱和拆箱

C#值传递和引用传递 1.值传递和引用传递 值传递:值传递时,系统首先为被调用方法的形参分配内存空间,并将实参的值按位置一一对应复制给形参,被调用方法中形参得任何改变都不会影响到相应的实参。 引用传递时:系统不是…

机器视觉各类光源特点

1. 环形光源 提供不同照射角度和颜色组合突出物体的三维信息高密度LED阵列,高亮度多种紧凑设计,节省安装空间解决对角照射阴影问题可选配漫射板导光,光线均匀扩散 2. 背光源系列 高密度LED阵列面提供高强度背光照明突出物体的外形轮廓特征…

# 从浅入深 学习 SpringCloud 微服务架构(三)注册中心 Eureka(1)

从浅入深 学习 SpringCloud 微服务架构(三)注册中心 Eureka(1) 段子手168 1、微服务的注册中心 注册中心可以说是微服务架构中的”通讯录”,它记录了服务和服务地址的映射关系。 在分布式架构中服务会注册到这里&am…

修改taro-ui-vue3的tabs组件源码增加数字标签

需求:taro-ui-vue3的tabs组件上增加数字标记 步骤一:node_modules文件夹下找到taro-ui-vue3/lib/tabs/index.js 把173行的这一段替换成下面这段,然后写上样式 default: () > item.number ? [h(View, {class: at-tabs__item_in}, {defau…

如何在浏览器Web前端在线编辑PPT幻灯片?

有时候在项目中我们会遇到需要在网页在线打开并编辑PPT文档保存到本地或者服务器指定位置,猿大师办公助手可以很方便的调用本机Office实现在网页上编辑PPT幻灯片,效果与本机Office打开PPT完全一样。 猿大师办公助手支持完整嵌入模式,也就是本…

新型物联网创新实践教学体系建设

新型物联网创新实践教学体系建设 一、设计背景 随着物联网技术的快速发展,物联网已成为当今科技创新的重要领域。为了培养能够紧跟物联网技术发展趋势的高素质人才,高校物联网专业教学急需构建一套创新实践教学体系。本毕业设计旨在探索和设计一套新型…

K8s中的控制器和资源对象是什么关系呢?

K8s中的控制器和资源对象是什么关系呢? Kubernetes(简称k8s)是一个开源的容器编排平台,用于自动化部署、扩展和管理容器化应用程序。在Kubernetes中,控制器和资源对象是两个核心概念,它们共同构成了Kubern…

ChatGPT畅想:论文写作新境界

ChatGPT无限次数:点击直达 html ChatGPT畅想:论文写作新境界 作为一名拥有10年经验的CSDN网站原创文章优质创作者,我深知论文写作在科研领域的重要性。随着人工智能技术的发展,ChatGPT作为一款强大的语言模型,正在为论文写作带…

负载均衡的原理及算法

负载均衡(Load Balancing)是指在计算机网络中将工作负载(如请求、数据流量等)分配给多个计算资源(如服务器、网络连接等),以实现资源利用的均衡和性能优化。其原理和算法如下: 原理…

在Rust中使用ini配置文件

一、概述 INI文件是一种无固定标准格式的配置文件。它以简单的文字与简单的结构组成,常常使用在Windows操作系统上,许多程序也会采用INI文件作为配置文件使用。Windows操作系统后来以注册表的形式取代INI档。但是INI还是流传到现在。 rust-ini是一个在R…

一个文生视频MoneyPrinterTurbo项目解析

最近抖音剪映发布了图文生成视频功能,同时百家号也有这个功能,这个可以看做是一个开源的实现,一起看看它的原理吧~ 一句话提示词 大模型生成文案 百家号生成视频效果 MoneyPrinterTurbo生成视频效果 天空为什么是蓝色的? 天空…

CommunityToolkit.Mvvm笔记---AsyncRelayCommand

AsyncRelayCommand 是 CommunityToolkit.Mvvm 中的一个功能,专门设计用来处理异步操作。它是 RelayCommand 的一个变体,提供了对异步任务的支持,允许开发者在 MVVM(Model-View-ViewModel)模式中方便地实现异步命令。使…

华为OD-C卷-密码解密[100分]Python3+C语言-90%

题目描述 给定一段“密文”字符串 s,其中字符都是经过“密码本”映射的,现需要将“密文”解密并输出。 映射的规则(a ~ i)分别用(1 ~ 9)表示;(j ~ z)分别用("10*" ~ "26*")表示。 约束:映射始终唯一。 输入描述 “密文”字符串 输出描述 …

Hive进阶(4)----MapReduce的计算过程(赋图助君理解)

MapReduce的计算过程 MapReduce是一种编程模型和处理大规模数据集的方法。它通常用于分布式计算环境中,能够将数据处理任务分解成独立的部分,分配给多台计算机进行并行处理。这个模型由Google提出,并在开源领域中得到了广泛的应用和实现。Map…

uniapp 当前系统没有安装苹果根证书,是否打开证书目录(打开后依次安装证书

当你遇到这类问题时,说明你也极其的困惑!这就是为啥大抵国内这些货色搞的东西总是不尽人意!连开发者生态都搞不好,就急着吹嘘。 这是官方给的技术说明方案: 恭喜你,当你按照这个搞之后,你的问题…

Kolla-ansible部署OpenStack集群

0. OpenStack 部署 系统要求 单机部署最低配置: 2张网卡8G内存40G硬盘空间 主机系统: CentOS Stream 9Debian Bullseye (11)openEuler 22.03 LTSRocky Linux 9- Ubuntu Jammy (22.04) 官方不再支持CentOS 7作为主机系统,我这里使用的是R…

Linux_CentOS7/8系统 - 关闭图形界面新增用户机制手册

Linux_CentOS7/8系统 - 关闭图形界面新增用户机制手册 在系统完成图形界面安装后重新启动后第一次登入,在图形界面会有新增用户页面,那如果取消关闭可以按以下操作: CTRLALTF2 root账号登录 yum remove gnome-initial-setup -y init 3 init …

正则表达式中?=、?!、?<=、?<!、?:的理解与应用举例

正则表达式就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个规则字符串,这个规则字符串表达对字符串的一种过滤逻辑,这篇文章主要给大家介绍了关于正则表达式中?、?!、?<、?<!、?:的理解与应用举例的相关资料,需要的朋友可以参考下 …

深度 | 践行绿色健康可持续发展,这家企业提供了价值范本

文 | 螳螂观察 作者 | 余一 近段时间以来,小米SU7热度一直不减,在展露小米强大品牌号召力的同时,也侧面体现出了当前消费者对于新能源汽车的喜爱。 而消费者选择新能源汽车时,环保因素也起到了至关重要的作用。像前几日&#x…

【2024官方文档版】React-描述IU

系列文章目录 一、快速入门【基础】 二、描述IU 文章目录 系列文章目录二、描述IU1.第一个组件1.1 组件是什么?1.2 构建组件的方法1.3嵌套和组织组件1.4课后作业1.5 小结: 2.组件的导入导出2.1根组件文件2.2 导入导出文件 3. 使用JSX书写标签语言3.1 将HTML转化为JSX3.2作业 …