HarmonyOS 鸿蒙Next RelativeContainer和Stack，定位问题

想要实现的效果：

1:“快到期”角标，始终定位在数字右上角位置

2:数字数量不确定，且始终居中显示

实现方式

1:如果使用Stack包裹数字，数字宽度小于角标，则容器被角标撑开。如果数字比较多，如“12345”，则容器被数字撑开。这样角标如何定位？

2:如果使用RelativeContainer或者Stack包裹整个容器，则需要动态计算距离值.position({y:-8,x:计算}),这样是否太不方便了？是否有更好的建议？

zlyuanteng 1楼•13 小时前

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page {
  [@State](/user/State) str:string = "测试"
  [@State](/user/State) str2:string = "测试2"
  build() {
    Column() {
      Badge({
        value: '快到期',
        style: {badgeColor: '#FA2A2D' }
      }) {
        Text(this.str)
          .fontSize("20fp")
          .fontColor("#222222")
          .onClick(()=>{
            this.str+='_'
          })
          .margin({top:10,right:15})
      }
      .margin(60)
      Row(){
        Text(this.str2)
          .fontSize("20fp")
          .fontColor("#222222")
          .onClick(()=>{
            this.str2+='_'
          })
        Row(){
          Row(){
            Text("角标2").position({x:4,y:-8})
              .backgroundColor("red")
          }.width(300).height(50)
        }.width(1).height(1)
      }
    }.width("100%")
  }
}

试试这个

itying888 2楼•13 小时前

在HarmonyOS 鸿蒙Next中，RelativeContainer和Stack都是用于布局的重要组件，它们在定位方面各有特点。

RelativeContainer是一个相对定位的容器，支持子组件相对于父容器或其他子组件进行定位。通过设置alignRules属性，可以指定子组件在六个方向（left、middle、right、top、center、bottom）上的锚点和对齐方式。这种方式非常灵活，可以实现各种复杂的布局效果。

Stack则是一个层叠容器，它按照z轴（立体轴）来排列子组件。在Stack中，后一个子元素会覆盖前一个子元素，因此可以通过zIndex属性来控制子元素的堆叠顺序。Stack适用于需要重叠布局的场景。

如果在使用RelativeContainer和Stack时遇到定位问题，首先应检查alignRules属性或zIndex属性是否设置正确。确保子组件的锚点和对齐方式符合布局需求，同时注意避免组件重叠或越出容器边界的情况。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。