鸿蒙UI布局-相对布局

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Row().width(100).height(100).backgroundColor(Color.Black).alignRules({
        top: {anchor: '__container__', align: VerticalAlign.Top},
        middle: {anchor: '__container__', align: HorizontalAlign.Center}
      }).id("r1")
      Row().width(100).height(100).backgroundColor(Color.Green).alignRules({
        top: {anchor: 'r1', align: VerticalAlign.Bottom}
      }).id("r2")
      Row().width(100).height(100).backgroundColor(Color.Orange).alignRules({
        left: {anchor: 'r1', align: HorizontalAlign.End},
        top: {anchor: 'r1', align: VerticalAlign.Bottom}
      }).id("r3")
      Row().width(100).height(100).backgroundColor(Color.Pink).alignRules({
        top: {anchor: 'r2', align: VerticalAlign.Bottom},
        middle: {anchor: '__container__', align: HorizontalAlign.Center}
      }).id("r4")
      Row().width(100).height(100).backgroundColor(Color.Blue).alignRules({
        top: {anchor: 'r1', align: VerticalAlign.Bottom},
        middle: {anchor: '__container__', align: HorizontalAlign.Center}
      }).id("r5")
    }.width(300).height(300).border({width: 1, color: Color.Red, radius: 50})
  }


}