HarmonyOS应用开发学习笔记 UI布局学习相对布局（RelativeContainer）

本文主要是介绍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 ID	RelativeContainer父组件为锚点，__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。

在这里插入图片描述