#鸿蒙通关秘籍#如何在鸿蒙开发中通过RelativeContainer实现多种组件的对齐布局？

鸿蒙系统提供多种布局组件，如Row、Column、Flex、Stack等，都可以使用RelativeContainer进行对齐和排列。通过alignRules属性配置不同组件基于锚点的对齐方式，以构建复杂和协调的布局。以下示例展示了如何组合不同的布局组件：

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

  Column().width('50%').height(30).backgroundColor(0xAFEEEE)
    .alignRules({top: {anchor: "__container__", align: VerticalAlign.Top}, 
                 left: {anchor: "__container__", align: HorizontalAlign.Center}})
    .id("row2")

  Flex({direction: FlexDirection.Row}) {
    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
  }.alignRules({top: {anchor: "row2", align: VerticalAlign.Bottom}})
   .id("row3")
}.width(300).height(300)

} }