HarmonyOS鸿蒙学习笔记(25)相对布局 RelativeContainer详细说明
RelativeContainer 简介
- 前言
- 核心概念
- 官方实例
- 官方实例改造
- 蓝色方块改造
- center 属性说明
- 参考资料
前言
RelativeContainer是鸿蒙的相对布局组件,它的布局很灵活,可以很方便的控制各个子UI 组件的相对位置,其布局理念有点类似于android的约束布局ConstraintLayout,如果你熟练使用过android的约束布局,那么鸿蒙的相对布局组件理解起来也很快。
核心概念
相对布局分为水平和竖直两个方向,其中水平方向为左、中、右,对应left, middle, right,对应容器的HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End。其中middle对应的是子布局水平方向的中心线。

垂直方向上、中、下,对应top, center, bottom,对应容器的VerticalAlign.Top, VerticalAlign.Center, VerticalAlign.Bottom。其中
center对应的是子布局竖直方向的中心线:

关于center的示例,见文章底部最后一个章节。
官方实例
如下图,几个颜色方块分别位于父布局的如下位置。其中父布局是一个带有边框的300*300RelativeContainer。其默认id是__container__。五个方块的id分别是颜色所代表的英文。

完整带有详细注释的代码如下:
struct Index {build() {Row(){RelativeContainer() {//红色方块,位于左上角Row().width(100).height(100).backgroundColor(Color.Red).alignRules({//上边与父布局顶部对齐top: {anchor: "__container__", align: VerticalAlign.Top},//左边与父布局的左边对齐left: {anchor: "__container__", align: HorizontalAlign.Start}}).id("red")//黄色方块,位于右上角Row().width(100).height(100).backgroundColor(Color.Yellow).alignRules({//上边与父布局顶部对齐top: {anchor: "__container__", align: VerticalAlign.Top},//右边与父布局右边对齐right: {anchor: "__container__", align: HorizontalAlign.End}}).id("yellow")//蓝色方块,位于中心Row().height(100)//.backgroundColor(Color.Blue).alignRules({//顶部于红色方块底部对齐top: {anchor: "red", align: VerticalAlign.Bottom},//左边与红色方块的右边对齐left: {anchor: "red", align: HorizontalAlign.End},//右边与黄色方块的左边对齐right: {anchor: "yellow", align: HorizontalAlign.Start}}).id("blue")//粉色方块:位于分布局左下角Row().backgroundColor(Color.Pink).alignRules({//顶部与蓝色方块的下边对齐top: {anchor: "blue", align: VerticalAlign.Bottom},//底部与父布局底部对齐bottom: {anchor: "__container__", align: VerticalAlign.Bottom},//左边与父布局左边对齐left: {anchor: "__container__", align: HorizontalAlign.Start},//右边与红色方块的右边对齐right: {anchor: "red", align: HorizontalAlign.End}}).id("pink")//绿色方块:位于父布局右下角Row().backgroundColor(Color.Green).alignRules({//顶部与蓝色方块底部对齐top: {anchor: "blue", align: VerticalAlign.Bottom},//底部与父布局底部对齐bottom: {anchor: "__container__", align: VerticalAlign.Bottom},//左边与黄色方块左边对齐left: {anchor: "yellow", align: HorizontalAlign.Start},//右边与父布局右边对齐right: {anchor: "__container__", align: HorizontalAlign.End}}).id("green")}.width(300).height(300).alignSelf(ItemAlign.Center).border({width:2, color: "#6699FF"})}.height('100%').margin({ left: 30,top:100 })}
}
官方实例改造
注意上面代码,下面两个方块并没有设置宽高属性,只不过根据他们的位置约束而自动计算出来的大小。所以上面的代码我们也可以改成如下方式,来体会下相对布局的灵活性。我们为下面两个方块手动设置宽高。
struct Index {build() {Row(){RelativeContainer() {//省略了红 黄 蓝三个布局的代码,因为没有改动//粉色方块:位于分布局左下角Row().width(100).height(100).backgroundColor(Color.Pink).alignRules({//底部与父布局底部对齐bottom: {anchor: "__container__", align: VerticalAlign.Bottom},//左边与父布局左边对齐left: {anchor: "__container__", align: HorizontalAlign.Start},}).id("pink")//绿色方块:位于父布局右下角Row().width(100).height(100).backgroundColor(Color.Green).alignRules({//底部与父布局底部对齐bottom: {anchor: "__container__", align: VerticalAlign.Bottom},//右边与父布局右边对齐right: {anchor: "__container__", align: HorizontalAlign.End}}).id("green")}.width(300).height(300).alignSelf(ItemAlign.Center).border({width:2, color: "#6699FF"})}.height('100%').margin({ left: 30,top:100 })}
}
蓝色方块改造
蓝色方块居中的代码读上去有一丢丢困难,所以可以在设置宽高之后,使用center和middle组件让其居中
//蓝色方块,位于中心Row().height(100).width(100)//设置宽和高.backgroundColor(Color.Blue).alignRules({center: { anchor: "__container__", align: VerticalAlign.Center },middle: { anchor: "__container__", align: HorizontalAlign.Center }}).id("blue")
center 属性说明
center属性是垂直方向居中的属性,他的align也有 Top、Center、Bottom属性,我们将上面代码的Center,改成如下所示:
Row().height(100).width(100).backgroundColor(Color.Blue).alignRules({center: { anchor: "__container__", align: VerticalAlign.Top },middle: { anchor: "__container__", align: HorizontalAlign.Center }}).id("blue")
蓝色方块就位于父布局上边界的中心,也就是父布局上边界将蓝色方块一份为二:

也就是说对于center属性来说,这个center指的是子布局的竖直方向的中心线
1、 VerticalAlign.Top:子布局的中心位置与父布局上边界对齐
2、 VerticalAlign.Center:子布局的竖直方向的中心线与父布局的中心线对齐
3、 VerticalAlign.Bottom:子布局的竖直方向的中心线与父布局的下边界对齐。
同理可以理解水平方向的middle属性。在此不再赘述。
参考资料
1、HarmonyOS官方文档1
2、相对布局(RelativeContainer)官方文档2
3、RelativeContainer 官方文档3
相关文章:
HarmonyOS鸿蒙学习笔记(25)相对布局 RelativeContainer详细说明
RelativeContainer 简介 前言核心概念官方实例官方实例改造蓝色方块改造center 属性说明参考资料 前言 RelativeContainer是鸿蒙的相对布局组件,它的布局很灵活,可以很方便的控制各个子UI 组件的相对位置,其布局理念有点类似于android的约束…...
自然语言处理学习中英文翻译语料库
在自然语言处理(NLP)领域,学习中英文翻译需要高质量的双语语料库。以下是一些常用的中英文翻译语料库资源: OpenSubtitles: 网站: OpenSubtitles 描述:OpenSubtitles 提供了大量的电影和电视剧…...
可视化数据科学平台在信贷领域应用系列二:数据清洗
上一篇文章中,某互联网银行零售信贷风险建模专家使用数据科学平台Altair RapidMiner——完成了数据探索工作,《可视化数据科学平台在信贷领域应用系列一:数据探索》。本次这位建模专家再次和大家分享数据准备的第二步骤,数据清洗。…...
JS面试题:hash和history的区别
一、hash 模式和 history 模式的介绍 由于 Vue 项目为单页面应用,所以整个项目在开发和构建过程中,仅存在一个HTML物理文件。通过路由系统可以实现将项目的组件与可访问的URL路径进行绑定。由于Vue项目只有一个HTML物理文件,切换页面时既需要…...
GEE案例——归一化差异水体指数丰水期、枯水期的水域面积和水深分析(青海湖为例)
简介 水深反演是指利用遥感技术从航空或卫星平台上获取的数据来推断水体的深度信息。这种技术在海洋学、湖泊和河流的科学研究与管理中非常重要。以下是几种常用的水深反演方法: 1. **光学遥感反演**: - 基于水体颜色和透明度的变化与水深的关系,使用光学遥感影像(如L…...
机器视觉检测--相机
一,相机就是CCD么? 通常,我们把相机都叫作CCD,CCD已经成了相机的代名词。其实很可能正在使用的是CMOS。CCD以及CMOS都称为感光元件,都是将光学图像转换为电子信号的半导体元件。他们在检测光时都采用光电二极管&#…...
【人工智能】第四部分:ChatGPT的技术实现
人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…...
小程序配置自定义tabBar及异形tabBar配置操作
什么是tabBar? 小程序的tabbar是指小程序底部的一组固定导航按钮,通常包含2-5个按钮,用于快速切换小程序的不同页面。每个按钮都有一个图标和文本标签,点击按钮可以切换到对应的页面。tabbar通常放置在小程序的底部,以…...
解析《动物园规则怪谈》【逻辑】
鉴赏《动物园规则怪谈》【逻辑】 前言版权推荐鉴赏《动物园规则怪谈》推理游客正方“它”方其他物品 不同规则或纸条的对比联系出现的地方及联系游客入园历程:被“它”污染的过程鉴赏升华 最后 前言 2024-5-31 13:05:38 以下内容源自《【逻辑】》 仅供学习交流使用…...
上传RKP 证书签名请求息上传到 Google 的后端服务器
上传证书签名请求 1.准备环境:OK pip3 install google-auth2.13.0 requests2.28下载 device_info_uploader.py 。 没找到先跳过 选项 1:通过 GCP 帐户使用 device_info_uploader.py 运行脚本。 ./device_info_uploader.py --credentials /secure/s…...
Debian和ubuntu 嵌入式的系统的 区别
随着开源操作系统的日益流行,Debian和Ubuntu这两个基于Linux的发行版本成为了众多开发者和系统管理员的首选。它们各自拥有独特的优势和特点,那么,在选择时,哪一个更适合你呢?接下来,我们将深入探讨两者的关…...
HTML旋转照片盒子
效果图 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible" content…...
【UE5 刺客信条动态地面复刻】实现无界地面01:动态生成
2024.6.4更新 昨天半夜意识到生成Cube的方案不合适,又开始到处找动态地面的方法,发现了我想要的效果直接可以用nigara实现!!!! 于是这个部分就暂时告一段落,今季开始新的方向的学习。 为了快速…...
AI产品经理系列-如何使用kimi快速撰写用户故事(含提示词)
在AI时代,可能人人都可成为产品经理。 之前我们聊过如何使用kimi协助完成产品需求文档,如何写竞品分析报告,这一篇我们聊聊用户故事,如何使用kimi协助撰写产品需求文档中的用户故事。 在此之前我们先了解下什么是用户故事&#…...
MySQL索引与事务
前言👀~ 紧接着数据库的相关知识,今天讲解MySQL面试中频繁被问到的知识点,索引与事务!!! 如果各位对文章的内容感兴趣的话,请点点小赞,关注一手不迷路,如果内容有什么问题的话,欢迎各位评论纠正…...
『大模型笔记』从基础原理出发提升深度学习性能
从基础原理出发提升深度学习性能 文章目录 一. 从基础原理出发提升深度学习性能1.1. 计算(compute)1.2. 带宽(Bandwidth)1.2.1 关于内存带宽成本的推理(Reasoning about Memory-Bandwidth Costs)1.3. 开销(Overhead)二. 总结三. 参考文献Making Deep Learning Go Brrrr F…...
【二叉树】Leetcode 222. 完全二叉树的节点个数【简单】
完全二叉树的节点个数 你一棵 完全二叉树 的根节点 root ,求出该树的节点个数。 完全二叉树 的定义如下:在完全二叉树中,除了最底层节点可能没填满外,其余每层节点数都达到最大值,并且最下面一层的节点都集中在该层最…...
golang界面设计器,全网少见
今天登录govcl的网站,无意中看到有个简易UI设计器。 对于golang的UI专用设计器,还没在网上真正见过。 之前也用govcl来做过两三个桌面应用,好用是好用,不过要安装Lazarus的IDE来拖动设计UI,还要配置很多东西࿰…...
如何在GlobalMapper中加载高清卫星影像?
GlobalMapper在GIS行业几乎无人不知,无人不晓,但它可以直接加载卫星影像也许就不是每个人都知道的了。 这里就来分享一下如何在GlobalMapper中加载高清卫星影像,并可以在文末查看领取软件安装包和图源的方法。 如何加载高清图源 首先&…...
【机器学习】解锁AI密码:神经网络算法详解与前沿探索
👀传送门👀 🔍引言🍀神经网络的基本原理🚀神经网络的结构📕神经网络的训练过程🚆神经网络的应用实例💖未来发展趋势💖结语 🔍引言 随着人工智能技术的飞速发…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙(HarmonyOS5)中集成百度地图,可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API,可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具:下载安装 De…...
【iOS】 Block再学习
iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...
