鸿蒙学习-ArkTs中不那么基础的组件Stack

DunerGe2023-12-20 16:03

简介

Stack：堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。

css 复制代码

Stack(value?: { alignContent?: Alignment })

可以包含子组件，从API9开始可以用于卡片内。

从简介可以看出Stack比较像Android中的帧布局FrameLayout，不同之处在于FrameLayout只能从左上角开始堆叠不能设置子组件的位置，而Stack则有一个属性，这个属性的作用就是设置子组件的位置。

属性

参数名	参数类型	必填	参数描述
alignContent	Alignment	否	设置子组件在容器内的对齐方式。默认值：Alignment.Center

参数可选，非必填

具体使用

比如说我们要写一个如图的启动页就可以使用Stack

scss 复制代码

Stack(){
    Image($r('app.color.app_color'))
      .width('100%')
      .height('100%')
    Image($r('app.media.ic_splash'))
      .height('400vp')
      .objectFit(ImageFit.Contain)
}

如上代码，我先设置一个背景色，然后添加进一个图片，但是没传参数，就会使用默认值在中间。

我们都知道一般情况下app启动时都有广告页和跳过倒计时，如下图

那么这种效果如何实现呢：

scss 复制代码

Stack(){
    Image($r('app.color.app_color'))
      .width('100%')
      .height('100%')
    Image($r('app.media.ic_splash'))
      .height('400vp')
      .objectFit(ImageFit.Contain)
    Text() {
      Span($r('app.string.skip'))
      Span(`${this.countdown}`)
    }
    .onClick(() => this.toMainPage())
    .fontColor(Color.White)
    .fontSize('12fp')
    .backgroundColor('#4d182431')
    .width(63)
    .height(24)
    .borderRadius(10)
    .textAlign(TextAlign.Center)
    .position({
      x: '78%',
      y: 35
    })
}

我们看代码中多出来的Text就是这个按钮，它的参数position则是设置它的位置，这也就是子组件在Stack中设置位置的方法。

在实际开发中我们还会遇到一种情况那就是介绍页：简单来说就是轮播几张图然后跳转到首页，这种需求如何做呢？

这种页面我们需要用到组件Swiper，具体使用方法我们下期再讲。

如果文章中有错误之处还请大佬评论指出我看见后马上修改，我们共同进步。