Android视角看鸿蒙第十二课-鸿蒙的布局之相对布局RelativeContainer

Android视角看鸿蒙第十二课-鸿蒙的布局之相对布局RelativeContainer

导读

相对布局和线性、层叠布局一样都是类似于Android布局的,之前两篇文章已经了解线性、层叠布局的使用方法,这篇文章一起来学习下鸿蒙中的相对布局。
之前的文章中,我偶然提起过,我不太喜欢使用相对布局。
我思考了下为什么会有这种想法呢?
相对布局写起来太麻烦了
Android中虽然可以使用Xml来设置UI,然而相对linearlayout和FrameLayout,至少要多写2条依赖属性,比如是在哪个组件的右侧,在那个组件的下方,而Linear或者Frame不用
相对布局阅读成本高
linearlayout和FrameLayout在阅读代码的时候,组件的层级一目了然,相对布局则需要阅读每个组件的依赖关系
相对布局需要设置每个锚点的ID
Android中相对布局是通过ID来设置依赖关系的,有的组件本身不需要被JAVA代码调用,比如只是个分割线,但因为有组件需要依赖他,则必须设置ID。不够简洁,起ID也费脑子

个人拙见,欢迎探讨。
接下来一起看看鸿蒙中的相对布局吧。

相对布局RelativeContainer

概述

RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。下图是一个RelativeContainer的概念图,图中的虚线表示位置的依赖关系。
在这里插入图片描述

看起来和Android没什么差别,可以依赖兄弟组件,也可以依赖父布局,同样不可以依赖兄弟的儿子。哈哈

锚点设置

锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上,可以设置left、middle、right的锚点。在竖直方向上,可以设置top、center、bottom的锚点。为了明确定义锚点,必须为RelativeContainer及其子元素设置ID,用于指定锚点信息。ID默认为“container,其余子元素的ID通过id属性设置。
未设置ID的子元素在RelativeContainer中不会显示。

这一段话中的关键点不少,
1、RelativeContainer有默认ID
2、子元素必须设置ID,不设置ID的话不显示

相对布局的代码写法

RelativeContainer父组件为锚点,__container__代表父容器的id。

RelativeContainer() {Row()// 添加其他属性.alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },left: { anchor: '__container__', align: HorizontalAlign.Start }}).id("row1")Row()....alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },right: { anchor: '__container__', align: HorizontalAlign.End }}).id("row2")
}
...

在这里插入图片描述

设置相对于锚点的对齐位置

设置了锚点之后,可以通过align设置相对于锚点的对齐位置。

在水平方向上,对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。

在这里插入图片描述
在竖直方向上,对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。
在这里插入图片描述

场景实例

@Entry
@Component
struct Index {build() {Row() {RelativeContainer() {Row().width(100).height(100).backgroundColor('#FF3333').alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },  //以父容器为锚点,竖直方向顶头对齐middle: { anchor: '__container__', align: HorizontalAlign.Center }  //以父容器为锚点,水平方向居中对齐}).id('row1')  //设置锚点为row1Row() {Image($r('app.media.icon'))}.height(100).width(100).alignRules({top: { anchor: 'row1', align: VerticalAlign.Bottom },  //以row1组件为锚点,竖直方向底端对齐left: { anchor: 'row1', align: HorizontalAlign.Start }  //以row1组件为锚点,水平方向开头对齐}).id('row2')  //设置锚点为row2Row().width(100).height(100).backgroundColor('#FFCC00').alignRules({top: { anchor: 'row2', align: VerticalAlign.Top }}).id('row3')  //设置锚点为row3Row().width(100).height(100).backgroundColor('#FF9966').alignRules({top: { anchor: 'row2', align: VerticalAlign.Top },left: { anchor: 'row2', align: HorizontalAlign.End },}).id('row4')  //设置锚点为row4Row().width(100).height(100).backgroundColor('#FF66FF').alignRules({top: { anchor: 'row2', align: VerticalAlign.Bottom },middle: { anchor: 'row2', align: HorizontalAlign.Center }}).id('row5')  //设置锚点为row5}.width(300).height(300).border({ width: 2, color: '#6699FF' })}.height('100%').margin({ left: 30 })}
}

在这里插入图片描述

结语

和Android差不多吧,语法熟悉下就可以了。

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

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

相关文章

VNISEdit 制作安装包

1. 环境依赖 1.1. NSIS 下载 下载地址:https://nsis.sourceforge.io/Download 1.2. VNISEdit 下载 下载地址1:https://sourceforge.net/projects/hmne/ 下载 exe 安装。 下载地址2:https://hmne.sourceforge.net/ 可以下载 exe 安装。也…

centos 安装配置文件中心 nacos2.2.3 稳定版

安装mysql 8 参考文章 centos7搭建mysql5.6 && mysql 8.0_centos7 mysql5.6-CSDN博客 安装 jdk 17 官网下载 对应的版本 Java Downloads | Oracle wget https://download.java.net/java/GA/jdk17.0.2/dfd4a8d0985749f896bed50d7138ee7f/8/GPL/openjdk-17.0.2_l…

在excel中,如何在一个表中删除和另一个表中相同的数据?

现在有A表,是活动全部人员的姓名和学号,B表是该活动中获得优秀人员的姓名和学号, 怎么提取没有获得优秀人员的名单? 这里提供两个使用excel基础功能的操作方法。 1.条件格式自动筛选 1.1按住Ctrl键,选中全表中的姓…

Flutter 上架如何解决 ITMS-91053 问题

最近,我的 Flutter App 发布到 TestFlight 后,就会收到一封邮件:The uploaded build for YOUR APP has one or more issues. 上面的邮件主要是说,我的 App 缺少了调用 API 的声明,以前从来没看到过,上网一查…

SpringBoot+Vue开发记录(三)

说明:本篇文章的主要内容为需求分析。需求分析这一部分很重要,也稍微有点子难搞,所以本篇文章里的有些内容会有失偏颇。 一、准备步骤 我打算做一个刷题项目,但是具体这个项目该怎么做,我是一头雾水。 所以就要先进行…

消灭AI“耗电巨兽”?暴雨服务器推出液冷节能降耗算力方案

在科技飞速发展的今天,人工智能已成为驱动未来的重要力量。随着AI及大模型技术的进一步普及和应用场景的拓宽,相关算力需求呈指数级增长,大规模的AI训练和推理过程均需消耗大量电力,如同一个巨大的电力黑洞,吞噬着海量…

Elasticsearch集群部署(Linux)

1. 准备环境 这里准备三台Linux虚拟机,用于配置Elasticsearch集群和部署可视化工具Kibana。 角色IP域名集群名称节点名称版本操作系统ES192.168.243.100linux100cluster-eses-node-1007.12.0CentOS 7192.168.243.101linux101cluster-eses-node-101192.168.243.102…

docker容器内彻底移除iptables服务的实现方法

背景 我创建的容器使用的是centos6的标准镜像,所以内置了iptables服务。容器启动后iptables服务默认就启动了。iptables设置的规则默认是所有流量都无法通行。而对于服务器的管理使用的是宿主机的防火墙。这样就导致在实现用iptables动态给容器添加端口映射时不成功…

coredns部署

coredns部署 coredns部署 一:coredns-rbac.yaml apiVersion: v1 kind: ServiceAccount metadata:name: corednsnamespace: kube-systemlabels:kubernetes.io/cluster-service: "true"addonmanager.kubernetes.io/mode: Reconcile --- apiVersion: rbac…

Hive服务详解

Hive服务 HiveServer2、Hive Metastore 服务服务共同构成了 Hive 生态系统中的核心功能,分别负责管理元数据和提供数据查询服务,为用户提供了一个方便、高效的方式来访问和操作存储在 Hive 中的数据。 1. Hive 查询服务(HiveServer2&#xf…

关于路由过滤、路由策略的实验eNSP

具体接口IP地址如下图所示 第一步:配置IP R1: [R1]int g 0/0/0 [R1-GigabitEthernet0/0/0]ip ad [R1-GigabitEthernet0/0/0]ip address 100.1.1.1 24 Apr 23 2024 19:35:38-08:00 R1 %%01IFNET/4/LINK_STATE(l)[0]:The line protocol IP on the interface Giga…

【论文笔记】RS-Mamba for Large Remote Sensing Image Dense Prediction(附Code)

论文作者提出了RS-Mamba(RSM)用于高分辨率遥感图像遥感的密集预测任务。RSM设计用于模拟具有线性复杂性的遥感图像的全局特征,使其能够有效地处理大型VHR图像。它采用全向选择性扫描模块,从多个方向对图像进行全局建模,从多个方向捕捉大的空间…

【快速入门 LVGL】-- 5、Gui Guider界面移植到STM32工程

上篇,我们已学习:【快速入门 LVGL】-- 4、显示中文 工程中添加了两个按钮作示范。运行效果如图: 本篇:把Gui Guider设计好的界面,移植到STM32工程。 特别地: 在使用Gui Guider进行界面设计时,应…

微信小程序 讯飞录音 点击按钮录音内容转文字

<page-meta page-style"{{ showPolish ? overflow: hidden; : }}" /> <view class"wrap"> <view class"header-tab" style"justify-content: {{typeList.length > 2 ? start : center}}"><view class&quo…

S-Edge网关:柔性部署,让物联网接入更统一

S-Edge网关是什么&#xff1f; 网关是在实际物理世界与虚拟网络世界相连接的交叉点&#xff0c;为了让这个交叉点尽可能的复用&#xff0c;无需每种设备都配套一种连接方式&#xff0c;边缘网关主要就是用于传感器等物理设备与网络实现数据交互的通用设备&#xff0c;也称为物…

贪心算法-活动安排问题和背包问题

实验6贪心算法-活动安排问题和背包问题 实验目的&#xff1a; 理解贪心算法的基本思想运用贪心算法解决实际问题 实验内容&#xff1a; 采用贪心方法编程实现以下问题的算法 1.如何安排下列活动使得使用的活动场所最少&#xff0c;并给出具体的安排方法。 活动 a b c …

Leetcode算法训练日记 | day34

专题九 贪心算法 一、K次取反后最大化的数组和 1.题目 Leetcode&#xff1a;第 1005 题 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个…

【大语言模型LLM】- Meta开源推出的新一代大语言模型 Llama 3

&#x1f525;博客主页&#xff1a;西瓜WiFi &#x1f3a5;系列专栏&#xff1a;《大语言模型》 很多非常有趣的模型&#xff0c;值得收藏&#xff0c;满足大家的收集癖&#xff01; 如果觉得有用&#xff0c;请三连&#x1f44d;⭐❤️&#xff0c;谢谢&#xff01; 长期不…

git常见命令(成长版)

ps&#xff1a;所谓成长版就是后续可能还会添加命令&#xff1a; 1.删除本地分支&#xff1a; git branch -d 分支名 2.拉取代码后默认master分支&#xff0c;切换到线上其他分支&#xff1a; &#xff08;1&#xff09;查看线上所有分支&#xff1a; git branch -a &#…

【STM32+HAL+Proteus】系列学习教程4---GPIO输入模式(独立按键)

实现目标 1、掌握GPIO 输入模式控制 2、学会STM32CubeMX配置GPIO的输入模式 3、具体目标&#xff1a;1、按键K1按下&#xff0c;LED1点亮&#xff1b;2、按键K2按下&#xff0c;LED1熄灭&#xff1b;2、按键K3按下&#xff0c;LED2状态取反&#xff1b; 一、STM32 GPIO 输入…