鸿蒙开发：相对布局RelativeContainer

前言

代码案例基于Api13。

最新的DevEco Studio，在创建一个新项目的时候，官方已经默认把RelativeContainer组件做为根布局使用了，由此可见，RelativeContainer组件的重要性；相对于其它的容器组件，它的出现，解决了一个实际开发中的重要问题，那就是复杂场景中的元素对齐。

如下的组件之间的布局，如果没有RelativeContainer组件的情况下，我们该如何实现呢？显然需要嵌套很多容器组件，或者进行坐标定位才可以进行实现，有了RelativeContainer组件之后，我们就可以根据相对位置进行摆放就可以了。

相关代码实现：

RelativeContainer() {
      Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)

      Text("组件2")
        .width(100)
        .height(100)
        .id("view_2")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Orange)
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })

      Text("组件3")
        .width(100)
        .height(100)
        .id("view_3")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Yellow)
        .alignRules({
          top: { anchor: "view_1", align: VerticalAlign.Bottom },
          left: { anchor: "view_1", align: HorizontalAlign.End },
          right: { anchor: "view_2", align: HorizontalAlign.Start }
        })

      Text("组件4")
        .width(100)
        .height(100)
        .id("view_4")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Blue)
        .alignRules({
          top: { anchor: "view_3", align: VerticalAlign.Bottom }
        })

      Text("组件5")
        .width(100)
        .height(100)
        .id("view_5")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Brown)
        .alignRules({
          top: { anchor: "view_3", align: VerticalAlign.Bottom },
          left: { anchor: "view_2", align: HorizontalAlign.Start }
        })
    }.width(300)

熟练运用RelativeContainer组件，也就是必须要知道相对位置的摆放，也就是相对谁，如何摆放。

使用规则

ID声明

B组件在A组件的右边，B组件如何知道A组件的位置呢？在相对布局中，通过给组件设置唯一标识id，来标记每一个组件，正如茫茫人海中，你的身份证就是你的唯一标识，设置id，非常重要，如果没有这个id，就会缺少对应的锚点组件，在相对布局中就无法实现位置的相对摆放。

Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)

位置摆放

通过id我们确定了锚点组件，但是相对这个锚点组件，我们是在它的左边，右边，还是上边，下边，就需要控制其对应的位置。

通过alignRules属性来控制当前组件的位置，有左上右下，水平居中，垂直居中等属性，每个属性对应着有两个参数，一个是anchor参数，锚点组件，一个是align，也就是位置，代码格式如下：

 .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })

anchor设置为__container__，就是对应的是相对父组件，如果是确定的ID，那么就是ID对应的锚点组件。

align分为横向和纵向，水平方向为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End，分别代表的是，左中右，垂直方向为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom，代表着的是上中下。

居中案例

例举一个很简单的案例，让一个组件居中展示，那么就是相对于父容器设置，代码如下：

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {

      Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })

    }
  }
}

效果如下图展示：

当然了，除了直接左上右下四个属性之外，我们有还可以直接设置水平居中和垂直居中属性，效果是一模一样的。

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {

      Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center },
        })
    }
  }
}

锚点组件上边

在一个组件的上边，我们需要设置的是bottom属性，也就是底部在锚点组件的上边，然后结合锚点组件，在对应的设置其它属性，比如锚点组件是居中的，这里我们加了相对于父容器水平居中的属性middle。

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {

      Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center },
        })

      Text("组件2")
        .width(100)
        .height(100)
        .id("view_2")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Orange)
        .alignRules({
          bottom: { anchor: "view_1", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
  }
}

效果如下，可以看到组件2已经设置在了组件1的上边。

锚点组件下边

组件的下边和上边其实是类似的，无非把bottom属性换成top属性，也就是顶部在锚点组件的下面。

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {

      Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center },
        })

      Text("组件2")
        .width(100)
        .height(100)
        .id("view_2")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Orange)
        .alignRules({
          bottom: { anchor: "view_1", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })

      Text("组件3")
        .width(100)
        .height(100)
        .id("view_3")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Yellow)
        .alignRules({
          top: { anchor: "view_1", align: VerticalAlign.Bottom },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
  }
}

效果如下，可以看到组件3已经在组件1的下边。

锚点组件左边

左边，这里使用的是right属性，也就是锚点组件在右边，相关代码如下：

Text("组件4")
        .width(100)
        .height(100)
        .id("view_4")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Pink)
        .alignRules({
          right: { anchor: "view_1", align: HorizontalAlign.Start },
          center: { anchor: "__container__", align: VerticalAlign.Center }
        })

我们看下效果，组件4在锚点组件1的左边。

锚点组件右边

右边，这里使用的是left属性，也就是锚点组件在左边，相关代码如下：

Text("组件5")
        .width(100)
        .height(100)
        .id("view_5")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Brown)
        .alignRules({
          left: { anchor: "view_1", align: HorizontalAlign.End },
          center: { anchor: "__container__", align: VerticalAlign.Center }
        })

我们看下效果，组件5在锚点组件1的右边。

对齐位置

对齐位置，主要是相对于锚点的组件的位置，我们用官方的解释图，如下：

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

在竖直方向上，对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。

相关总结

当然了，RelativeContainer组件还有着其它的属性，但是最重要的也就是位置的摆放，其实也就是相对于锚点组件的摆放；通过上述的案例，我们不难发现，所谓的左上右下，反着来就是对的，比如在锚点上边，我用bottom，在锚点下面，我用top，在实际的开发中，可极大节约我们的开发时间。