鸿蒙开发：RelativeContainer 相对布局详解【全套华为认证学习资料分享（考试大纲、培训教材、实验手册等等）】-优快云博客

本文链接：https://blog.youkuaiyun.com/HuaweiLab_Peach/article/details/146064723

前言

在最新版本的 DevEco Studio 中，官方在创建新项目时，默认使用 RelativeContainer 组件作为根布局。这足以证明 RelativeContainer 的重要性。相比其他容器组件，它极大地简化了复杂 UI 布局中的元素对齐问题。

例如，在没有 RelativeContainer 的情况下，我们可能需要嵌套多个容器或使用坐标定位来实现组件的排列。而 RelativeContainer 允许我们通过定义组件间的相对关系，轻松实现复杂布局。

RelativeContainer 基本用法

在 RelativeContainer 中，我们可以通过 alignRules 属性来定义组件的相对位置。以下是一个基本示例：

RelativeContainer() {
    Text("组件1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red);

    Text("组件2")
        .width(100)
        .height(100)
        .id("view_2")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Orange)
        .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top },
            right: { anchor: "__container__", align: HorizontalAlign.End }
        });
}

在这里，我们创建了 组件1 和 组件2，并通过 alignRules 设置 组件2 位于容器的右上角。

如何使用 ID 声明锚点组件

在 RelativeContainer 中，组件的对齐依赖于锚点组件。为了正确定义锚点，需要给每个组件分配唯一的 id，类似于身份证的作用。例如：

Text("组件1")
    .width(100)
    .height(100)
    .id("view_1")
    .textAlign(TextAlign.Center)
    .backgroundColor(Color.Red);

之后，我们可以通过 alignRules 让其他组件相对于 view_1 进行对齐。

位置对齐规则

RelativeContainer 允许使用 alignRules 来定义组件的相对位置，常见的对齐方式如下：

.alignRules({
    top: { anchor: "__container__", align: VerticalAlign.Top },
    bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
    left: { anchor: "__container__", align: HorizontalAlign.Start },
    right: { anchor: "__container__", align: HorizontalAlign.End }
})

其中，anchor 指定参考组件，可以是 __container__（即父容器）或具体的组件 ID，align 则表示组件的位置：

水平对齐：HorizontalAlign.Start（左）、HorizontalAlign.Center（中）、HorizontalAlign.End（右）。
垂直对齐：VerticalAlign.Top（上）、VerticalAlign.Center（中）、VerticalAlign.Bottom（下）。

居中对齐案例

如果希望某个组件在容器中居中，我们可以这样设置：

@Entry
@Component
struct Index {
    build() {
        RelativeContainer() {
            Text("组件1")
                .width(100)
                .height(100)
                .id("view_1")
                .textAlign(TextAlign.Center)
                .backgroundColor(Color.Red)
                .alignRules({
                    center: { anchor: "__container__", align: VerticalAlign.Center },
                    middle: { anchor: "__container__", align: HorizontalAlign.Center }
                });
        }
    }
}

center 和 middle 让组件水平、垂直方向都居中。

组件相对位置示例

放置在锚点组件上方

Text("组件2")
    .width(100)
    .height(100)
    .id("view_2")
    .textAlign(TextAlign.Center)
    .backgroundColor(Color.Orange)
    .alignRules({
        bottom: { anchor: "view_1", align: VerticalAlign.Top },
        middle: { anchor: "__container__", align: HorizontalAlign.Center }
    });

这里 组件2 放置在 view_1 的上方。

放置在锚点组件下方

Text("组件3")
    .width(100)
    .height(100)
    .id("view_3")
    .textAlign(TextAlign.Center)
    .backgroundColor(Color.Yellow)
    .alignRules({
        top: { anchor: "view_1", align: VerticalAlign.Bottom },
        middle: { anchor: "__container__", align: HorizontalAlign.Center }
    });

类似地，组件3 位于 view_1 的下方。