前言

輪播圖作為應用程序中最普通使用的控件被廣泛應用，相信對于來發者來說并不陌生。在 Android 中實現一個輪播圖很多選擇使用第三方的插件，畢竟在有限的開發排期中自己動手去實現一個輪播圖并不那么簡單，需要考慮的細節很多。不過在 HarmonyOS 中實現一個輪播圖卻是十分的簡單，本篇文章教你在最短的時間內快速實現一個自定義的輪播圖，建議點贊收藏！

實現效果

需求分析

支持自定義循環播放，自動播放。
支持自定義播放時間間隔。
支持橫向和豎向輪播。
支持自定義指示器。

技術實現

在鴻蒙原生開發中，為開發者提供了很多自由度高的控件，要想實現一個輪播圖，最簡單的方式就是選擇合適的控件，這里使用的是官方提供的 Swiper 控件。Swiper 控件支持多種功能屬性。

swiperController: SwiperController = new SwiperController()

Swiper(this.swiperController)

選擇好 Swiper 控件后，需要為 Swiper 控件提供數據。這里使用 LazyForEach 懶加載的方式，提高性能。注意如果使用 LazyForEach 的方式就需要搭配****IDataSource 使用。

@State data: LazyData< PhotoData > = new LazyData()

Swiper(this.swiperController) {
        LazyForEach(this.data, (item: PhotoData, index: number) = > {
          Image($r(`app.media.` + item.id))
            .width('100%')
            .height('30%')
        }, (item: PhotoData) = > JSON.stringify(item))
      }

export class LazyData< T > implements IDataSource{
  // 監聽器
  private listeners: DataChangeListener[] = []
  private array:Array< T > = []
  totalCount(): number {
   return this.array.length
  }

  getData(index: number): T {
    return this.array[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener)< 0) {
      this.listeners.push(listener)
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const index = this.listeners.indexOf(listener)
    if (index >=0) {
      this.listeners.splice(index,1)
    }
  }
  push(data:T){
    this.array.push(data)
  }

}

自定義LazyData 類，實現 IDataSource 接口，并實現其中的方法即可。

簡單實現了展示功能后，接下來為輪播圖提供一些基本屬性。

.loop(true) //是否輪播
      .autoPlay(true) //是否自動播放
      .interval(this.duration) //播放間隔時間
      .indicator(true) //是否顯示指示器
      .vertical(false) //是否豎向播放
      .indicatorStyle({selectedColor:this.bgColor,color:Color.White}) //指示器的相關配置

由于 Swiper 提供的默認指示器可能不滿足實際的開發需求，這里實現一個自定義的指示器。首先將默認指示器設置為 false，然后實現 onChange 方法，用來獲取圖片切換的下標。

.indicator(false)
.onChange((index:number)= >{
          this.currentIndex = index
        })

自定義指示器組件。

@Builder
  progressView() {
    Row({ space: 5 }) {
      LazyForEach(this.data, (item: PhotoData, index: number) = > {
        Stack({ alignContent: Alignment.Start }) {
          Row()
            .zIndex(1)
            .width(this.currentIndex >= index && !this.slide ? '100%' : '0')
            .height(2)
            .borderRadius(2)
            .backgroundColor(this.bgColor)
            .animation(!this.slide ? {
              duration: this.duration - 400,
              curve: Curve.Linear,
              iterations: 1,
              playMode: PlayMode.Normal,
              onFinish: () = > {
                if (this.currentIndex === this.data.totalCount() - 1) {
                  this.duration = 400;
                  this.currentIndex = -1;
                }
              }
            } : { duration: 0, iterations: 1 })
        }
        .width('100%')
        .height(2)
        .borderRadius(2)
        .backgroundColor(this.currentIndex >= index && this.slide ? this.bgColor : Color.Grey)
        .layoutWeight(1)
      }, (item: PhotoData) = > JSON.stringify(item))
    }
    .width('50%')
    .height(50)
  }