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

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

相关推荐
Swift社区1 小时前
如何构建安全可靠的 HarmonyOS 应用
harmonyos·arkts·arkui
AI+程序员在路上1 小时前
鸿蒙系统(HarmonyOS)介绍
华为·harmonyos
lqj_本人2 小时前
鸿蒙next版开发:相机开发-录像(ArkTS)
数码相机·华为·harmonyos
Swift社区4 小时前
HarmonyOS 如何获取设备信息(系统、版本、网络连接状态)
华为·harmonyos
lqj_本人11 小时前
鸿蒙next版开发:相机开发-拍照(ArkTS)
数码相机·华为·harmonyos
郝晨妤11 小时前
HarmonyOS和OpenHarmony区别是什么?鸿蒙和安卓IOS的区别是什么?
android·ios·harmonyos·鸿蒙
lqj_本人12 小时前
鸿蒙next版开发:相机开发-会话管理(ArkTS)
华为·harmonyos
lqj_本人14 小时前
鸿蒙next版开发:分析JS Crash(进程崩溃)
华为·harmonyos
Harmony_QI15 小时前
鸿蒙北向开发环境安装指南
华为·harmonyos·鸿蒙