简介
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,具体使用方法我们下期再讲。
如果文章中有错误之处还请大佬评论指出我看见后马上修改,我们共同进步。