拖动实现列表重新排序

HarmonyOS

cbaby

2024-05-26 15:04:36

浏览

回答 1

待解决

回答 1

按赞同

按时间

dickhome

本文主要介绍关于对列表通过手动拖动实现重新排序的功能实现。

使用的核心API

组合手势

核心代码解释

1.首先通过实现一个列表。

Column() { 
  ForEach(this.myCards, (item: string, index: number) => { 
    this.myCardItem(item, index) 
  }, (item: string) => item); 
}

2.绑定组合手势，实现拖动单个Item实现顺序变动。

.gesture(GestureGroup(GestureMode.Sequence, 
  LongPressGesture({ repeat: false }) 
    .onAction((event) => { 
      console.log('===长按开始'); 
      this.startEditMode(index); 
    }) 
    .onActionCancel(() => { 
      console.log('===长按取消'); 
      this.endEditMode(); 
    }) 
    .onActionEnd((event) => { 
      console.log('===长按结束'); 
      this.endEditMode(); 
    }), 
  PanGesture(this.panOption) 
    .onActionStart((event) => { 
      console.log('===拖动开始'); 
      if (this.isEditMode) { 
        this.isMovedCard = true; 
      } 
    }) 
    .onActionUpdate((event) => { 
      console.log('===拖动更新'); 
      if (this.isEditMode) { 
        this.updatePosition(event.offsetY) 
      } 
    }) 
    .onActionEnd(() => { 
      console.log('===拖动结束') 
      if (this.isEditMode) { 
        this.isMovedCard = false; 
        this.endEditMode(); 
      } 
    }) 
))

3.拖动开始和结束的相关代码：

startEditMode(index: number) { 
  if (this.isEditMode) { 
    return; 
  } 
  this.isEditMode = true; 
  this.indexSelected = index; 
  this.curPosStartY = this.itemHeight * this.indexSelected; 
  this.curPosY = this.curPosStartY; 
 
  // 1秒未滑动自动取消排序，因为不会回调"长按结束"，也不会回调"滑动结束"。 
  setTimeout(() => { 
    if (!this.isMovedCard) { 
      this.endEditMode(); 
    } 
  }, 1000) 
} 
 
endEditMode() { 
  this.isEditMode = false; 
  this.indexSelected = -1; 
}

适配的版本信息

IDE版本：4.0.1.501

SDK版本：4.0.10.8