Flutter中的Tree

news/2024/7/20 22:53:53 标签: flutter, ios, android studio

一、Widget

组合类(Composite Widgets)

如Container、Scaffold、MaterialApp等,以及通过继承StatelessWidget和StatefulWidget的类。

代理类(Proxy Widgets)

如InheritedWidget,这是一种功能型组件,可以高效快捷地实现共享数据的跨组件传递;
InheritedWidget是一个代理类Widget,主要用于在Descendant Widgets之间传递共享信息;
通过使用InheritedWidget,可以在树结构中传递信息,当子类状态变更时,可以通知父类进行对应的变更;
ParentDataWidget主要用于配置Descendant Renderer Widget的布局信息;
与InheritedWidget的作用方向相反,ParentDataWidget为具有多个子类的RenderObjectWidget提供对应的配置等,例如Stack使用已定位好的父类Widget来定位每个子Widget。

绘制类(Render Object Widgets)

这类Widget几乎涵盖了屏幕上看到的所有UI,都是通过继承RenderObjectWidget实现的;
根据对应的Element,可以分为MultiChildRenderObjectWidget、SingleChildRenderObjectWidget和LeafRenderObjectWidget,其中LeafRenderObjectWidget是那些没有子节点的Widget。

StatefulWidget生命周期

可以分为三个阶段:创建、更新和销毁;
在创建阶段中,Widget会触发一系列生命周期方法来响应不同的事件;
这些方法包括createState、initState、didChangeDependencies和build;
createState方法会在Widget被创建时调用,用于创建一个新的State对象;
initState方法会在State对象被创建后调用,用于初始化State对象。didChangeDependencies方法会在State对象依赖的对象发生变化时调用,例如父Widget发生变化时;
build方法会在创建阶段和更新阶段都会被调用,用于构建UI界面;

在更新阶段中,Widget会触发一系列生命周期方法来响应不同的事件;
这些方法包括didUpdateWidget和setState;
didUpdateWidget方法会在Widget属性发生变化时调用,例如父Widget的属性发生变化时;
setState方法会在State对象的状态发生变化时调用,用于更新状态;

在销毁阶段中,Widget会触发一系列生命周期方法来响应不同的事件;
这些方法包括deactivate和dispose;
deactivate方法会在State对象暂时从视图树中移除时调用,例如当页面被覆盖时;
dispose方法会在永久从视图树中移除时调用,通常用于释放所有资源。

Widget的更新条件

setState()方法被调用、依赖的变量或数据发生变化、parent widget发生变化、Widget Tree重建等;
总的来说就是Flutter会递归遍历新旧Widget Tree的节点,对比它们的runtimeType和key属性是否相同,如果相同就会认为不需要更新。

Key

Key共分为LocalKey和GlobalKey,通过比较hashCode来判断两个Key是否相等,在使用中需要注意Key的唯一性;
GlobalKey是一个全局唯一的Key,可以在整个应用中引用;
LocalKey直接继承至Key,它应用于拥有相同父Element的Widget进行比较的情况;
LocalKey包括ValueKey(最常用的Key类型,它将一个值赋予给Key)、ObjectKey(与ValueKey类似,但是ObjectKey使用的是对象的引用)、UniqueKey(每次创建都会生成一个唯一的Key);
PageStorageKey继承自ValueKey,是用于存储用户滚动位置的专用key,以便应用可以保留当前的滚动位置,供后续使用。

二、Element、RenderObject、Paint

从Tree到渲染

对于一个StatefulWidget,当StatefulWidget被插入到Widget Tree中时,Flutter框架会调用其createElement()方法;
createElement()方法返回一个StatefulElement实例,StatefulElement随后被挂载到Element Tree上;

StatefulElement通过调用StatefulWidget的createState()方法来创建一个状态对象(State);
这个状态对象负责管理StatefulWidget的状态,并可以在状态变化时触发重建;

在适当的时机(如widget首次构建或状态变化时),Flutter框架会调用状态对象的build()方法;
build()方法返回一个Widget Tree,这个树描述了应该如何在屏幕上呈现该widget;
StatefulElement会将自身作为BuildContext传入到build()方法中,以便在Widget Tree中可以使用context相关的功能;

build()方法返回的Widget Tree最终会被转换为一系列的RenderObject;
每个widget都有一个对应的RenderObject类型,用于实际的布局和绘制工作;
这个转换过程是通过Widget Tree的深度优先遍历来完成的,每个widget都会调用其自己的createElement()和build()方法来参与这个过程;
最终,每个widget都会与一个或多个RenderObject关联起来,形成一个Render object Tree;

一旦Render object Tree被构建完成,Flutter就会开始布局和绘制过程;
布局过程确定每个render object的大小和位置;
绘制过程则使用Skia图形库(或其他平台特定的图形API)来将render object渲染到屏幕上。

总结

Widget定义了用户界面的结构和样式,是声明性的;
Element是Widget的实例化对象,负责维护UI的状态并与RenderObject进行协调;
RenderObject负责实际的布局和绘制工作,使用Paint对象来执行绘图操作;
Paint定义了绘图操作的样式和效果。


http://www.niftyadmin.cn/n/5301021.html

相关文章

搭建个人深度学习工作站(捡垃圾)

1 硬件平台 工作站考虑性价比和后续的扩展性,在二手平台搜索了几天,发现捡垃圾真香。 考虑到深度学习有多卡的需求,平台选择需要有足够多的 pcie 通道,平台选择了 Intel 十代 X 系列 CPU X299 主板,能够提供 48 条 p…

Python-单行赋值的执行顺序

一般情况下,python 的元组赋值可以当作没有顺序: a, b 1, 2 a Out[3]: 1 b Out[4]: 2 但是如果交换的变量存在关联,元组赋值就是有顺序的: a, b b, a a, b Out[6]: (2, 1) 结果是a,b的值交换了顺序。如果按照: …

【计算机毕业设计】SSM实现的在线农产品商城

项目介绍 本项目分为前后台,且有普通用户与管理员两种角色。 用户角色包含以下功能: 用户登录,查看首页,按分类查看商品,查看新闻资讯,查看关于我们,查看商品详情,加入购物车,查看我的订单,提交订单,添加收获地址,支付订单等功能。 管理员角色包含以…

c语言和python区别哪个难,c语言和python区别大不大

大家好,给大家分享一下c语言和python区别主要用来写什么,很多人还不知道这一点。下面详细解释一下。现在让我们来看看! Python可以说是目前最火的语言之一了,人工智能的兴起让Python一夜之间变得家喻户晓,Python号称目…

【算法】一维、二维前缀和 解决算法题(C++)

文章目录 1. 前缀和算法 介绍2. 一维前缀和 模板引入DP34【模板】前缀和 3. 利用一维前缀和 解题724.寻找数组的中心下标238.除自身以外数组的乘积560.和为K的子数组974.和可被K整除的子数组525.连续数组 二维前缀和 模板1314.矩阵区域和 1. 前缀和算法 介绍 前缀和算法 用于高…

努力打工的你存到钱了?2024新蓝海创业项目/适合普通人创业项目

为什么有钱人那么有钱?是他们够努力吗?有一位网友回答是这样回答的: “从小到大我所接触到的一切成功,他的基础都是努力,甚至于奉承时的吃得苦上苦方为人上人。但是那天我的三观出现了认知错误,光靠努力赚…

LinuxShell

一、 新建用户 在Linux上新建一个用户并赋予超级用户权限,建立家目录并设置默认shell为bash,并设置Linux在输入sudo密码时显示星号。请提交全部命令及输出截图(表明完成需求即可)。 1.sudo useradd -m ymhs(用户名) 增加用户 2.su…

找不到mfc110u.dll,是什么原因,五种找不到mfc110u.dll,的解决方法

在日常使用电脑的过程中,我们可能会遇到一些错误提示,其中之一就是“mfc110u.dll丢失”。那么,什么是mfc110u.dll文件?为什么会出现丢失的情况?本文将为您详细介绍mfc110u.dll文件的作用、丢失原因以及提供5种解决方法…