鸿蒙 Next 层叠布局使用 Stack 还是 RelativeContainer？

2025-06-25
北京
本文字数：2386 字
阅读完需：约 8 分钟

层叠布局（Stack 用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

相对布局（RelativeContainer） 是一种采用相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于处理界面复杂的场景，对多个子元素进行对齐和排列。子元素可以指定兄弟元素或父容器作为锚点，基于锚点进行相对位置布局。

实际使用中，当一个 Stack 中添加多个子组件时，并不能分别设置每个子组件的对齐方式，只能保持一个对齐方式，有一定的局限性。

因此我们可以使用 RelativeContainer，通过设置子组件的对齐方式，不仅可以实现层叠显示，还可以分别设置多个子组件，减少布局组件嵌套，可以有效的提升性能，减少时间开销

RelativeContainer 的子组件需要设置 alignRules 来设置子组件的相对位置，我对子组件相对父布局的位置做了一个封装，仿照安卓的 RelativeLayout 布局设置，子组件也可以作为锚点进行布局，需要给锚点组件设置唯一 id。

看一下展示效果和源码：

布局代码：

import { AlignRules } from '../utils/AlignRules'
@Entry@ComponentV2struct StackTest{  build() {    Column(){      Stack({alignContent:Alignment.TopStart}){        Row(){}.width(120).height(120).backgroundColor(Color.Yellow)        Row(){}.width(90).height(90).backgroundColor(Color.Brown)        Row(){}.width(60).height(60).backgroundColor(Color.Red)        Row(){}.width(30).height(30).backgroundColor(Color.Black)      }.width('100%').height('30%').backgroundColor(Color.Gray)
      Stack({ alignContent: Alignment.BottomEnd }){        Row(){}.width(120).height(120).backgroundColor(Color.Yellow)        Row(){}.width(90).height(90).backgroundColor(Color.Brown)        Row(){}.width(60).height(60).backgroundColor(Color.Red)        Row(){}.width(30).height(30).backgroundColor(Color.White)      }.width('100%').height('30%').backgroundColor(Color.Green)
      RelativeContainer() {        Row(){}.width(120).height(120).backgroundColor(Color.Yellow)        Row(){}.width(140).height(140).backgroundColor(Color.Orange).alignRules(AlignRules.alignParentTopCenter)        Row(){}.width(30).height(30).backgroundColor(Color.Black).alignRules(AlignRules.alignParentRightTop)        Row(){}.width(60).height(60).backgroundColor(Color.Red).alignRules(AlignRules.centerInParent).id("red")        Row(){}.width(80).height(80).backgroundColor(Color.Brown).alignRules(AlignRules.alignParentLeftBottom)        Row(){}.width(100).height(100).backgroundColor(Color.Yellow).alignRules(AlignRules.alignParentRightBottom)        Row(){}.width(70).height(70).backgroundColor(0xd2cab3).alignRules(AlignRules.alignParentRightBottom)        Row(){}.width(30).height(30).backgroundColor('#e1dede').alignRules(AlignRules.alignParentRightBottom)        Row(){}.width(60).height(60).backgroundColor(Color.Pink).alignRules(AlignRules.below('red'))      }.width('100%').height('30%').backgroundColor(Color.Blue)    }
  }}

复制代码

AlignRules 封装：


export  class AlignRules{
  //居中  static centerInParent:AlignRuleOption = {    center: { anchor: '__container__', align: VerticalAlign.Center },    middle: { anchor: '__container__', align: HorizontalAlign.Center }  }
  //顶部居中  static alignParentTopCenter:AlignRuleOption = {    top: { anchor: '__container__', align: VerticalAlign.Top },    middle: { anchor: '__container__', align: HorizontalAlign.Center }  }  //底部居中  static alignParentBottomCenter:AlignRuleOption = {    bottom: { anchor: '__container__', align: VerticalAlign.Bottom },    middle: { anchor: '__container__', align: HorizontalAlign.Center }  }
  //右上  static alignParentRightTop:AlignRuleOption = {    top: { anchor: '__container__', align: VerticalAlign.Top },    right: { anchor: '__container__', align: HorizontalAlign.End }  }  //靠右居中  static alignParentRightCenter:AlignRuleOption = {    center: { anchor: '__container__', align: VerticalAlign.Center },    right: { anchor: '__container__', align: HorizontalAlign.End }  }  //右下  static alignParentRightBottom:AlignRuleOption = {    bottom: { anchor: '__container__', align: VerticalAlign.Bottom },    right: { anchor: '__container__', align: HorizontalAlign.End }  }
  //左上  默认位置 不需要设置
  //靠左居中  static  alignParentLeftCenter:AlignRuleOption = {    center: { anchor: '__container__', align: VerticalAlign.Center },    left: { anchor: '__container__', align: HorizontalAlign.Start }  }  //左下  static  alignParentLeftBottom:AlignRuleOption = {    bottom: { anchor: '__container__', align: VerticalAlign.Bottom },    left: { anchor: '__container__', align: HorizontalAlign.Start }  }
  //在锚点的下方  static below(id:string):AlignRuleOption {    return {      top:{ anchor: id, align: VerticalAlign.Bottom },      middle: { anchor: id, align: HorizontalAlign.Center }    }  }}