HarmonyOS ArkUI容器类组件-相对布局容器（RelativeContainer）

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

RelativeContainer定义介绍

interface RelativeContainerInterface {
    (): RelativeContainerAttribute;
}

declare class RelativeContainerAttribute extends CommonMethod<RelativeContainerAttribute> {
}

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

@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)
  }

}

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

📢：由运行结果可知 RelativeContainer 在默认情况下，子组件是按照堆叠排列并沿着自身左上角对齐。

RelativeContainer对齐介绍

RelativeContainer 对子组件的对齐方式分为水平方向和竖直方向：

• 设置水平方向对齐

  RelativeContainer 的子组件在水平方向对齐方式分为 left 、middle 和 right，分别说明如下：

  • left： 设置子组件在水平方向上 左边框 的对齐方式，可选值说明如下：

    • HorizontalAlign.Start： 设置子组件左边框相对锚点组件的左边框位置对齐。
    • HorizontalAlign.Center： 设置子组件左边框相对锚点组件的中间位置对齐。
    • HorizontalAlign.End： 设置子组件左边框相对锚点组件的右边框位置对齐。

        @Entry @Component struct ArkUIClubTest {

          build() {
            Column({space: 10}) {
              RelativeContainer() {
                Text("Start")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    left: {
                      anchor: "__container__",
                      align: HorizontalAlign.Start
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(70)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Center")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    left: {
                      anchor: "__container__",
                      align: HorizontalAlign.Center
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(70)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("End")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    left: {
                      anchor: "__container__",
                      align: HorizontalAlign.End
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(70)
              .backgroundColor(Color.Pink)
            }
            .width("100%")
            .height("100%")
            .backgroundColor("#aabbcc")
            .padding({left: 50, top: 10, right: 50, bottom: 10})
          }

        }

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

• right： 设置子组件在水平方向上 右边框 的齐方式，可选值说明如下：
  • HorizontalAlign.Start： 设置子组件右边框相对锚点组件的左边框位置对齐。
  • HorizontalAlign.Center： 设置子组件右边框相对锚点组件的中间点位置对齐。
  • HorizontalAlign.End： 设置子组件右边框相对锚点组件的右边框位置对齐。

@Entry @Component struct ArkUIClubTest {

  build() {
    Column({space: 10}) {
      RelativeContainer() {
        Text("Start")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            right: {
              anchor: "__container__",
              align: HorizontalAlign.Start
            }
          })
          .id("test")
      }
      .width("100%")
      .height(70)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("Center")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            right: {
              anchor: "__container__",
              align: HorizontalAlign.Center
            }
          })
          .id("test")
      }
      .width("100%")
      .height(70)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("End")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            right: {
              anchor: "__container__",
              align: HorizontalAlign.End
            }
          })
          .id("test")
      }
      .width("100%")
      .height(70)
      .backgroundColor(Color.Pink)
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#aabbcc")
    .padding({left: 50, top: 10, right: 50, bottom: 10})
  }

}

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

• 设置竖直方向对齐

RelativeContainer 的子组件在竖直方向对齐配置分为：top、center 和 bottom，分别说明如下：

• top： 设置子组件在竖直方向上 上边框 的对齐方式，可选值说明如下：

  • VerticalAlign.Top： 设置子组件上边框相对锚点组件的上边框位置对齐。
  • VerticalAlign.Center： 设置子组件上边框相对锚点组件的中间点位置对齐。
  • VerticalAlign.Bottom： 设置子组件上边框相对锚点组件的下边框位置对齐。

@Entry @Component struct ArkUIClubTest {

  build() {
    Column({space: 10}) {
      RelativeContainer() {
        Text("Top")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Top
            }
          })
          .id("test")
      }
      .width("100%")
      .height(90)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("Center")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Center
            }
          })
          .id("test")
      }
      .width("100%")
      .height(90)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("Bottom")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Bottom
            }
          })
          .id("test")
      }
      .width("100%")
      .height(90)
      .backgroundColor(Color.Pink)
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#aabbcc")
    .padding({left: 50, top: 10, right: 50, bottom: 10})
  }

}

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

• • center： 设置子组件在竖直方向上 中间点 的对齐方式，可选值说明如下：

    • VerticalAlign.Top： 设置子组件中间点相对锚点组件的上边框位置对齐。
    • VerticalAlign.Center： 设置子组件中间点相对锚点组件的中间点位置对齐。
    • VerticalAlign.Bottom： 设置子组件中间点相对锚点组件的下边框位置对齐。

        @Entry @Component struct ArkUIClubTest {

          build() {
            Column({space: 10}) {
              RelativeContainer() {
                Text("Top")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    center: {
                      anchor: "__container__",
                      align: VerticalAlign.Top
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Center")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    center: {
                      anchor: "__container__",
                      align: VerticalAlign.Center
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Bottom")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    center: {
                      anchor: "__container__",
                      align: VerticalAlign.Bottom
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)
            }
            .width("100%")
            .height("100%")
            .backgroundColor("#aabbcc")
            .padding({left: 50, top: 50, right: 50, bottom: 10})
          }

        }

• bottom： 设置子组件在竖直方向上 下边框 的对齐方式，可选值说明如下：
  • VerticalAlign.Top： 设置子组件下边框相对锚点组件的上边框位置对齐。
  • VerticalAlign.Center： 设置子组件下边框相对锚点组件的中间点位置对齐。
  • VerticalAlign.Bottom： 设置子组件下边框相对锚点组件的下边框位置对齐。

        @Entry @Component struct ArkUIClubTest {

          build() {
            Column({space: 10}) {
              RelativeContainer() {
                Text("Top")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    bottom: {
                      anchor: "__container__",
                      align: VerticalAlign.Top
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Center")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    bottom: {
                      anchor: "__container__",
                      align: VerticalAlign.Center
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Bottom")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    bottom: {
                      anchor: "__container__",
                      align: VerticalAlign.Bottom
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)
            }
            .width("100%")
            .height("100%")
            .backgroundColor("#aabbcc")
            .padding({left: 50, top: 50, right: 50, bottom: 10})
          }

        }

📢：注意事项：

• 子组件可以将容器或者其他子组件设为锚点：
  • 参与相对布局的容器内组件必须设置id，不设置id的组件不显示，容器id固定为 __container__。
  • 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个。
  • 前端页面设置的子组件尺寸大小不会受到相对布局规则的影响。子组件某个方向上设置两个或以上alignRules时不建议设置此方向尺寸大小。
  • 对齐后需要额外偏移可设置offset。
• 特殊情况
  • 互相依赖，环形依赖时容器内子组件全部不绘制。
  • 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。

完整样例

@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)
  }
}

码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线。大家可以进行参考学习：

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计0页），希望对大家有所帮助：

《鸿蒙开发学习手册》：

如何快速入门：

开发基础知识：

1. 应用基础知识
2. 配置文件
3. 应用数据管理
4. 应用安全管理
5. 应用隐私保护
6. 三方应用调用管控机制
7. 资源分类与访问
8. 学习ArkTS语言
9. ……

基于ArkTS 开发：

1. Ability开发
2. UI开发
3. 公共事件与通知
4. 窗口管理
5. 媒体
6. 安全
7. 网络与链接
8. 电话服务
9. 数据管理
10. 后台任务(Background Task)管理
11. 设备管理
12. 设备使用信息统计
13. DFX
14. 国际化开发
15. 折叠屏系列
16. ……

鸿蒙开发面试真题（含参）：

大厂鸿蒙面试题：：

鸿蒙开发面试大盘集篇（共计319页）：

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向