鸿蒙——布局——相对布局

一、定义

通过组件之间的相对位置关系来确定每个组件的摆放位置

通俗一点的理解就是：布局就是一间教室，座位是我们的描述点

我在教室的右下角
你在我的右边，她在我的前面

二、核心特点

相对定位核心：子组件的位置不是固定的，而是相对于父容器的边界或其他子组件的特定锚点来确定
灵活不重叠：RelativeContainer 的子组件默认根据相对规则分散摆放，不会主动重叠

三、使用场景

相对布局作为灵活性最高的布局之一，几乎能实现非堆叠类的复杂排版，典型场景包括

表单类 UI：例如 "用户名输入框 左侧对齐标签文字，密码输入框 在用户名输入框 正下方，登录按钮 在密码框下方且水平居中"
卡片式布局：商品卡片中 "商品图片居左，标题在图片右侧上方，价格在标题下方，销量标签在价格右侧"，想一想淘宝购买商品布局
个性化排版：例如 "返回按钮靠左上角，标题文字居中，更多按钮靠右上角" 的标题栏布局
多组件联动布局：例如 "广告横幅靠顶部，列表在横幅下方占满剩余空间，底部按钮在列表下方且靠右下角"
适配性布局：不同屏幕尺寸下，通过相对关系保证组件的位置比例不变（比如 "确认按钮始终在弹窗的右下角，距离右边界 20vp、下边界 15vp"）

四、如何实现

实现

用RelativeContainer组件实现相对布局通过

具体实现：

了解核心属性与概念

必备属性
1. alignSelf
  - 作用：相对于父容器的对齐方式
  - 写法：.alignSelf(ItemAlign.Center)
2. id
  - 作用：给子组件取一个名字，这是唯一标识
  - 写法：.id('usernameLabel')
组件之间设置的属性
1. alignRules：子组件的相对定位规则，是一个对象，内部包含
- anchor：目标组件 ID（父容器固定为 container，子组件为自定义 id）
- align：对齐目标组件的位置
  - 水平用 HorizontalAlign有/Start//End/Center可选
  - 垂直用 VerticalAlign有Top/Bottom/Center选择

注：组件间相对规则 > 相对父容器规则 > alignSelf 兜底规则

代码实现：

bash 复制代码

  // 子组件1：蓝色矩形（相对父容器）
        Text('蓝色矩形').width(150) .height(80).backgroundColor(Color.Blue) .fontColor(Color.White)
          .id('blueRect')
          .alignRules({
            middle: { anchor: '__container__', align: HorizontalAlign.Center}, // 水平居中
            bottom: { anchor: '__container__', align: VerticalAlign.Top } // 顶部对齐
          })
          .margin({ top: 20 }) // 顶部偏移20vp

理解：将这个子组件取名为blueRect，自身的水平居中位置与父容器的水平居中锚点对齐，自身的垂直底部与父容器的垂直底部锚点对齐，但是margin，要离这个对齐点20vp的距离

bash 复制代码

  // 子组件2：红色矩形（相对蓝色矩形）
        Text('红色矩形') .width(120) .height(60) .backgroundColor(Color.Red).fontColor(Color.White)
          .id('redRect')
          .alignRules({
            start: { anchor: 'blueRect', align: HorizontalAlign.Center }, // 水平居中蓝色矩形
            top: { anchor: 'blueRect', align: VerticalAlign.Top } // 顶部对齐蓝色矩形底部
          })
          .margin({ top: 10 }) // 顶部偏移10vp

理解：将这个子组件取名为redRect，自身的水平开始位置与blueRect的水平居中锚点对齐，自身的垂直顶部与父容器的垂直顶部锚点对齐，但是margin，要离这个对齐点10vp的距离

bash 复制代码

 // 子组件3：绿色正方形（相对红色矩形）
        Text('绿色正方形').width(80) .height(80).backgroundColor(Color.Green).fontColor(Color.White)
          .id('greenSquare')
          .alignRules({
            bottom: { anchor: 'redRect', align: VerticalAlign.Center }, // 垂直居中红色矩形
            right: { anchor: 'redRect', align: HorizontalAlign.End } // 左侧对齐红色矩形右侧
          })
          .margin({ left: 10 }) // 左侧偏移10vp

理解：将这个子组件取名为greenSquare，自身的水平右边位置与redRect的水平右侧锚点对齐，自身的垂直底部与父容器的垂直居中锚点对齐，但是margin，要离这个对齐点10vp的距离

所有代码实现：

bash 复制代码

@Entry
@Component
struct Page1 {
  build() {
    Column() {
      // 相对布局容器
      RelativeContainer() {
        // 子组件1：蓝色矩形（相对父容器）
        Text('蓝色矩形').width(150) .height(80).backgroundColor(Color.Blue) .fontColor(Color.White)
          .id('blueRect')
          .alignRules({
            middle: { anchor: '__container__', align: HorizontalAlign.Center}, // 水平居中
            bottom: { anchor: '__container__', align: VerticalAlign.Top } // 顶部对齐
          })
          .margin({ top: 20 }) // 顶部偏移20vp

        // 子组件2：红色矩形（相对蓝色矩形）
        Text('红色矩形') .width(120) .height(60) .backgroundColor(Color.Red).fontColor(Color.White)
          .id('redRect')
          .alignRules({
            start: { anchor: 'blueRect', align: HorizontalAlign.Center }, // 水平居中蓝色矩形
            top: { anchor: 'blueRect', align: VerticalAlign.Top } // 顶部对齐蓝色矩形底部
          })
          .margin({ top: 10 }) // 顶部偏移10vp

        // 子组件3：绿色正方形（相对红色矩形）
        Text('绿色正方形').width(80) .height(80).backgroundColor(Color.Green).fontColor(Color.White)
          .id('greenSquare')
          .alignRules({
            bottom: { anchor: 'redRect', align: VerticalAlign.Center }, // 垂直居中红色矩形
            right: { anchor: 'redRect', align: HorizontalAlign.End } // 左侧对齐红色矩形右侧
          })
          .margin({ left: 10 }) // 左侧偏移10vp
      }
      .width('90%')
      .height(300)
      .backgroundColor(Color.Grey)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

实现效果：

注：

自身组件的锚点与目标锚点
- start/middle/left/right------水平锚点
- top/center/bottom------垂直锚点