HarmonyOS(29)onMeasureSize和PlaceChildren (View的测量和布局)

onMeasureSize和PlaceChildren

  • onMeasureSize和PlaceChildren 说明
  • 官方使用示例
  • 参考资料

onMeasureSize和PlaceChildren 说明

在Android开发中View的测量onMeasure和布局onLayout是自定义组件必备的两个方法,HarmonyOS对自定义布局也提供了两个方法:
onMeasureSize:组件每次布局时触发,计算子组件的尺寸,其执行时间先于onPlaceChildren。注意 不允许在onMeasureSize函数中改变状态变量。
在这里插入图片描述

onPlaceChildren:组件每次布局时触发,设置子组件的起始位置。
在这里插入图片描述
两个方法的参数详细含义参考自定义组件的自定义布局

官方使用示例

以下示例中,Index页面包含一个实现了自定义布局的自定义组件,且对应自定义组件的子组件通过index页面内的builder方式传入。

而在自定义组件中,调用了onMeasureSizeonPlaceChildren设置子组件大小和放置位置。例如,在本示例中,在onMeasureSize中初始化组件大小size=100,后续的每一个子组件size会加上上一个子组件大小的一半,实现组件大小递增的效果。而在onPlaceChildren中,定义startPos=300,设置每一个子组件的位置为startPos减去子组件自身的高度,所有子组件右下角一致在顶点位置(300,300),实现一个从右下角开始展示组件的类Stack组件

// xxx.ets
@Entry
@Component
struct Index {build() {Column() {CustomLayout({ builder: ColumnChildren })}}
}// 通过builder的方式传递多个组件,作为自定义组件的一级子组件(即不包含容器组件,如Column)
@Builder
function ColumnChildren() {ForEach([1, 2, 3], (index: number) => { // 暂不支持lazyForEach的写法Text('S' + index).fontSize(30).width(100).height(100).borderWidth(2).offset({ x: 10, y: 20 })})
}@Component
struct CustomLayout {@BuilderdoNothingBuilder() {};@BuilderParam builder: () => void = this.doNothingBuilder;@State startSize: number = 100;result: SizeResult = {width: 0,height: 0};// 第一步:计算各子组件的大小onMeasureSize(selfLayoutInfo: GeometryInfo, children: Array<Measurable>, constraint: ConstraintSizeOptions) {let size = 100;children.forEach((child) => {let result: MeasureResult = child.measure({ minHeight: size, minWidth: size, maxWidth: size, maxHeight: size })size += result.width / 2;})this.result.width = 100;this.result.height = 400;return this.result;}// 第二步:放置各子组件的位置onPlaceChildren(selfLayoutInfo: GeometryInfo, children: Array<Layoutable>, constraint: ConstraintSizeOptions) {let startPos = 300;children.forEach((child) => {let pos = startPos - child.measureResult.height;child.layout({ x: pos, y: pos })})}build() {this.builder();}
}

运行效果
在这里插入图片描述

参考资料

ConstraintSizeOptions
Measurable10+
自定义组件的自定义布局
自定义组件的自定义布局2

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

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

相关文章

【VSCode实战】转换大小写快捷键

今天在VSCode Insiders上编码&#xff0c;突然想将某常量转换为大写。按照virtual studio的习惯&#xff0c;我Ctrl Shift U没有效果&#xff0c;Ctrl U也没效果。网上搜了搜&#xff0c;原来VSCode Insiders没有这个默认功能。 而VSCode Insiders这么强大怎么可能没有大小…

ELK 使用 metricbeat监控数据

IP功能版本192.168.140.153elk-18.13.4192.168.140.153metricbeat8.13.4192.168.140.156elk-28.13.4192.168.140.156metricbeat8.13.4192.168.140.159logstash8.13.4192.168.140.159kibana8.13.4 一、安装ELK 参考文档&#xff1a; https://download.csdn.net/download/weix…

TG-5510CA温补晶振用于GPS应用

随着现代社会对精准定位和导航需求的不断增加&#xff0c;GPS&#xff08;全球定位系统&#xff09;已成为我们日常生活和各行各业中不可或缺的一部分。无论是在智能手机、汽车导航、无人机飞行控制&#xff0c;还是在精密的科学研究和军事应用中&#xff0c;GPS系统都扮演着至…

Android电量优化,让你的手机续航更持久

节能减排&#xff0c;从我做起。一款Android应用如果非常耗电&#xff0c;是一定会被主人嫌弃的。自从Android手机的主人用了你开发的app&#xff0c;一天下来&#xff0c;也没干啥事&#xff0c;电就没了。那么他就会想尽办法找出耗电量杀手&#xff0c;当他找出后&#xff0c…

PPT设置为本框的默认格式以及固定文本框

调整文本框固定位置 双击文本框之后勾选如下三个位置 设置文本框为默认 在调整好文本框的基本性质后&#xff0c;设置为默认即可

python-验证子串

题目描述 输入两个字符串&#xff0c;验证其中一个串是否为另一个串的子串。 输入两个字符串&#xff0c; 每个字符串占一行&#xff0c;长度不超过200且不含空格。 输出 若第一个串s1是第二个串s2的子串&#xff0c;则输出(s1) is substring of(s2)否则&#xff0c;若第二个串…

pgvector v0.7.0 的新增功能

现实世界的嵌入数据集通常包含隐藏在向量空间中的冗余。例如&#xff0c;当向量聚集在多维空间中的某些中心点周围时&#xff0c;它会揭示一个可利用的结构。通过减少这种冗余&#xff0c;我们可以在对精度影响最小的情况下节省内存和性能。自 0.7.0 版以来&#xff0c;pgvecto…

Linux环境下安装MySQL详细教程(手把手附图安装!!!)

目录 一、前言 二、安装前的环境检查 三、下载官方的 MySQL 安装包 四、开始安装 MySQL 五、尝试初次启动 MySQL 六、给MySQL 做一些简单的小配置 七、共勉 一、前言 本次专题将带大家进入一个新的专题 ---- MySQL。作为本次专题的第一篇博客&#xff0c;肯定是带大家一起…

Jetson Orin Nano v6.0 + tensorflow2.15.0+nv24.05 GPU版本安装

Jetson Orin Nano v6.0 tensorflow2.15.0nv24.05 GPU版本安装 1. 源由2. 步骤2.1 Step1&#xff1a;系统安装2.2 Step2: nvidia-jetpack安装2.3 Step3&#xff1a;jtop安装2.4 Step4&#xff1a;h5py安装2.5 Step5&#xff1a;tensorflow安装2.6 Step6&#xff1a;jupyterlab安…

Golang——RPC

一. RPC简介 远程过程调用(Remote Procedure Call&#xff0c;RPC)是一个计算机通信协议。该协议运行运行于一台计算机的程序调用另外一台计算机的子程序&#xff0c;而程序员无需额外的为这个交互作用编程。如果涉及的软件采用面向对象编程&#xff0c;那么远程过程调用亦可称…

Thesios: Synthesizing Accurate Counterfactual I/O Traces from I/O Samples——论文泛读

ASPLOS 2024 Paper 论文阅读笔记整理 问题 在设计大规模分布式存储系统时&#xff0c;I/O活动的建模至关重要。具有代表性的/O跟踪&#xff0c;可以对现有硬件、配置和策略进行详细的性能评估。假设跟踪进一步支持分析假设情况&#xff0c;例如部署新的存储硬件、更改配置和修…

2.4 OpenCV随手简记(五)

一、图像翻转 第一个图像翻转&#xff0c;这个可是制作表情包的利器。 图像翻转在 OpenCV 中调用函数 flip() 实现&#xff0c;原函数如下&#xff1a; flip(src, flipCode, dstNone) src&#xff1a;原始图像。 flipCode&#xff1a;翻转方向&#xff0c; 如果 flipCode 为…

[Redis]List类型

列表类型来存储多个有序的字符串&#xff0c;a、b、c、d、e 五个元素从左到右组成了一个有序的列表&#xff0c;列表中的每个字符串称为元素&#xff0c;一个列表最多可以存储个元素。在 Redis 中&#xff0c;可以对列表两端插入&#xff08;push&#xff09;和弹出&#xff08…

【动手学深度学习】多层感知机之权重衰减研究详情

目录 &#x1f30a;1. 研究目的 &#x1f30a;2. 研究准备 &#x1f30a;3. 研究内容 &#x1f30d;3.1 多层感知机权重衰减 &#x1f30d;3.2 基础练习 &#x1f30a;4. 研究体会 &#x1f30a;1. 研究目的 防止过拟合&#xff1a;权重衰减和暂退法都是用来控制模型的复…

北大、腾讯强推!DynamiCrafter WebUI 在线教程,无需逐帧记录即可图片变视频

从史前时期开始&#xff0c;人类的祖先就曾以石为笔&#xff0c;在洞穴的石壁描绘出一系列野牛奔跑的分析图&#xff0c;壁画上的动物被叠加了多条腿&#xff0c;用来表现连贯的动作&#xff0c;这或许便是动态视频的最早雏形。 被焚之城的山羊陶碗 时光流转&#xff0c;最初&…

sqli-labs 靶场闯关基础准备、学习步骤、SQL注入类型,常用基本函数、获取数据库元数据

Sqli-labs的主要作用是帮助用户学习如何识别和利用不同类型的SQL注入漏洞&#xff0c;并了解如何修复和防范这些漏洞。 它提供了多个不同的漏洞场景&#xff0c;每个场景都代表了一个特定类型的SQL注入漏洞。 用户可以通过攻击这些场景来学习和实践漏洞利用技术&#xff0c;以及…

【数据结构】二叉树-堆

目录 一.树概念及性质 二.二叉树的概念与实现 三.堆的概念和结构 四.堆的实现 1.向下调整算法 2. 堆的创建 3.向上调整算法 4.堆的删除 五.堆排序 六.堆-源码 一.树概念及性质 树是一种非线性的数据结构&#xff0c;它是由数个节点组成的具有层次关系的集合。之所以叫…

干货 | SDR RFSoC技术框图大放送(附资源)

软件无线电(SDR) 本文参考《Software Defined Radio with Zynq UltraScale RFSoc》&#xff0c;全文共744页。需要的可以给公众号 迪普微科技 发送“SDR”。

【力扣】矩阵中的最长递增路径

一、题目描述 二、解题思路 1、先求出以矩阵中的每个单元格为起点的最长递增路径 题目中说&#xff0c;对于每个单元格&#xff0c;你可以往上&#xff0c;下&#xff0c;左&#xff0c;右四个方向移动。那么以一个单元格为起点的最长递增路径就是&#xff1a;从该单元格往上…

SpringBoot项目启动后访问网页显示“Please sign in“

SpringBoot启动类代码如下 SpringBoot项目启动后访问网页显示"Please sign in"&#xff0c;如图 这是一个安全拦截页面&#xff0c;即SpringSecurity认证授权页面&#xff0c;因为SecurityAutoConfiguration是Spring Boot提供的安全自动配置类&#xff0c;也就是说它…