HarmonyOS 鸿蒙Next 列表控件是否同时支持列表项的自由排序和左右侧滑

发布于 1周前 作者 nodeper 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 列表控件是否同时支持列表项的自由排序和左右侧滑

列表控件是否同时支持列表项的自由排序和左右侧滑

2 回复

您好,列表拖动实现列表重新排序请参考此demo:

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; }

组合手势-手势处理-组件通用信息-ArkTS组件-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者 (huawei.com)

HarmonyOS 鸿蒙Next 列表控件同时支持列表项的自由排序和左右侧滑

在HarmonyOS鸿蒙系统中,列表控件(如List组件)确实支持丰富的交互功能。对于列表项的自由排序,可以通过ArkUI框架中的拖拽排序功能实现,利用Drag-and-Drop组件,设置可拖拽项和放置目标,并监听相关拖拽事件来更新数据源和UI。

至于左右侧滑功能,通常这依赖于应用本身的UI设计和手势识别逻辑。在某些应用中,可以通过设置特定的手势识别逻辑,为列表项添加左右侧滑的效果,并展示相应的操作按钮(如置顶、屏蔽、关闭会话等)。

综上所述,HarmonyOS鸿蒙Next列表控件在理论上可以同时支持列表项的自由排序和左右侧滑功能,但具体实现需依赖开发者的设计和实现逻辑。

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

回到顶部