HarmonyOS鸿蒙Next中拖拽List组件内的子组件时，如何解决被拖拽的子组件位置会向两边偏移的问题

HarmonyOS鸿蒙Next中拖拽List组件内的子组件时，如何解决被拖拽的子组件位置会向两边偏移的问题

【问题现象】

当在List组件内拖拽交换子组件位置时，拖拽开始时，被拖拽的子组件位置会偏到左侧或右侧。

【背景知识】

【定位思路】

绑定onDragStart事件实现ListItem拖拽，仅能实现子组件最终位置变换，并不能很好地实现拖拽过程中平滑过渡的动画过程。

可以采用组合手势和显示动画的方式来控制子组件拖拽时的位置变化情况，实现平滑拖拽效果。

【解决方案】

1. 顺序识别组合手势

（1）长按手势事件LongPressGesture，标记被拖拽元素；

（2）拖动手势事件PanGesture，记录被拖拽元素的位移。

代码示例如下：

GestureGroup(GestureMode.Sequence,
  LongPressGesture({ repeat: true })
    .onAction((event?: GestureEvent) => {
      // 长按标记被拖拽元素
    })
    .onActionEnd(() => {
      // 结束长按，取消标记
    }),
  PanGesture({ fingers: 1, direction: null, distance: 0 })
    .onActionStart(() => {
      // 开始拖动，初始化移动距离
    })
    .onActionUpdate((event: GestureEvent) => {
      // 拖动过程中计算移动距离，根据位移交换相邻元素顺序
    })
    .onActionEnd((event: GestureEvent) => {
      // 处理拖动结束逻辑
    })
)

2. 在元素缩放和位移过程中，使用显示动画animateTo控制动画效果

代码示例如下：

// 自定义动画曲线
animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
  // 处理拖动过程中元素交换
  this.offsetY += this.ITEM_INTV
  this.dragRefOffset -= this.ITEM_INTV
  this.itemMove(index, index - 1)
})

更多关于HarmonyOS鸿蒙Next中拖拽List组件内的子组件时，如何解决被拖拽的子组件位置会向两边偏移的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中拖拽List组件内的子组件时，如何解决被拖拽的子组件位置会向两边偏移的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，拖拽List组件内的子组件时，若出现被拖拽的子组件位置向两边偏移的问题，可以通过以下方式解决：

1. 顺序识别组合手势

  • 使用LongPressGesture标记被拖拽元素。
  • 使用PanGesture记录被拖拽元素的位移。

2. 使用显示动画animateTo控制动画效果

  • 在元素缩放和位移过程中，使用animateTo实现平滑过渡。

代码示例如下：

GestureGroup(GestureMode.Sequence,
  LongPressGesture({ repeat: true })
    .onAction((event?: GestureEvent) => {
      // 长按标记被拖拽元素
    })
    .onActionEnd(() => {
      // 结束长按，取消标记
    }),
  PanGesture({ fingers: 1, direction: null, distance: 0 })
    .onActionStart(() => {
      // 开始拖动，初始化移动距离
    })
    .onActionUpdate((event: GestureEvent) => {
      // 拖动过程中计算移动距离，根据位移交换相邻元素顺序
    })
    .onActionEnd((event: GestureEvent) => {
      // 处理拖动结束逻辑
    })
)

// 自定义动画曲线
animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
  // 处理拖动过程中元素交换
  this.offsetY += this.ITEM_INTV
  this.dragRefOffset -= this.ITEM_INTV
  this.itemMove(index, index - 1)
})
回到顶部