鸿蒙开发相对布局RelativeContainer

元素位置

在水平方向上有left，middle，right三个位置，和VerticalAlign.Top/.Center/.Bottom对应。
在垂直方向上有top，center，bottom三个位置，和HorizontalAlign.Start/.Center/.End对应。

锚点设置

锚点必须有id
RelativeContainer的id：默认为“container”，其余子元素的id：通过id属性设置

对齐方式-垂直

设置锚点anchor之后，可以通过align设置相对于锚点的对齐位置，在垂直方向上，对齐位置可以设置为VerticalAlign.Top/.Center/.Bottom，若同方向上设置两个以上锚点，垂直方向Top和Center优先

子组件位置偏移

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

组件尺寸
子组件尺寸大小不会受到相对布局规则的影响。若子组件某个方向上设置两个或以上alignRules时最好不设置此方向尺寸大小，否则对齐规则确定的组件尺寸与开发者设置的尺寸可能产生冲突。

代码示例

@Entry
@Component
struct Index {

  build() {
    RelativeContainer() {
      Row(){Text('第一个')}.width(100).height(100)
      .id('item1')
      .backgroundColor(Color.Red)
      .alignRules({
        left:{anchor:"__container__",align:HorizontalAlign.Start},
        top:{anchor:"__container__",align:VerticalAlign.Top}
      })

      Row(){Text('第二个')}.width(100).height(100)
      .id('item2')
      .backgroundColor(Color.Yellow)
      .alignRules({
        middle:{anchor:"__container__",align:HorizontalAlign.Center},
        center:{anchor:"__container__",align:VerticalAlign.Center}
      })

      Row(){Text('第三个')}.width(100).height(100)
      .id('item3')
      .backgroundColor(Color.Green)
      .alignRules({
        right:{anchor:"__container__",align:HorizontalAlign.End},
        bottom:{anchor:"__container__",align:VerticalAlign.Bottom}
      })

      Row(){Text('与子组件偏移')}.width(100).height(100)
      .id('item4')
      .backgroundColor(Color.Orange)
      .alignRules({
        left:{anchor:"item2",align:HorizontalAlign.End},
        bottom:{anchor:"item3",align:VerticalAlign.Top}
      })

      Row(){Text('位置偏移')}.width(100).height(100)
      .id('item5')
      .backgroundColor(Color.Brown)
      .alignRules({
        left:{anchor:"item2",align:HorizontalAlign.End},
        bottom:{anchor:"item3",align:VerticalAlign.Top}
      })
      .offset({//子组件位置偏移
        x:-80,
        y:-40
      })
      Row(){Text('同方向多个对齐')}
      .id('item6')
      .backgroundColor(Color.Pink)
      .alignRules({
        left:{anchor:"item2",align:HorizontalAlign.End},
        right:{anchor:"item3",align:HorizontalAlign.Start},
        // bottom:{anchor:"__container__",align:VerticalAlign.Bottom},
        top:{anchor:"__container__",align:VerticalAlign.Top}
      })
    }


  }
}

效果图