【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