ArkUI容器类组件

ArkUI 开发框架提供了 RelativeContainer 组件实现相对布局的能力，该布局适用于复杂场景下多元素对齐的情况。该组件可以包含多个子组件，本节笔者简单介绍一下 RelativeContainer 的使用。

RelativeContainer定义介绍

代码语言：ts复制

interface RelativeContainerInterface {
    (): RelativeContainerAttribute;
}

declare class RelativeContainerAttribute extends CommonMethod<RelativeContainerAttribute> {
}

RelativeContainer 默认构造方法无需任何额外参数，也没有定义额外的属性方法，简单样例如下所示：

代码语言：ts复制

@Entry @Component struct ArkUIClubTest {

  build() {
    Column({space: 10}) {
      RelativeContainer() {
        Text("text1")
          .fontSize(25)
          .width(160)
          .height(150)
          .id("text1")  // 必须添加 id，否则不显示
          .textAlign(TextAlign.End)
          .backgroundColor("#ccaabb")

        Text("text2")
          .fontSize(25)
          .width(90)
          .id("text2")  // 必须添加 id，否则不显示
          .textAlign(TextAlign.Start)
          .backgroundColor("#bbccaa")

        Text("text3")
          .fontSize(25)
          .width(90)
          .margin({top: 50})
          // .id("text3")  // 注释掉id，组件不显示
          .textAlign(TextAlign.Start)
          .backgroundColor("#bbccaa")
      }
      .width("100%")
      .height(190)
      .backgroundColor(Color.Pink)

    }
    .width("100%")
    .height("100%")
    .backgroundColor("#aabbcc")
    .padding(10)
  }

}

样例运行结果如下图所示：