介绍

在鸿蒙ArkUI（基于ArkTS）中，RelativeContainer 是一种相对布局容器，允许子组件通过指定相对位置关系（相对于容器或其他子组件）进行布局，非常适合实现 复杂且灵活 的界面结构。

官方网址

特性

• 子组件的位置通过相对关系定义（如”在A组件的左边”、”在容器顶部居中”）
• 支持组件间的依赖关系布局，无需手动计算坐标
• 适应不同屏幕尺寸，布局会自动调整
• 可以减少手动计算坐标的工作量，让布局代码更直观、更易维护

常见使用场景

• 实现不规则布局（如图文混排、浮动元素）
• 构建依赖关系明确的界面（如表单元素的标签与输入框）
• 自适应不同屏幕尺寸的复杂界面

基本用法

RelativeContainer 通过 id 标识子组件，并使用 RelativeLayout 相关属性定义位置关系。

关键属性

例子

下面是一个使用 RelativeContainer 实现的布局示例，展示了组件间的相对位置关系：

@Entry
@Component
struct RelativeContainerExample {
  build() {
    Column() {
      // 相对布局容器
      RelativeContainer() {
        // 组件A：左上角
        Text('A')
          .id('a') // 设置id，供其他组件引用
          .width(80)
          .height(80)
          .backgroundColor('#ff4757')
          .textAlign(TextAlign.Center)
          .fontColor('#fff')
          // 相对于容器左上角定位
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },
            left: { anchor: '__container__', align: HorizontalAlign.Left }
          })

        // 组件B：在A的右边，与A顶部对齐
        Text('B')
          .id('b')
          .width(80)
          .height(80)
          .backgroundColor('#ffa502')
          .textAlign(TextAlign.Center)
          .fontColor('#fff')
          // 相对于A组件定位
          .alignRules({
            top: { anchor: 'a', align: VerticalAlign.Top },
            left: { anchor: 'a', align: HorizontalAlign.Right }
          })

        // 组件C：在A的下方，与A左对齐
        Text('C')
          .width(80)
          .height(80)
          .backgroundColor('#2ed573')
          .textAlign(TextAlign.Center)
          .fontColor('#fff')
          .alignRules({
            top: { anchor: 'a', align: VerticalAlign.Bottom },
            left: { anchor: 'a', align: HorizontalAlign.Left }
          })

        // 组件D：容器右下角
        Text('D')
          .width(80)
          .height(80)
          .backgroundColor('#1e90ff')
          .textAlign(TextAlign.Center)
          .fontColor('#fff')
          .alignRules({
            bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
            right: { anchor: '__container__', align: HorizontalAlign.Right }
          })
      }
      .width('100%')
      .height(300)
      .backgroundColor('#f5f5f5')
    }
    .padding(10)
    .width('100%')
    .height('100%')
  }
}

代码解析

1. 容器定义：使用 RelativeContainer() 创建相对布局容器
2. 组件标识：通过 .id('xxx') 为组件设置唯一标识
3. 位置规则：
   • 使用 __container__ 表示相对于容器本身
   • VerticalAlign 包含 Top/Center/Bottom 等垂直对齐方式
   • HorizontalAlign 包含 Left/Center/Right 等水平对齐方式
4. 布局关系：
   • A组件定位在容器左上角
   • B组件定位在A组件右侧（左边缘与A的右边缘对齐）
   • C组件定位在A组件下方（上边缘与A的下边缘对齐）
   • D组件定位在容器右下角

原文出处：/show_1GW1xnATLlfE.html