在HarmonyOS NEXT开发中swiper修改指示器问题？

Question

在HarmonyOS NEXT开发中swiper修改指示器问题？

Answer 1

当前swiper自有的属性不支持设置指示器的间距，如果要设置间距，需要自定义UI来实现指示器，示例代码如下：

class MyDataSource implements IDataSource { 
  private list: number[] = [] 
 
  constructor(list: number[]) { 
    this.list = list 
  } 
 
  totalCount(): number { 
    return this.list.length 
  } 
 
  getData(index: number): number { 
    return this.list[index] 
  } 
 
  registerDataChangeListener(listener: DataChangeListener): void { 
  } 
 
  unregisterDataChangeListener() { 
  } 
} 
 
 
@Entry 
@Component 
struct SwiperExample { 
  private swiperController: SwiperController = new SwiperController() 
  private data: MyDataSource = new MyDataSource([]) 
  @State widthLength: number = 0 
  @State heightLength: number = 0 
  @State currentIndex: number = 0 
  // 实现导航点自定义动画 
 
  private swiperWidth: number = 0 
 
  private getTextInfo(index: number): Record<string, number> { 
    let strJson = getInspectorByKey(index.toString()) 
    try { 
      let obj: Record<string, string> = JSON.parse(strJson) 
      let rectInfo: number[][] = JSON.parse('[' + obj.$rect + ']') 
      return { 'left': px2vp(rectInfo[0][0]), 'width': px2vp(rectInfo[1][0] - rectInfo[0][0]) } 
    } catch (error) { 
      return { 'left': 0, 'width': 0 } 
    } 
  } 
 
  private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> { 
    let nextIndex = index 
    if (index > 0 && event.currentOffset > 0) { 
      nextIndex-- 
    } else if (index < 3 && event.currentOffset < 0) { 
      nextIndex++ 
    } 
    let indexInfo = this.getTextInfo(index) 
    let nextIndexInfo = this.getTextInfo(nextIndex) 
    let swipeRatio = Math.abs(event.currentOffset / this.swiperWidth) 
    let currentIndex = swipeRatio > 0.5 ? nextIndex : index // 页面滑动超过一半，swiper切换到下一页。 
    let currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * swipeRatio 
    let currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * swipeRatio 
    return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth } 
  } 
 
  aboutToAppear(): void { 
    let list: number[] = [] 
    for (let i = 1; i <= 6; i++) { 
      list.push(i); 
    } 
    this.data = new MyDataSource(list) 
  } 
 
  build() { 
    Column({ space: 5 }) { 
      Stack({ alignContent: Alignment.Bottom }) { 
        Swiper(this.swiperController) { 
          // LazyForEach(this.data, (item: string) => { 
          // Text(item.toString()) 
          // .width('90%') 
          // .height(160) 
          // .backgroundColor(0xAFEEEE) 
          // .textAlign(TextAlign.Center) 
          // .fontSize(30) 
          // }, (item: string) => item) 
          Image($r('app.media.background')) 
            .backgroundColor(Color.Red) 
          Image($r('app.media.startIcon')) 
            .backgroundColor(Color.Red) 
          Image($r('app.media.background')) 
            .backgroundColor(Color.Red) 
          Image($r('app.media.startIcon')) 
            .backgroundColor(Color.Red) 
          Image($r('app.media.background')) 
            .backgroundColor(Color.Red) 
          Image($r('app.media.startIcon')) 
            .backgroundColor(Color.Red) 
        } 
        .width('100%') 
        .height('100%') 
        .cachedCount(2) 
        .index(0) 
        .autoPlay(false) 
        .interval(4000) 
        .loop(true) 
        .duration(1000) 
        .itemSpace(0) 
        .indicator(false) 
        .curve(Curve.Linear) 
        .onChange((index: number) => { 
          console.info(index.toString()) 
          this.currentIndex = index 
        }) 
        .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => { 
          console.info("index: " + index) 
          console.info("current offset: " + extraInfo.currentOffset) 
 
 
          // 在页面跟手滑动过程中，逐帧触发该回调。 
          let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, extraInfo) 
          this.currentIndex = currentIndicatorInfo.index 
        }) 
        .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => { 
          console.info("index: " + index) 
          console.info("targetIndex: " + targetIndex) 
          console.info("current offset: " + extraInfo.currentOffset) 
          console.info("target offset: " + extraInfo.targetOffset) 
          console.info("velocity: " + extraInfo.velocity) 
          // 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。 
          this.currentIndex = targetIndex 
 
        }) 
        .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => { 
          console.info("index: " + index) 
          console.info("current offset: " + extraInfo.currentOffset) 
        }) 
 
 
        Row() { 
          LazyForEach(this.data, (item: string, index: number) => { 
            Column() 
              .width(this.currentIndex === index ? 15 : 15) 
              .height(5)// 实现设置指示器的间距 
              .margin(0) 
              .borderRadius(5) 
              .backgroundColor(this.currentIndex === index ? Color.Red : Color.Gray) 
          }, (item: string) => item) 
        } 
        .margin({ bottom: 4 }) 
      } 
    }.width('100%') 
    .margin({ top: 5 }) 
  } 
}