Flutter核心原理（3）：RenderObject和RenderBox

最新推荐文章于 2024-03-23 19:53:10 发布
最新推荐文章于 2024-03-23 19:53:10 发布
阅读量5.1k 收藏 5
点赞数 3
分类专栏： Flutter 文章标签： Flutter核心原理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39969226/article/details/94215076
版权
Flutter 专栏收录该内容
21 篇文章 25 订阅 ¥9.90 ¥99.00
订阅专栏
本文深入探讨Flutter的RenderObject和RenderBox，讲解了布局过程中的Constraints、relayoutBoundary、performResize和performLayout，以及绘制中的RepaintBoundary。同时，文章还涉及了命中测试和语义化的概念，帮助理解Flutter的渲染和事件处理机制。
摘要由CSDN通过智能技术生成

每个Element都对应一个RenderObject，我们可以通过Element.renderObject 来获取。并且我们也说过RenderObject的主要职责是Layout和绘制，所有的RenderObject会组成一棵渲染树Render Tree。

RenderObject就是渲染树中的一个对象，它拥有一个parent和一个parentData 插槽（slot），所谓插槽，就是指预留的一个接口或位置，这个接口和位置是由其它对象来接入或占据的，这个接口或位置在软件中通常用预留变量来表示，而parentData正是一个预留变量，它正是由parent 来赋值的，parent通常会通过子RenderObject的parentData存储一些和子元素相关的数据，如在Stack布局中，RenderStack就会将子元素的偏移数据存储在子元素的parentData中（具体可以查看Positioned实现）。

RenderObject类本身实现了一套基础的layout和绘制协议，但是并没有定义子节点模型（如一个节点可以有几个子节点ÿ

了解本专栏 订阅专栏 解锁全文
醒不了的星期八
关注
专栏目录
订阅专栏
Flutter渲染之Widget、Element、RenderObject
xiangzhihong8的专栏
03-28 340
https://juejin.cn/post/6845166891539906574
Flutter之RenderObject
精彩人生从此刻开始
09-05 5088
什么是RenderObject 官方定义：An object in the render tree.渲染树中的一个对象。 正如官方解释，RenderObject就是渲染树中的一个对象，负责布局及绘制。它有一个父级，并有一个名为parentData的插槽，其中父级RenderObject可以存储特定于子级的数据，例如子级位置。RenderObject类也实现了基本的布局和绘制协议。但是，R...
Flutter视图基础简介--Widget、Element、RenderObject
weixin_33720078的博客
06-02 163
　　前言：Flutter官方文档里的一句话：you build your UI out of widgets（使用Flutter开发UI界面时，都是使用Widget），然而，Widget并不是我们真正看到的视图，背后究竟是什么？其实Flutter Framework提供了三种视图树，即：Widget Element RenderObject,只不过，我们使用Flutter开发界面时，通常只和w...
Flutter框架分析（四）-RenderObject
zuoluohust的博客
06-10 541
1. 前言 Flutter中，RenderObject的主要职责是布局和绘制。通过上篇文章介绍的Element Tree，Flutter Framework会生成一棵RenderObject Tree. 其主要功能如下： 布局，从RenderBox开始，对RenderObject Tree从上至下进行布局。 绘制，通过Canvas对象，RenderObject可以绘制自身以及其在RenderObject Tree中的子节点。 点击测试，RenderObject从上至下传递点击事件，并通过其位置和behav
Flutter中RenderObject布局
milan-xiao-tiejiang的博客
04-21 410
RenderObject 是主要负责实现视图渲染的对象。每个 Element都对应一个RenderObject。 Flutter 通过控件树（Widget 树）中的每个控件（Widget）创建不同类型的渲染对象，组成渲染对象树。而渲染对象树在 Flutter 的展示过程分为四个阶段，即布局、绘制、合成和渲染。 其中，布局和绘制在 RenderObject 中完成。 abstract cla...
Flutter 核心原理之Widget、Element、RenderObject1
08-03
Flutter 的核心原理包括 Widget、Element 和 RenderObject 三个部分，它们之间的关系非常重要，理解它们的关系是使用 Flutter 开发应用程序的关键。 一、Widget Widget 是 Flutter 中的基本组件，表示一个用户界面...
Flutter 核心原理 - UI 框架（UI Framework）
csdn_aiyang的博客
03-14 2455
Flutter 它提供了一套Dart API，然后在底层通过OpenGL这种跨平台的绘制库（内部会调用操作系统API）实现了一套代码跨多端。由于Dart API也是调用操作系统API，所以它的性能接近原生。
Flutter 笔记 | Flutter 核心原理（三）布局（Layout ）过程
川峰的博客
05-30 2700
Layout（布局）过程主要是确定每一个组件的布局信息（大小和位置），Flutter 的布局过程如下： 父节点向子节点传递约束（constraints）信息，限制子节点的最大和最小宽高。 子节点根据约束信息确定自己的大小（size）。 父节点根据特定布局规则（不同布局组件会有不同的布局算法）确定每一个子节点在父节点布局空间中的位置，用偏移 offset 表示。 递归整个过程，确定出每一个节点的大小和位置。 可以看到，组件的大小是由自身决定的，而组件的位置是由父组件决定的。
Flutter 笔记 | Flutter 核心原理（四）绘制流程
川峰的博客
05-31 1309
Flutter中和绘制相关的对象有三个，分别是Canvas、Layer 和 Scene： Canvas：封装了 Flutter Skia 各种绘制指令，比如画线、画圆、画矩形等指令。 Layer：分为容器类和绘制类两种；暂时可以理解为是绘制产物的载体，比如调用 Canvas 的绘制 API 后，相应的绘制产物被保存在 PictureLayer.picture 对象中。 Scene：屏幕上将要要显示的元素。在上屏前，我们需要将Layer中保存的绘制产物关联到 Scene 上。 Flutter 绘制流程：
Flutter开发进阶之瞧瞧RenderObject
最新发布
Kevin写代码
03-23 953
通过上回我们了解到Flutter执行`build`Tree的逻辑线，当Tree构建完成后会交给Flutter底层的渲染事件循环去执行将内容渲染到屏幕的操作。 但是渲染的操作到底是如何串起来的呢？这篇文章将会从`Element`联系到`RenderObject`去瞧瞧逻辑线形成闭环。
flutter学习-Widget-Element-RenderObject
yong_19930826的博客
08-18 694
Widget-Element-RenderObject1. Flutter渲染流程1.1 Widget-Element-RenderObject的关系1.2 什么是Widget1.3 Element是什么？1.4 RenderObject2. 对象的创建过程2.1 Widget2.2 RenderObject2.3 Element2.4 build中的Context是什么2.5 创建过程小结3. Widget中的key3.1 key的案例需求3.2 StatelessWidget实现3.3 Statefu
Flutter渲染之Widget、Element 和 RenderObject
Dream It Possible
04-04 1604
上面通过源码讲解了一下 Widget、Element、RenderObject 的联系。下面简单来个总结。我们写好 Widget 树后，Flutter 会在遍历 Widget 树时调用 Widget 里面的 createElement 方法去生成对应节点的 Element 对象，同时 Element 里面也有了对 Widget 的引用。
【Flutter核心类分析】深入理解RenderObject
人生百年几今日，今日不为真可惜。
11-22 2764
文章目录背景RenderObject分类创建驱动驱动小结：布局绘制文章小结 背景 Widget，Element，RenderObject可以说是Flutter Framework的三个核心成员，本文我们一起来学习下RenderObject。 宏观上来讲，一个RenderObject就是我们之前说的三棵树之一RenderObject Tree中的一个对象，它的职责主要有三个：布局，绘制，命中测试。其中命中测试在之前的文章一文深入了解Flutter事件机制有过详细的分析，本文我们主要来讲解其它两点：布局和绘制。
Flutter 框架最重要的三个类：Widget，Element，RenderObject
aoteSersr的博客
04-04 239
Flutter 框架最重要的概念：Widget，Element，RenderObject RenderObject 布局概念
Flutter的渲染绘制概述、flutter widget、Element、 RenderObject
chuyouyinghe的专栏
05-10 228
作为一个新兴的跨平台方案，Flutter在渲染方面做了什么工作？ 关于Flutter Framework的架构图： 通过上图我们可以了解到Framework的底层是Flutter引擎，引擎主要负责图形绘制（Skia）、文字排版（libtxt）和提供Dart运行时，引擎全部使用C++实现，Framework层使我们可以用Dart语言调用引擎的强大能力。 1.Widget Widget是 Flutter中控件实现的基本单位，其意义类似于 Cocoa Touch中的 UIView。Widget里面
flutter的RenderBox使用说明书&原理浅析
m0_48019226的博客
05-21 1150
本文基于1.12.13+hotfix.8版本源码分析。 目录一、RenderBox的用法1、RenderBox的使用基本流程（1）测量（2）绘制（3）更新2、RenderObjectWidget（1）简介（2）用法3、非容器控件的hitTest二、容器类型的RenderBox1、介绍2、单个子对象（1）RenderProxyBox（2）RenderShiftedBox（3）RenderO...
Flutter的Widget-Element-RenderObject
qq_27909209的博客
07-14 545
f
Flutter 组件渲染机制详解
油焖茄子 的博客
11-03 246
Flutter 的方式与上述的框架不同，实际上的渲染过程不依赖于原生，而是通过 C/C++编写的 Skia 渲染引擎完成界面渲染的。本篇介绍了 Flutter 渲染工作的基本机制，通过了解渲染机制能够帮助我们了解 Widget 和实际渲染的对应关系，从而在后续的状态管理中更好地理解状态管理工具如何完成组件的更新。最终的组件树的层级会比代码上的层级更深，如下图所示。完成单次树的遍历后，每个对象在其父节点的布局约束下，都会有一个设定的尺寸，然后就可以调用 paint 方法进行绘制了。例如在上面的示例代码中，
RenderObject 和 RenderBox有什么关系吗？
03-25
RenderObject是Flutter框架中所有控件的基类，RenderBox是RenderObject的子类。RenderBox是一个具有位置和大小的RenderObject。所有RenderBox对象都可以呈现独立的矩形区域，并且可以在布局中与其他RenderBox对象互动。因此，可以说RenderBox是RenderObject的具体实现，它更加强调控件的形状和尺寸等视觉方面的属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

醒不了的星期八

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值