HarmonyOS应用开发学习笔记 UI布局学习 相对布局 (RelativeContainer)

UI布局学习 之 相对布局 (RelativeContainer)

官方文档

一、关键字 RelativeContainer, alignRules(适配规则)

			Text('Text02')
            .alignRules({
              left: { anchor: 'text01', align: HorizontalAlign.Start },
              top: { anchor: 'text01', align: VerticalAlign.Bottom },
              bottom: { anchor: 'text01', align: VerticalAlign.Bottom },
              right: { anchor: 'text01', align: HorizontalAlign.End }
            })
  • 其实很好理解 :alignRules{}里面表示:
  • 元素四个方向(left,top,bottom,right),
  • 相对于谁(anchor:‘id’)
  • 的什么位置(HorizontalAlign.Start ,VerticalAlign.Bottom ,VerticalAlign.Bottom, HorizontalAlign.End )

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

在这里插入图片描述
子元素并不完全是上图中的依赖关系。比如,Item4可以以Item2为依赖锚点,也可以以RelativeContainer父容器为依赖锚点。

二、关键:锚点(相对于谁)、对齐方式

项目描述
锚点相对于谁,通过锚点设置当前元素基于哪个元素确定位置。
对齐方式通过对齐方式,设置当前元素是基于锚点的上中下对齐,还是基于锚点的左中右对齐。
RelativeContainer IDRelativeContainer父组件为锚点,__container__代表父容器的id
.alignRules设置对齐方式的关键方法(left、middle、right,top、center、bottom)

为了明确定义锚点,必须为RelativeContainer及其子元素设置ID

  • 在水平方向上,可以设置left、middle、right的锚点。
  • 竖直方向上,可以设置top、center、bottom的锚点。

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

关键点:

  • 1、弄清楚相对于谁,(id是关键)
  • 2、对齐方式的设置(eft、middle、right,top、center、bottom)

1、元素相对于父组件 示例:

在这里插入图片描述

RelativeContainer() {

          Text('Text01')
            .alignRules({
              top: { anchor: '__container__', align: VerticalAlign.Top },
              left: { anchor: '__container__', align: HorizontalAlign.Start }
            }).width(100).height(100).backgroundColor(Color.Red)
            .id('text01')

          Text('Text02')
            .textAlign(TextAlign.Center)
            .alignRules({
              top: { anchor: '__container__', align: VerticalAlign.Top },
              right: { anchor: '__container__', align: HorizontalAlign.End }

            }).width(100).height(100).backgroundColor(Color.Green)
            .id('text02')
          
        }.backgroundColor(Color.Yellow).width('100%').height(500)

2、子元素之间相对布局 以子元素为参照物

  • text02相对于text01
    在这里插入图片描述
    RelativeContainer() {

          Text('Text01')
            .alignRules({
              //相对于父容器,顶部(top)和左边(start)位置
              top: { anchor: '__container__', align: VerticalAlign.Top },
              left: { anchor: '__container__', align: HorizontalAlign.Start }
            })
            .width(100)
            .height(100)
            .backgroundColor(Color.Red)
            .id('text01')


          Text('Text02')
            .textAlign(TextAlign.Center)
            .alignRules({
              //相对于text01(id为('text01')的元素),顶部(top)和id('text01')的底部(Bottom)对齐
              top: { anchor: 'text01', align: VerticalAlign.Bottom },
              left: { anchor: 'text01', align: HorizontalAlign.Start } //顶部(top)和id('text01')的底部(Bottom)对齐
            })
            .margin({ top: 20 })
            .width(100)
            .height(100)
            .backgroundColor(Color.Green)
            .id('text02')

        }.backgroundColor(Color.Yellow).width('100%').height(500)

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

项目描述
水平方向可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。
竖直方向可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

精通推荐算法4:经典DNN框架特征交叉模型 Deep Crossing(面试必备)

微软2016年提出的Deep Crossing模型奠定了深度学习精排模型的基本架构,具有十分重要的意义。它采用“Embedding MLP”的结构,成为目前推荐算法的基本范式。通过深度神经网络,实现大规模特征自动组合,大大减少了对人工构造交叉组合…

(一)Spring Cloud 直击微服务作用、架构应用、hystrix降级

直击微服务作用 微服务架构: 遇到了什么问题? 将单体架构拆分成微服务架构后,如果保证多个服务(项目)正常运行? 哪个技术可以解决这个问题? 微服务技术 服务治理: 服务管理,维护服务与服务之间的关系 这个技术如何使用? netflix/网…

智能化输电线路定位技术:提升电网运行效率的未来发展方向

随着科技的不断发展,电力行业也在逐步引入智能化技术,以提高输电线路的运行效率和安全性。在这篇文章中,恒峰智慧科技将探讨一种新的输电线路定位技术——分布式行波测量技术,它如何帮助我们实现这一目标。 一、分布式故障定位及隐…

游泳耳机排行榜前四名,分享几款值得推荐的游泳耳机

游泳是一项全面锻炼身体的运动,然而,水的阻力有时让人感到运动的笨拙和单调。为了让游泳更具趣味性和挑战性,选择一款高品质的游泳耳机至关重要。以下是游泳耳机排行榜前四名,以及几款强烈推荐的游泳耳机,它们结合防水…

Python教程(22)——Python面向对象的属性和方法

在Python面向对象编程中,属性和方法是类及其对象的重要组成部分。如果说封装、继承和多态是面向对象编程中的思想,那么类的属性和方法就是骨架,因为有属性和方法,面向对象编程才变的有血有肉。 属性 属性是类或对象所拥有的数据&…

UWB 技术及应用

超宽带技术为工业自动化提供独特优势,是首要的室内定位技术。 UWB 因其相对于 RFID、BLE 或 WiFi 等同类技术的众多优势而被认为是室内定位技术的黄金标准。它是基于位置的自动化的理想解决方案。 UWB 结合了短光速脉冲,可在宽带宽上精确测量信号到达时…

linux离线安装docker20.10.7 版本(亲测有效)

目录 1 下载2 安装2.1 新建docker.service2.2 为什么要写docker.service2.3 启动docker2.5 安装docker-compose2.5.1 为什么安装2.5.2 安装 3 /usr/local/bin/ 和 /usr/bin 区别 1 下载 将这个上传到linux 服务器的 随便一个目录 2 安装 解压离线安装包 tar -zxvf docker-20.1…

面试算法105:最大的岛屿

题目 海洋岛屿地图可以用由0、1组成的二维数组表示,水平或竖直方向相连的一组1表示一个岛屿,请计算最大的岛屿的面积(即岛屿中1的数目)。例如,在下图中有4个岛屿,其中最大的岛屿的面积为5。 分析 将岛屿…

局域网实现文件自动同步

软件下载地址: https://dbrwe.blog.csdn.net/article/details/132331206?spm1001.2014.3001.5502 打开【自动上传与同步】配置 在下面 自动同步 自动回传打上钩就可以同步或者下载文件

生成式人工智能市场规模、趋势和统计数据(2024-2026)

生成式人工智能市场规模、趋势和统计数据(2024-2026) 目录 生成式人工智能市场规模、趋势和统计数据(2024-2026)一、生成式人工智能行业亮点二、生成式人工智能市场规模三、生成式人工智能市场增长预测四、生成式人工智能采用统计…

结构型设计模式——适配器模式

适配器模式 这个更加好理解,就是做适配功能的类,例如,现在手机没有了圆形耳机接口,只有Type-C接口,因此你如果还想要使用圆形耳机的话需要买个圆形接口转Type-C的转换器(适配器),这…

再不收藏就晚了,Axure RP Pro 各版本大集合

Axure RP Pro下载链接 https://pan.baidu.com/s/1hRJRY6t0ZONKhdwvykAc3g?pwd0531 1.鼠标右击【Axure RP Pro9.0】压缩包(win11及以上系统需先点击“显示更多选项”)选择【解压到 Axure RP Pro9.0】。 2.打开解压后的文件夹,鼠标右击【Axu…

基于ssm的一家运动鞋店的产品推广网站的设计论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本一家运动鞋店就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息&am…

整理的十大算法和十大排序,分别用汇编语言,C语言,C++,java,python编写实现

整理的十大算法和十大排序,分别用汇编语言,C语言,C,java,python编写实现十大算法,分别用分别用C语言,C,java,python编写实现 Floyd Warshall算法 http://www.net188.com/thread-616-1-1.html …

<软考高项备考>《论文专题 - 57 干系人管理(1) 》

1 论文基础 1.1 写作要点 过程定义、作用写作要点、思路识别干系人识别干系人是定期识别项目干系人,分析和记录他们的利益、参与度、相互依赖性、影响力和对项目成功的潜在影响的过程。作用:使项目团队能够建立对每个干系人或干系人群体的适度关注。本项目里有哪些…

Qt之有趣的数字钟

一.效果 基于网络代码修改,支持时、分、秒;支持滑动、翻页和旋转。 二.实现 #include <QtCore> #include <QPainter> #include <QAction> #include <QWidget> #include <QMainWindow> #include <QTimer> #include <QKeyEvent> #…

TDengine 签约西电电力

近年来&#xff0c;随着云计算和物联网技术的迅猛发展&#xff0c;传统电力行业正朝着数字化、信息化和智能化的大趋势迈进。在传统业务基础上&#xff0c;电力行业构建了信息网络、通信网络和能源网络&#xff0c;致力于实现发电、输电、变电、配电和用电的实时智能联动。在这…

gem5学习(10):创建一个简单的配置脚本——Creating a simple configuration script

目录 一、gem5 configuration scripts 1、An aside on SimObjects 二、Creating a config file 1、导入m5库和SimObjects 2、创建模拟系统 3、设置系统时钟 4、设置内存模拟方式 5、创建CPU 6、创建系统级内存总线 7、连接请求-响应端口 &#xff08;1&#xff09;A…

Word2007导出PDF的正确做法

客户让做个一程序&#xff0c;从Excel读出数据&#xff0c;经过统计、计算生成PDF文档。我的做法是中间安装模板生成Word文档&#xff0c;然后在导出为PDF。 程序完成后需要测试&#xff0c;客户的环境是Win10Office2007。我用虚拟机搭建了环境&#xff0c;发现Word2007竟然无…

使用Nonebot编写QQ机器人

使用 NoneBot 这个工具&#xff0c;来编写 QQ 机器人。 安装基础软件 一、安装 NoneBot 库 直接使用 pip 安装即可 pip install nonebot二、安装酷Q 软件和 HTTP API 插件 酷Q 软件可以直接到官网下载&#xff0c;https://cqp.cc/b/news&#xff0c;或者可以到网盘下载&am…