前言

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

實(shí)現(xiàn)效果

需求分析

• 支持自定義循環(huán)播放，自動(dòng)播放。
• 支持自定義播放時(shí)間間隔。
• 支持橫向和豎向輪播。
• 支持自定義指示器。

技術(shù)實(shí)現(xiàn)

1. 在鴻蒙原生開發(fā)中，為開發(fā)者提供了很多自由度高的控件，要想實(shí)現(xiàn)一個(gè)輪播圖，最簡(jiǎn)單的方式就是選擇合適的控件，這里使用的是官方提供的 Swiper 控件。Swiper 控件支持多種功能屬性。

swiperController: SwiperController = new SwiperController()

Swiper(this.swiperController)

2. 選擇好 Swiper 控件后，需要為 Swiper 控件提供數(shù)據(jù)。這里使用 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{
  // 監(jiān)聽器
  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 類，實(shí)現(xiàn) IDataSource 接口，并實(shí)現(xiàn)其中的方法即可。

3. 簡(jiǎn)單實(shí)現(xiàn)了展示功能后，接下來為輪播圖提供一些基本屬性。

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

4. 由于 Swiper 提供的默認(rèn)指示器可能不滿足實(shí)際的開發(fā)需求，這里實(shí)現(xiàn)一個(gè)自定義的指示器。首先將默認(rèn)指示器設(shè)置為 false，然后實(shí)現(xiàn) onChange 方法，用來獲取圖片切換的下標(biāo)。

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

5. 自定義指示器組件。

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

總結(jié)

在鴻蒙實(shí)際開發(fā)中，實(shí)現(xiàn)一個(gè)輪播圖是十分方便的，但是這并不是意味著所有功能都簡(jiǎn)單，還有一些看似簡(jiǎn)單的效果實(shí)現(xiàn)起來卻是十分的復(fù)雜。學(xué)會(huì)的小伙伴趕緊動(dòng)手試試吧！