【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