鸿蒙ArkUI RelativeContainer相对布局组件的用法（附带示例）

RelativeContainer 是相对布局组件，用于复杂场景中元素对齐的布局。

RelativeContainer 组件的使用规则说明如下：
1) 容器内子组件区分水平方向和垂直方向：

水平方向为 left、middle、right，对应容器的 HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。
垂直方向为top、center、bottom，对应容器的 VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。

2) 子组件可以将容器或者其他子组件设为锚点：
① 参与相对布局的容器内组件必须设置 id，不设置 id 的组件不显示，容器 id 固定为 __container__。

② 子组件某一方向上的 3 个位置（水平方向为 left、middle、right，垂直方向为 top、center、bottom）可以指定容器或其他子组件同方向的 3 个位置（水平方向为 HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End，垂直方向为 VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom）为锚点。

若同方向上设置两个以上锚点，则水平方向上 Start 和 Center 优先，垂直方向上 Top 和 Center 优先。

例如，水平方向上指定了 left 以容器的 HorizontalAlign.Start 为锚点，middle 以容器的 HorizontalAlign.Center 为锚点，又指定 right 的锚点为容器的 HorizontalAlign.End，当组件的 width 和容器的 width 不能同时满足 3 条约束规则时，优先取 left 和 middle 的约束规则。

③ 当同时存在前端页面设置的子组件尺寸和相对布局规则时，子组件的绘制尺寸取决于约束规则。从 API Version 11 开始，该规则发生变化，子组件绘制尺寸取决于前端页面设置的尺寸。

④ 若对齐后需要额外偏移，可设置 offset（API Version 11 上新增了 bias，不建议再使用 offset和position）。

⑤ 从 API Version 11 开始，在 RelativeContainer 组件中，width、height 设置为 auto，表示自适应子组件。

⑥ 当 width 设置为 auto 时，如果水平方向上子组件以容器作为锚点，则 auto 不生效；垂直方向上同理。

⑦ 相对布局容器内的子组件的 margin 含义不同于通用属性的 margin，其含义为到该方向上的锚点的距离。若该方向上没有锚点，则该方向的 margin 不生效。

3) 特殊情况：

若根据约束条件和子组件本身的 size 属性无法确定子组件大小，则子组件不绘制。
互相依赖、环形依赖时容器内子组件全部不绘制。
同方向上两个及以上位置设置锚点，但锚点位置逆序时，此子组件大小为 0，即不绘制。

RelativeContainer 组件的示例代码如下：

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)
.margin({ left: 50 })
.border({ width: 2, color: "#6699FF" })

上述示例代码效果如下图所示：

图 1 RelativeContainer组件的示例效果

鸿蒙ArkUI RelativeContainer相对布局组件的用法（附带示例）

相关文章