HarmonyOS鸿蒙Next中相对布局怎么使用

相对布局（RelativeContainer） 是一种非常强大和灵活的布局方式，它允许组件相对于父容器或其他兄弟组件来确定自己的位置。

相对布局的核心思想是：为容器内的每个子组件定义一系列约束规则（constraints），这些规则规定了该组件与父容器或其他兄弟组件之间的相对位置关系。

• 锚点（Anchor）：相对布局的参考点。可以是父容器的四条边（top, bottom, start, end），也可以是其他兄弟组件的ID。
• 约束（Constraint）：一条规则，格式为 {锚点}: {目标}。例如 top: { anchor: '__container__', align: Top } 表示“我的顶部与父容器的顶部对齐”。
• 必须设置ID：任何需要被其他组件引用的子组件必须设置唯一的ID（使用 id() 方法）。父容器自身有一个默认ID：__container__。

@Entry
@Component
struct Index {
  build() {
    Column(){
      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor(Color.Red)
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            left: {anchor: "__container__", align: HorizontalAlign.Start}
          }).id("row1")
      }
      .width(300).height(300)

      .border({width:2, color: "#6699FF"}).id("aa")
    }
    .height('100%')
    .width('100%')
  }
}