#鸿蒙通关秘籍#完整示例：如何实现复杂的RelativeContainer布局？

通过相对位置的设置，实现复杂布局。以下为完整的代码示例，展示了如何在RelativeContainer中调整每个子组件的位置。

bash @Entry @Component struct ArkUIClubTest { build() { Column() { RelativeContainer() { Row() .width(100) .height(100) .backgroundColor("#FF3333") .alignRules({ top: { anchor: "container", align: VerticalAlign.Top }, left: { anchor: "container", align: HorizontalAlign.Start } }) .id("row1")

    Row()
      .width(100)
      .height(100)
      .backgroundColor("#FFCC00")
      .alignRules({
        top: {
          anchor: "__container__",
          align: VerticalAlign.Top
        },
        right: {
          anchor: "__container__",
          align: HorizontalAlign.End
        }
      })
      .id("row2")

    Row().height(100)
      .backgroundColor("#FF6633")
      .alignRules({
        top: {
          anchor: "row1",
          align: VerticalAlign.Bottom
        },
        left: {
          anchor: "row1",
          align: HorizontalAlign.End
        },
        right: {
          anchor: "row2",
          align: HorizontalAlign.Start
        }
      })
      .id("row3")

    Row()
      .backgroundColor("#FF9966")
      .alignRules({
        top: {
          anchor: "row3",
          align: VerticalAlign.Bottom
        },
        bottom: {
          anchor: "__container__",
          align: VerticalAlign.Bottom
        },
        left: {
          anchor: "__container__",
          align: HorizontalAlign.Start
        },
        right: {
          anchor: "row1",
          align: HorizontalAlign.End
        }
      })
      .id("row4")

    Row()
      .backgroundColor("#FF66FF")
      .alignRules({
        top: {
          anchor: "row3",
          align: VerticalAlign.Bottom
        },
        bottom: {
          anchor: "__container__",
          align: VerticalAlign.Bottom
        },
        left: {
          anchor: "row2",
          align: HorizontalAlign.Start
        },
        right: {
          anchor: "__container__",
          align: HorizontalAlign.End
        }
      })
      .id("row5")
  }
  .width(300)
  .height(300)
  .border({ width: 3, color: "#6699FF" })
}
.height('100%')
.width("100%")
.padding(10)

} }