更新时间：2022-06-25 15:46:01浏览次数：233+次
本文介绍鸿蒙HarmonyOS ETS的引导页的实现，采用的是ARK UI技术来完成，开发者可先在鸿蒙文档中参考Swiper、Stack、router，如果掌握的话可略过。
代码实现
1、准备资料，准备三个引导图片。
2、绘画ETS的布局。
新建一个WelcomePage的page界面，在改ETS文件添加引导页和启动按钮，具体注释事件，代码如下：
import router from '@system.router';
@Entry
@Component
struct WelcomePage {
private swiperController: SwiperController = new SwiperController()
/**
* 控制启动按钮显示还是隐藏
*/
@State flag:boolean=false;
build() {
Column({ space: 5 }) {
Stack({ alignContent: Alignment.TopEnd }) {
Swiper(this.swiperController) {
//todo 引导页图片内容
//todo 引导页一
Stack({ alignContent: Alignment.Center }){
Image($r("app.media.icon")).width(100).height(100)
Text("引导页一").fontSize(20).fontColor(Color.White).margin({top:150})
}.width('100%').height("100%").backgroundColor(Color.Red).align(Alignment.Center)
//todo 引导页 二
Stack({ alignContent: Alignment.Center }){
Image($r("app.media.icon")).width(100).height(100)
Text("引导页二").fontSize(20).fontColor(Color.White).margin({top:150})
}.width('100%').height("100%").backgroundColor(Color.Orange).align(Alignment.Center)
//todo 引导页三
Stack({ alignContent: Alignment.Center }){
Image($r("app.media.icon")).width(100).height(100)
Text("引导页三").fontSize(20).fontColor(Color.White).margin({top:150})
}.width('100%').height("100%").backgroundColor(Color.Green).align(Alignment.Center)
}
.index(0)//todo 当前索引为0 开始
.autoPlay(false)//todo 停止自动播放
.indicator(true) // todo 默认开启指示点
.loop(false) // todo 停止自动播放 默认开启循环播放
.vertical(false) //todo 横向切换 默认横向切换
.onChange((index: number) => {
/**
* 根据Index 进行判断 当引导页播放到最后一个页面时候
* 让启动按钮显示 否则的话 不显示
*/
if(index==2){//todo 最后一个 设置flag 为true
this.flag=true
}else{//todo 不是最后一个 设置flag为false
this.flag=false
}
})
if(this.flag)//todo 当flag 为true 则显示启动按钮 为false的时候不显示
Text('启动').width('300px').height('150px')
.textAlign(TextAlign.Center).fontSize(20)
.backgroundColor(Color.White)
.margin({right:20,top:20})
.onClick(function(){//todo 实现按钮点击事件 进入到主界面
router.push({
uri:"pages/index"
})
})
}
}
}
}
运行效果
以上代码所得到的动画图。
相关资讯
