HarmonyOS 鸿蒙Next List组件交换列表项问题

在onItemDragStart回调中设置拖拽过程中显示的内容。

在onItemDrop中获取拖拽起始位置，和拖拽插入位置，并在onItemDrop中调用changeListItemIndex函数完成交换数组位置。

参考如下示例：

[@Entry](/user/Entry) 

[@Component](/user/Component) 

struct Index { 

  [@State](/user/State) listArr: string[] = []; 

  [@Builder](/user/Builder) 

  pixelMapBuilder(text: string) { 

    Column() { 

      Text(text) 

        .fontSize(16) 

        .backgroundColor(0xDCDCDC) 

        .width(80) 

        .height(80) 

        .textAlign(TextAlign.Center) 

    } 

  } 

  aboutToAppear() { 

    for (let i = 0; i < 16; i++) { 

      this.listArr.push(i + ''); 

    } 

  } 

  // 交换listArr数组中listItem的位置 

  changeListItemIndex(index1: number, index2: number) { 

    let tempItem = this.listArr[index1]; 

    this.listArr[index1] = this.listArr[index2]; 

    this.listArr[index2] = tempItem; 

  } 

  build() { 

    Column() { 

      List() { 

        ForEach(this.listArr, (item: string) => { 

          ListItem() { 

            Text(item) 

          } 

          .width(80) 

          .height(80) 

          .backgroundColor(Color.White) 

          .borderRadius(4) 

          .margin({ top: 10 }) 

        }, (item: string) => item) 

      } 

      .width('100%') 

      .height(500) 

      .lanes({ minLength: 80, maxLength: 80 }) 

      .alignListItem(ListItemAlign.Center) 

      .onItemDragStart((event: ItemDragInfo, index: number) => { 

        return this.pixelMapBuilder(this.listArr[index]); 

      }) 

      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { 

        if (!isSuccess || insertIndex >= this.listArr.length) { 

          return; 

        } 

        this.changeListItemIndex(itemIndex, insertIndex); 

      }) 

    } 

    .width('100%') 

    .height('100%') 

    .backgroundColor(0xDCDCDC) 

  } 

}

加个这个   this.listExchangeCtrl = new ListExchangeCtrl<PoemCollectionModel>(this.appInfoList);

//为什么在这里处理数据源，长按拖动会有问题啊？

for (let e of datas) {

let model = new PoemCollectionModel();

model.nameStr = e[‘nameStr’];

model.author = e[‘author’];

model.visible = true;

this.appInfoList.push(model)

}

this.listExchangeCtrl = new ListExchangeCtrl<PoemCollectionModel>(this.appInfoList);

}

在HarmonyOS鸿蒙系统中，Next List组件交换列表项的功能实现通常依赖于组件内部的数据绑定和更新机制。当你需要交换Next List组件中的列表项时，你可以通过修改绑定到该组件的数据源来实现。

具体操作步骤如下：

1. 定位数据源：找到与Next List组件绑定的数据源，这通常是一个列表或数组。

2. 交换数据：在数据源中交换需要交换的列表项的位置。你可以使用临时变量或者集合的swap方法来完成这一操作。

3. 通知组件更新：在数据源发生变化后，确保Next List组件能够感知到这一变化并重新渲染。这通常是由数据绑定框架自动处理的，但如果你手动管理数据，则需要调用相应的刷新方法。

4. 验证结果：检查Next List组件是否已按照预期更新了列表项的显示顺序。

请注意，在操作过程中要确保数据的一致性和完整性，避免出现数据错位或丢失的情况。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html 。