HarmonyOS鸿蒙Next中列表项交换案例

HarmonyOS鸿蒙Next中列表项交换案例

参考华为官方案例，具体地址如下

https://gitee.com/harmonyos_samples/list-exchange

如果数据源为固定值，则案例没有问题，如果是动态获取的，则拖拽报错（Error message:Obj is not a Valid object）

4 回复

可以用V2的Repeat这个性能会好一些

更多关于HarmonyOS鸿蒙Next中列表项交换案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


已解决了，开始的时候

在aboutToAppear里面获取值以后，再绑定一次就可以了。

this.listExchangeCtrl = new ListExchangeCtrl(this.appInfoList, this.UIContext);

在HarmonyOS Next中实现列表项交换，可通过以下方式：

  1. 使用ArkUI的List组件配合数据绑定
  2. 操作数据源数组进行元素位置交换
  3. 调用List组件的refresh方法刷新界面

示例代码片段（TypeScript）：

// 假设items是@State装饰的数组
swapItems(index1: number, index2: number) {
  [this.items[index1], this.items[index2]] = 
    [this.items[index2], this.items[index1]];
  this.items = [...this.items]; // 触发刷新
}

关键点：直接修改数组引用才能触发UI更新。

在HarmonyOS Next中处理动态数据源列表交换时，出现"Obj is not a Valid object"错误通常是由于数据绑定或状态管理问题导致的。以下是关键解决方案：

  1. 确保数据源是响应式的：
  1. 拖拽事件处理时：
  • 检查拖拽回调中获取的index是否有效
  • 确保在交换元素时使用深拷贝而非引用
  1. 推荐做法：
[@State](/user/State) items: Array<ItemType> = []

onDragEnd(event: DragEvent) {
  const from = event.from.index
  const to = event.to?.index
  if (to === undefined) return
  
  // 使用扩展运算符创建新数组
  const newItems = [...this.items]
  const temp = newItems[from]
  newItems.splice(from, 1)
  newItems.splice(to, 0, temp)
  this.items = newItems // 触发UI更新
}
  1. 注意事项：
  • 动态数据加载完成后才能启用拖拽
  • 列表项的key需要保持唯一且稳定
  • 对于大数据集考虑使用LazyForEach优化性能
回到顶部