【ARK UI】HarmonyOS ETS的引导页的实现

参考资料

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"
            })
          })
      }
    }
  }
}

---

 

运行效果

​

 

欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh