#鸿蒙通关秘籍#如何利用ArkUI Stack组件实现多层级瀑布流？

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: SwiperData[] = [];

  public totalCount(): number {
    return this.originDataArray.length;
  }

  public getData(index: number): SwiperData {
    return this.originDataArray[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

Stack() {
  LazyForEach(this.swiperDataSource, (item: SwiperData, index: number) => {
    Stack({ alignContent: Alignment.BottomStart }) {
      Image(item.imageSrc)
        .objectFit(ImageFit.Auto)
        .width('100%')
        .height('100%')
        .borderRadius('16px')
      // 添加其他UI元素
    }
  }).offset({ x: '10px', y: '10px' })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

Stack()
.gesture(
  PanGesture({ direction: PanDirection.Horizontal })
    .onActionStart((event: GestureEvent) => {
      startAnimation(event.offsetX < 0);
    })
)

function startAnimation(isLeft: boolean): void {
  animateTo({
    duration: 300,
  }, () => {
    let dataLength: number = swiperData.length;
    let tempIndex: number = isLeft ? currentIndex + 1 : currentIndex - 1 + dataLength;
    currentIndex = tempIndex % dataLength;
  })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.