学习笔记（十二）：ArkUi-相对布局 (RelativeContainer)

基本概念

• 锚点：通过锚点设置当前元素基于哪个元素确定位置。

• 对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。

锚点设置

锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。

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

为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“__container__”，其余子元素的ID通过id属性设置。

不设置id的组件能显示，但是不能被其他子组件作为锚点，相对布局容器会为其拼接id，此id的规律无法被应用感知。

注意：互相依赖，环形依赖时容器内子组件全部不绘制。同方向上两个以上位置设置锚点，但锚点位置逆序时此子组件大小为0，即不绘制。

 

使用格式：

.alignRules(
          {
            right:{anchor:'first',align:HorizontalAlign.Start},
            top:{anchor:'first',align:VerticalAlign.Bottom}
          }
)

.alignRules(
　　{
　　　　方向:{anchor: 锚点id,align: 对齐方式}
　　}
)

 

 

一、实现一个相对父容器右上角显示的子元素

 

二、实现两个子元素相对排列

元素一（id:"first"）相对父容器右上角排列，

要求元素二（id:"second"）相对与元素一实现

1、元素二顶部在元素一下方

2、元素二右侧在元素二左侧

 

子组件位置偏移

子组件经过相对位置对齐后，位置可能还不是目标位置，开发者可根据需要进行额外偏移设置offset

.offset({x:-40,y:-20})