收起
自动换行
深色代码主题
复制
06-13 14:52:33.803   30081-30081   C0392D/com.dou...ceLazyForEach  com.xxx.xxx  W     [(100000:100000:scope)] Use repeat key for index: 3
06-13 14:52:33.804   30081-30081   C0392D/com.dou...ceLazyForEach  com.xxx.xxx  W     [(100000:100000:scope)] Use repeat key for index: 4
06-13 14:52:33.805   30081-30081   C0392D/com.dou...ceLazyForEach  com.xxx.xxx  W     [(100000:100000:scope)] Use repeat key for index: 13
06-13 14:52:33.806   30081-30081   C0392D/com.dou...ceLazyForEach  com.xxx.xxx  W     [(100000:100000:scope)] Use repeat key for index: 14
06-13 14:52:33.807   30081-30081   C0392D/com.dou...ceLazyForEach  com.xxx.xxx  W     [(100000:100000:scope)] Use repeat key for index: 15

进一步分析在数据懒加载的过程中，当不同数据项生成的键值相同时，框架的行为是不可预测的。在滑动过程中，LazyForEach会预加载划入划出当前页面的子组件，而新建的子组件和销毁的旧子组件具有相同的键值，框架可能取用错误的缓存，导致子组件渲染出现问题。
若未发现键值重复日志或问题，可能是数据源重复导致的，需要排查数据源是否重复。

分析结论

应用在数据懒加载的过程中，使用了重复的键值，导致子组件渲染出现问题。

修改建议

修改LazyForEach的键值生成函数，使每个数据项生成唯一的键值，保证渲染效果符合预期。示例代码如下：

收起
自动换行
深色代码主题
复制
@Entry
@Component
struct LazyForEachTest {
  private arr: ListDataSource = new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        LazyForEach(this.arr, (item: number) => {
          ListItem() {
            Text(item.toString())
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
      }
      .cachedCount(5)
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({
        strokeWidth: 2,
        color: 0xFFFFFF,
        startMargin: 20,
        endMargin: 20
      }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

以下是数据项中自定义数据源的实现：

收起
自动换行
深色代码主题
复制
class ListDataSource implements IDataSource {
  private list: number[] = [];
  private listeners: DataChangeListener[] = [];

  constructor(list: number[]) {
    this.list = list;
  }

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

  getData(index: number): number {
    return this.list[index];
  }

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

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }

  // 通知控制器数据删除
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    });
  }

  // 通知控制器添加数据
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    });
  }

  // 在指定索引位置删除一个元素
  public deleteItem(index: number): void {
    this.list.splice(index, 1);
    this.notifyDataDelete(index);
  }

  // 在指定索引位置插入一个元素
  public insertItem(index: number, data: number): void {
    this.list.splice(index, 0, data);
    this.notifyDataAdd(index);
  }
}

组件间布局遮挡

点击图片，图片异常上下跳动

意见反馈

以上内容对您是否有帮助？

意见反馈

如果您有其他疑问，您也可以通过开发者社区问答频道来和我们联系探讨。

社区提问 AI 助手提问