鸿蒙Next自定义组件的布局

news/2024/12/19 8:25:43/文章来源:https://www.cnblogs.com/freerain/p/18616235

一、引言

在鸿蒙Next开发中,当需要通过精确测算的方式来布局自定义组件内子组件的位置时,可以使用特定的接口来实现。本文将详细介绍如何使用onMeasureSizeonPlaceChildren接口来完成自定义组件的布局,包括接口的功能、使用示例以及实现效果等方面的内容。

二、布局接口介绍

  1. onMeasureSize接口
    • 功能:组件每次布局时触发,用于计算子组件的尺寸。其执行时间先于onPlaceChildren接口。
    • 参数:
      • selfLayoutInfo:类型为GeometryInfo,提供组件自身的布局信息。
      • children:类型为Array<Measurable>,是可测量的子组件数组。
      • constraint:类型为ConstraintSizeOptions,用于约束子组件的尺寸。
  2. onPlaceChildren接口
    • 功能:组件每次布局时触发,用于设置子组件的起始位置。
    • 参数:
      • selfLayoutInfo:同onMeasureSize接口中的selfLayoutInfo
      • children:类型为Array<Layoutable>,是可布局的子组件数组。
      • constraint:同onMeasureSize接口中的constraint

三、使用示例

(一)整体结构

  1. Index.ets文件
    • 包含@Entry装饰的Index组件,在其build方法中使用Column组件包裹了一个自定义布局组件CustomLayout,并通过builder方式传入子组件。
  2. 自定义组件相关代码
    • CustomLayout组件实现了自定义布局功能,包括onMeasureSizeonPlaceChildren方法的定义,以及build方法来构建组件。

(二)具体实现步骤

  1. 计算子组件大小(onMeasureSize方法)
    • CustomLayout组件的onMeasureSize方法中,首先初始化一个size变量为100。然后遍历传入的子组件数组children,对于每个子组件,使用measure方法测量其尺寸,并将测量结果的宽度的一半累加到size变量上。最后设置this.result.width为100,this.result.height为400,并返回this.result,从而实现组件大小递增的效果。例如,第一个子组件大小为100,第二个子组件大小为100加上第一个子组件宽度100的一半(即50),以此类推。
  2. 放置子组件位置(onPlaceChildren方法)
    • onPlaceChildren方法中,定义startPos为300。然后遍历子组件数组children,对于每个子组件,计算其位置posstartPos减去子组件自身的高度。最后使用layout方法将子组件布局到计算得到的位置(pos, pos),使得所有子组件的右下角在顶点位置(300, 300),实现了一个从右下角开始展示组件的类似Stack组件的效果。

(三)子组件传递方式

Index组件中,通过@Builder装饰的ColumnChildren函数来构建子组件。使用ForEach循环遍历一个数组[1, 2, 3],对于每个元素创建一个Text组件,并设置其样式(如字体大小、宽度、高度、边框宽度、偏移量等)。然后将这个ColumnChildren函数作为builder参数传递给CustomLayout组件。

四、总结

通过使用onMeasureSizeonPlaceChildren接口,开发者可以根据自己的需求精确计算和设置自定义组件内子组件的大小和位置,实现各种复杂的布局效果。这种方式提供了更大的灵活性和控制力,有助于打造出更加美观、高效的用户界面。在实际开发中,可以根据具体的布局需求灵活运用这些接口,实现个性化的组件布局设计。

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

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

相关文章

从底层源码深入分析Bean的实例化

生命周期的整体流程 Spring 容器可以管理 singleton 作用域 Bean 的生命周期,在此作用域下,Spring 能够精确地知道该 Bean 何时被创建,何时初始化完成,以及何时被销毁。 而对于 prototype 作用域的 Bean,Spring 只负责创建,当容器创建了 Bean 的实例后,Bean 的实例就交给…

abc 蓝题方法整理

abc 蓝题方法整理 trick 基本算法 搜索 最优性剪枝/保证枚举合法保证复杂度 : 42, 166 约束与两边有关系考虑双向搜索 : 54 数据范围较小考虑爆搜: 81, 162 从可能性较少的位置向较多的位置搜 : 162 记忆化搜索优化 : 162 meet-in-the-middle处理总状态不多的搜索 : 162, 193 边…

读图数据库实战笔记07高级数据建模技术

高级数据建模技术1. 高级数据建模技术 1.1. 大多数现实生活中的应用程序(如推荐引擎或个性化应用程序)所需的模型比社交网络示例的单顶点、单边数据模型复杂得多 1.2. 三种高级数据建模技术1.2.1. 使用通用标签提高性能1.2.2. 将属性移动到边,以简化遍历1.2.3. 对数据进行反…

AWQ:激活-软件权重量化

AWQ:激活-软件权重量化 大型语言模型(LLM)已经改变了许多人工智能应用程序。设备上的LLM变得越来越重要:在边缘设备上本地运行LLM,可以降低云计算成本并保护用户隐私。然而,天文模型的大小和有限的硬件资源带来了巨大的部署挑战。提出了激活感知权重量化(AWQ),这是一种…

用于显微镜的掩模自编码器是细胞生物学的可扩展学习

用于显微镜的掩模自编码器是细胞生物学的可扩展学习将显微镜图像特征化用于生物研究仍然是一个重大挑战,特别是对于跨越数百万张图像的大规模实验。这项工作探讨了弱监督分类器和自监督掩码自编码器(MAE),在使用越来越大的模型骨干和显微镜数据集进行训练时的缩放特性。结果…

转发:《AI芯片开发核心技术详解》、《智能汽车传感器:原理设计应用》新书推荐

由清华大学出版社资深编辑赵佳霓老师策划编辑的新书《AI芯片开发核心技术详解》已经出版,京东、淘宝天猫、当当等网上,相应陆陆续续可以购买。该书强力解析AI芯片的核心技术开发,内容翔实、知识点新颖、实践性很强、图文并茂。 由清华大学出版社资深编辑赵佳霓老师…

博客园修饰:音乐播放器+鼠标特效

音乐播放器首先申请js权限然后在页脚html代码中添加<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css"> <script src="https://blog-static.cnblogs.com/files/yjlaugus/APlayer.min.js&quo…

45. jQuery

1. jQuery介绍 1.1 概念jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 比如 HTML 文档遍历和操作、事件处理、 动画和 Ajax 通过易于使用的 API 变得更加简单,该 API 可以在 多种浏览器。结合了多功能性和 可扩展性,jQuery 改变了数百万人的编写方式 JavaScript …

服务治理Consul篇

服务中心Consul 光从名字上就能看出他是个头头。Consul的本意是“领事,总督”。就像战场上的将军,带一帮喽啰去打仗,首先他要有个花名册,记录下他们有哪些战士,姓甚名谁,抡大刀还是耍长枪,他要知道哪个战士的能力如何,该对付多少敌人,哪个战士失踪了,或者战伤了,该不…

数据库高可用性与容灾

title: 数据库高可用性与容灾 date: 2024/12/19 updated: 2024/12/19 author: cmdragon excerpt: 在现代企业中,数据库的高可用性和容灾能力至关重要。为了保证业务的连续性,必须确保数据库在发生故障或灾难时能够快速恢复和持续可用。将探讨实现数据库高可用性和容灾的策略,…

Redis 持久化揭秘:选择 RDB、AOF 还是混合持久化?

Redis 是一个内存数据库,意味着它主要将数据存储在内存中,从而能够提供极高的性能。然而,作为内存数据库,Redis 默认情况下的数据不会永久保存。为了确保数据在重启或故障后能够恢复,Redis 提供了几种 **持久化机制**。这些机制允许 Redis 将内存中的数据保存到硬盘上,从…

【甲方安全】金融行业+网络安全合规

一、金融机构安全建设需求分析框架 由于金融数据的敏感性和金融交易的重要性,使得金融机构成为网络攻击行为的重点目标,也使金融机构成为网络安全监管的重点关注对象。 金融机构在进行网络安全需求分析和安全体系建设时,建议从安全建设的外部和内部两方面的驱动力进行分析,…