flutter 绘制原理探究

文章目录

  • Widget
    • 1、简介
    • 2、源码分析
  • Element
    • 1、简介
    • 2、源码分析
  • RenderObject
  • Widget 渲染过程总结
  • 思考

Flutter 的核心设计思想便是“一切皆 Widget”,Widget 是 Flutter 功能的抽象描述,是视图的配置信息,同样也是数据的映射,是 Flutter 开发框架中最基本的概念。

在 Flutter 中视图数据的组织和渲染抽象的三个核心概念,即 Widget、 Element 和 RenderObject。

Widget


1、简介


翻译一下就是,Widget 描述 Element 的配置信息,是 Flutter 框架里的核心类层次结构,一个 Widget 是用户界面某一部分的不可变描述。Widgets 可以转为 Elements,Elements 管理着底层的渲染树。

Widget 是 Flutter 世界里对视图的一种结构化描述,你可以把它看作是前端中的“控件”或“组件”。Widget 是控件实现的基本逻辑单位,里面存储的是有关视图渲染的配置信息,包括布局、渲染属性、事件响应信息等。

Flutter 将 Widget 设计成不可变的,所以当视图渲染的配置信息发生变化时,Flutter 会选择重建 Widget 树的方式进行数据更新,以数据驱动 UI 构建的方式简单高效。

由于 Widget 的不可变性,可以以较低成本进行渲染节点复用,因此在一个真实的渲染树中可能存在不同的 Widget 对应同一个渲染节点的情况,这无疑又降低了重建 UI 的成本。

2、源码分析

widget的关键子类:StatelessWidget、StatefulWidget、RenderObjectWidget’

RenderObjectWidget 的关键子类:
MultiChildRenderObjectWidget -> RichText
SingleChildRenderObjectWidget -> Padding

来到 Widget 类里面可以看到有以下方法

@protected
@factory
Element createElement();

Widget 是个抽象类,所有的 Widgets 都是它的子类,其抽象方法 createElement 需要子类实现,这里体现了之前我们说的 Widget 和 Element 的一一对应关系。来到 StatelessWidget、StatefulWidget、MultiChildRenderObjectWidget、SingleChildRenderObjectWidget 里面我们可以找到 createElement 的实现。

SingleChildRenderObjectWidget

@override
SingleChildRenderObjectElement createElement() => SingleChildRenderObjectElement(this);

MultiChildRenderObjectWidget

@override
MultiChildRenderObjectElement createElement() => MultiChildRenderObjectElement(this);

StatefulWidget

@override
StatefulWidget createElement() => StatefulWidget(this);

StatelessWidget

@override
StatelessWidget cre

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

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

相关文章

蓝桥杯基础---切面条

切面条 一根高筋拉面,中间切一刀,可以得到2根面条。 如果先对折1次,中间切一刀,可以得到3根面条。 如果连续对折2次,中间切一刀,可以得到5根面条。 那么,连续对折10次,中间切一刀…

python curl2pyreqs 生成接口脚本

下载 curl2pyreqs 库 pip install curl2pyreqs -i https://pypi.tuna.tsinghua.edu.cn/simple 打开调试模式,在Network这里获取 接口的cURL 打开cmd窗口,输入curl2pyreqs,会自动生成接口代码 curl2pyreqs 执行接口脚本,返回响应…

实现Promise所有核心功能和方法

一直以来对Promise只是会用简单的方法,例如then,catch等,对于其余各种方法也只是简单了解,这次想要通过实现Promise来加深对Promise的使用 话不多说,直接开始,简单粗暴一步步来 一:了解Promise …

Electron.js入门-构建第一个聊天应用程序

什么是electron 电子是一个开源框架,用于使用web技术构建跨平台桌面应用程序;即: HTML、CSS和JavaScript;被集成为节点模块,我们可以为我们的应用程序使用节点的所有功能;组件,如数据库、Api休…

FaceFusion:探索无限创意,创造独一无二的面孔融合艺术!

FaceFusion:探索无限创意,创造独一无二的面孔融合艺术! 它使用先进的图像处理技术,允许用户将不同的面部特征融合在一起,创造有趣和令人印象深刻的效果。这个项目的潜在应用包括娱乐、虚拟化妆和艺术创作,…

(十五)VBA常用基础知识:正则表达式的使用

vba正则表达式的说明 项目说明Pattern在这里写正则表达式,例:[\d]{2,4}IgnoreCase大小写区分,默认false:区分;true:不区分Globaltrue:全体检索;false:最小匹配Test类似p…

自动求导,计算图示意图及pytorch实现

pytorch实现 x1 torch.tensor(3.0, requires_gradTrue) y1 torch.tensor(2.0, requires_gradTrue) a x1 ** 2 b 3 * a c b * y1 c.backward() print(x1.grad) print(y1.grad) print(x1.grad 6 * x1 * y1) print(y1.grad 3 * (x1 ** 2))输出为: tensor(36.) …

Go 复合数据类型之结构体与自定义类型

Go 复合数据类型之结构体与自定义类型 文章目录 Go 复合数据类型之结构体与自定义类型一、类型别名和自定义类型1.1 类型定义(Type Definition)简单示例 1.2 类型别名简单示例 1.3 类型定义和类型别名的区别 二、结构体2.1 结构体介绍2.2 结构体的定义2.…

【Linux服务端搭建及使用】

连接服务器的软件:mobaxterm 设置root 账号 sudo apt-get install passwd #安装passwd 设置方法 sudo passwd #设置root密码 su root #切换到root账户设置共享文件夹 一、强制删除原有环境 1.删除python rpm -qa|grep pytho…

初学者如何选择:前端开发还是后端开发?

#开发做前端好还是后端好【话题征文】# 作为一名有多年开发经验的过来人,我认为前端开发和后端开发都有其独特的魅力和挑战。下面我将就我的个人经历和观点来分享一些关于前端开发和后端开发的看法。 首先,让我们将编程世界的大城市比作前端开发和后端开…

vcf 文件如何修改染色体修改样本名称提取样本

大家好,我是邓飞。 对于vcf文件和plink文件是经常用的文件,对于基因型数据的处理,一般分为: 数据质控数据提取染色体修改名称样本修改名称 今天介绍一下vcf文件的三个处理方法: 1,染色体修改2&#xff…

自助建站系统,一建建站系统api版,自动建站

安装推荐php7.2或7.2以下都行 可使用虚拟主机或者服务器进行搭建。 分站进入网站后台 域名/admin 初始账号123456qq.com密码123456 找到后台的网站设置 将主站域名及你在主站的通信secretId和通信secretKey填进去。 即可正常使用 通信secretId和通信secretKey在主站的【账号…

ruoyi 若依 前端vue npm install 运行vue前端

首次导入,需要先执行 npm install #进入到前端模块目录下 cd ruoyi-ui # 安装 npm install 启动后端项目 运行前端项目:运行成功后,会浏览器自动加载到前端首页(或者 浏览器访问打印的两个地址) # 运行 npm run dev 部…

docker 安装 neo4j

1. 安装所需的软件包 yum install -y yum-utils device-mapper-persistent-data lvm2 2. 设置阿里云仓库(国内仓库稳定) yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo3. 查看docker容器版本 yum list docker-ce --showdupl…

LeetCode-496-下一个更大元素

题目描述: 题目链接:LeetCode-496-下一个更大元素 解题思路: 方法一:暴力 方法二:单调栈 方法一代码实现: class Solution {public int[] nextGreaterElement(int[] nums1, int[] nums2) {// 最笨的方法&am…

java基础 异常

异常概述: try{ } catch{ }: package daysreplace;import com.sun.jdi.IntegerValue;import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Arrays; import java.util.Calendar; import java.util.Date; import java.…

利用excel表格进行分包和组包

实际使用中,我们可能希望修改某几个数据之后,最终的数据包能够自动发动数据,类似于在给结构体变量修改数据,自动生成完整的结构体; excel语法 1:拆分数据 LEFT(A4,2) – 取A4单元格左边的两个数据 RIGHT(A4…

c++ qt--线程(二)(第九部分)

c qt–线程(二)(第九部分) 一.线程并发 1.并发问题: ​ 多个线程同时操作同一个资源(内存空间、文件句柄、网络句柄),可能会导致结果不一致的问题。发生的前提条件一定是多线程下…

javaee spring整合mybatis

案例一 包含dao层 创建maven webapp项目 maven仓库需要改为阿里云 引入依赖 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-inst…

【C语言初阶】初识C语言

目录 一、什么是C语言 二、第一个C语言程序 三、数据类型 类型的使用&#xff1a; 四、变量、常量 4.1 定义变量的方法 4.2 变量的命名 4.3 变量的分类 4.4 变量的使用 4.5 变量的作用域和生命周期 4.5.1 作用域 4.5.2 生命周期 4.6 常量 五、字符串转义字符注释 …