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

简介

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,具体使用方法我们下期再讲。

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

相关推荐
踏雪Vernon7 分钟前
[OpenHarmony5.0][Docker][环境]OpenHarmony5.0 Docker编译环境镜像下载以及使用方式
linux·docker·容器·harmonyos
Andy醒4 小时前
HarmonyOS . 沉浸状态栏使用
harmonyos·鸿蒙
yuwinter4 小时前
鸿蒙HarmonyOS学习笔记(2)
笔记·学习·harmonyos
jikuaidi6yuan6 小时前
鸿蒙系统(HarmonyOS)分布式任务调度
分布式·华为·harmonyos
SameX13 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX13 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index21 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室1 天前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu71 天前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成