鸿蒙HarmonyOS 实现自定义轮播图

前言

轮播图作为应用程序中最普通使用的控件被广泛应用，相信对于来发者来说并不陌生。在 Android 中实现一个 轮播图很多选择使用第三方的插件，毕竟在有限的开发排期中自己动手去实现一个轮播图 并不那么简单，需要考虑的细节很多。不过在 HarmonyOS 中实现一个轮播图却是十分的简单，本篇文章教你在最短的时间内快速实现一个自定义的 轮播图，建议点赞收藏！

实现效果

需求分析

• 支持自定义循环播放，自动播放。
• 支持自定义播放时间间隔。
• 支持横向和竖向轮播。

• 支持自定义指示器。

  技术实现

  在鸿蒙原生开发中，为开发者提供了很多自由度高的控件，要想实现一个轮播图，最简单的方式就是选择合适的控件，这里使用的是官方提供的 Swiper 控件。Swiper 控件支持多种功能属性。

swiperController: SwiperController = new SwiperController()
Swiper(this.swiperController)

1. 选择好 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)
     }
   
   }

2. 自定义LazyData 类，实现 IDataSource 接口，并实现其中的方法即可。简单实现了展示功能后，接下来为轮播图提供一些基本属性。

.loop(true) //是否轮播
      .autoPlay(true) //是否自动播放
      .interval(this.duration) //播放间隔时间
      .indicator(true) //是否显示指示器
      .vertical(false) //是否竖向播放
      .indicatorStyle({selectedColor:this.bgColor,color:Color.White}) //指示器的相关配置

    3. 由于 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)
 }

总结

在鸿蒙实际开发中，实现一个轮播图是十分方便的，但是这并不是意味着所有功能都简单，还有一些看似简单的效果实现起