HarmonyOS开发中，如何实现List无限循环？

Question

HarmonyOS开发中，如何实现List无限循环，比如List第一项再上拖是从列表最后一项这种情况。

Answer 1

代码如下：

// xxx.ets
@Entry
@Component
struct page {
  @State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  realLength = this.arr.length
  private scroller: Scroller = new Scroller()

  aboutToAppear(): void {
    const length: number = this.arr.length
    const arrTemp: Array<number> = JSON.parse(JSON.stringify(this.arr))
    for (let i = length - 1; i >= 0; i--) {
      this.arr.unshift(arrTemp[i])
    }
    for (let i = 0; i < length; i++) {
      this.arr.push(arrTemp[i])
    }
  }
  build() {
    Column() {
      List({ space: 20, initialIndex: 10, scroller: this.scroller }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
             .width('100%')
             .height(100)
             .fontSize(16)
             .textAlign(TextAlign.Center)
             .borderRadius(10)
             .backgroundColor(0xFFFFFF)
          }
        }, (item: number, ind
  }
}

Answer 2

创建自定义适配器，通过 position % items.size() 获取实际数据位置，实现循环效果。

import ohos.agp.components.BaseItemProvider;
import ohos.agp.components.Component;
import ohos.app.Context;

import java.util.List;

public class InfiniteLoopAdapter extends BaseItemProvider {
    private List<String> items;

    public InfiniteLoopAdapter(List<String> items) {
        this.items = items;
    }

    @Override
    public int getCount() {
        return Integer.MAX_VALUE; // 模拟无限循环
    }

    @Override
    public Object getItem(int position) {
        return items.get(position % items.size()); // 循环取值
    }

    @Override
    public Component getComponent(int position, Component convertView, ComponentContainer parent) {
        // 更新列表项视图
        Text itemText = (Text) convertView;
        itemText.setText((String) getItem(position));
        return itemText;
    }
}

在 ListContainer 中设置适配器，并将初始位置设为中间位置，避免滚动到边界时的跳动。

ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
InfiniteLoopAdapter adapter = new InfiniteLoopAdapter(items);
listContainer.setItemProvider(adapter);
listContainer.setCurrentIndex(Integer.MAX_VALUE / 2); // 设置初始位置