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

层叠布局（Stack） 用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。 相对布局（RelativeContainer） 是一种采用相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于处理界面复杂的场景，对多个子元素进行对齐和排列。子元素可以指定兄弟元素或父容器作为锚点，基于锚点进行相对位置布局。

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

因此我们可以使用RelativeContainer，通过设置子组件的对齐方式，不仅可以实现层叠显示，还可以分别设置多个子组件，减少布局组件嵌套，可以有效的提升性能，减少时间开销 RelativeContainer的子组件需要设置alignRules来设置子组件的相对位置，我对子组件相对父布局的位置做了一个封装，仿照安卓的RelativeLayout布局设置，子组件也可以作为锚点进行布局，需要给锚点组件设置唯一id。

看一下展示效果和源码： ####布局代码：

import { AlignRules } from '../utils/AlignRules'

@Entry
@ComponentV2
struct 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 }
    }
  }
}