HarmonyOS 鸿蒙Next中备忘录待办卡片无法调整顺序

通过拖拽调整待办事项顺序可参考以下

实现思路

1. 通过结合LongPressGesture与PanGesture，共同实现列表手势拖动能力。

// 以下组合手势为顺序识别，当长按手势事件未正常触发时，则不会触发拖动手势事件
GestureGroup(GestureMode.Sequence,
  LongPressGesture()  // 长按
    .onAction((event: GestureEvent) => {
      // 记录长按状态
    }),
  PanGesture()        // 拖动
    .onActionStart(() => {
      // 计算list开始拖动的偏移
    })
    .onActionUpdate((event: GestureEvent) => {
      // 计算item移动坐标时，需要算上list滚动的距离
      // 获取手指信息
    })
    .onActionEnd((event: GestureEvent) => {
      // 拖拽结束后放置item
    })
)

1. 通过animateTo，实现内容的拖动、放置和改变位置效果

onMove(item: T, offsetY: number): void {
  // 触发拖动时，被覆盖子组件缩小与恢复的动画
  let shrinkScale: number = 1 - value / 10; // 计算缩放比例，value值缩小10倍
  if (index < this.modifier.length - 1) { // 当拖拽的时候，被交换的对象会缩放
    this.modifier[index + 1].scale = direction > 0 ? shrinkScale : 1;
  }
  if (index > 0) {
    this.modifier[index - 1].scale = direction > 0 ? 1 : shrinkScale;
  }
  // 处理列表项的切换操作
  if (Math.abs(this.offsetY) > ITEM_HEIGHT / 2) {
    getUIContext()?.animateTo({ curve: Curve.Friction, duration: ANIMATE_DURATION }, () => {
      this.offsetY -= direction * ITEM_HEIGHT;
      this.dragRefOffset += direction * ITEM_HEIGHT;
      this.modifier[index].offsetY = this.offsetY;
      let target = index + direction // 目标位置索引
      if (target !== -1 && target <= this.modifier.length) 
        this.changeItem(index, target);
      }
    })
  }
}

1. 拖拽结束后，通过animateTo，实现拖拽内容和被拖拽内容的恢复动画效果。

onDrop(item: T): void {
  // 通过interpolatingSpring(0, 1, 400, 38)构造插值器弹簧曲线对象初始速度为0，质量为1，刚度为400，阻尼为38
  getUIContext()?.animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
    this.state = OperationStatus.DROPPING;
    if (index < this.modifier.length - 1) {
      this.modifier[index + 1].scale = 1;
    }
    if (index > 0) {
      this.modifier[index - 1].scale = 1;
    }
  })
  // 通过interpolatingSpring(14, 1, 170, 17)构造插值器弹簧曲线对象初始速度为14，质量为1，刚度为170，阻尼为17
  getUIContext()?.animateTo({ curve: curves.interpolatingSpring(14, 1, 170, 17) }, () => {
    this.state = OperationStatus.IDLE;
    this.modifier[index].hasShadow = false;
    this.modifier[index].scale = 1; // 初始化缩放比例
    this.modifier[index].offsetY = 0; // 初始化偏移量
  })
}

具体代码可参考文档

【背景知识】

待办事项可以通过animateTo、List组件、LongPressGesture和PanGesture实现文件列表拖动、插入效果，满足待办事项便贴的基本需求。

手势处理
animateTo
LongPressGesture
PanGesture