#鸿蒙通关秘籍#完整示例：如何实现复杂的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)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.

} }