tack 是 ArkUI 层叠容器组件,又称堆叠布局。 核心规则:容器内所有子组件默认统一对齐到容器中心点,多层上下重叠摆放,后写入的组件层级更高,会覆盖在先写的组件上方。

  • 布局维度:二维叠加布局,区别于 Row(横向单行)、Column(纵向单列)一维线性布局;
  • 核心用途:图片加文字遮罩、头像角标、弹窗浮层、卡片叠加、底色 + 前景图文组合。

    tack 是 ArkUI 层叠容器组件,又称堆叠布局。 核心规则:容器内所有子组件默认统一对齐到容器中心点,多层上下重叠摆放,后写入的组件层级更高,会覆盖在先写的组件上方。

  • 布局维度:二维叠加布局,区别于 Row(横向单行)、Column(纵向单列)一维线性布局;
  • 核心用途:图片加文字遮罩、头像角标、弹窗浮层、卡片叠加、底色 + 前景图文组合。
  • 例:
  • @Entry
    @Component
    struct ColStack {
      build() {
        Column({ space: 50 }) {
          Text('这是我的个人主页')
            .fontSize(35)
            .fontWeight(FontWeight.Bolder)
            .backgroundColor(Color.Yellow)
          Row({space :15}) {
            Stack() {
              Text()
                .width(220)
                .height(220)
                .backgroundColor(Color.Yellow)
                .borderRadius(30)
              Text('你好')
                .fontSize(40)
                .fontColor(Color.Red)
                .width(120)
                .height(120)
                .backgroundColor(Color.Grey)
                .borderRadius(30)
                .padding({ left: 15, right: 0, top: 0, bottom: 0
                })
            }
    
            Column() {
              Text('欢迎来到')
                .fontSize(35)
                .fontWeight(FontWeight.Bolder)
    
              Text('鸿蒙开发')
                .fontSize(35)
                .fontWeight(FontWeight.Bolder)
            }
          }
          .justifyContent(FlexAlign.Center)
          .width('100%')
          .height('100%')
          .backgroundColor(0xff00ff)
        }
      }
    }

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐