HarmonyOS 鸿蒙Next列表左滑删除swipeAction如何实现？侧滑菜单开发指南

HarmonyOS 鸿蒙Next列表左滑删除swipeAction如何实现？侧滑菜单开发指南 HarmonyOS 5.0，DevEco Studio 5.0

  • 需要实现列表项左滑显示删除按钮的功能
  • 不清楚swipeAction的正确使用方式
  • 希望了解如何自定义侧滑菜单内容

希望了解HarmonyOS ListItem的swipeAction属性使用方法，实现左滑删除功能

3 回复

ListItem如何实现左滑删除功能：https://developer.huawei.com/consumer/cn/doc/architecture-guides/tools-v1_2-ts_89-0000002359786330

更多关于HarmonyOS 鸿蒙Next列表左滑删除swipeAction如何实现？侧滑菜单开发指南的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用SwipeAction组件实现列表项左滑删除。该组件通过设置SwipeAction的direction为End（或Start）定义侧滑方向，并在content中放置列表项内容，在builder中放置删除等操作按钮。开发者需在List容器内使用ForEach渲染SwipeAction，通过状态变量控制数据删除与UI更新。

在HarmonyOS Next中，使用ListItem的swipeAction属性是实现侧滑操作的推荐方式。以下是实现左滑删除及自定义侧滑菜单的核心方法：

1. 基础左滑删除实现 在ListItem组件上设置swipeAction属性，值为一个SwipeActionOptions对象。通过其start参数配置左滑（从右向左滑动）时显示的按钮。

// 示例：基础删除功能
ListItem() {
  // 列表项内容...
}
.swipeAction({
  start: {
    id: 'delete',
    builder: () => {
      return Button({ type: ButtonType.Circle }) // 构建删除按钮
        .backgroundColor(Color.Red)
        .onClick(() => {
          // 执行删除数据操作
        })
    },
    background: Color.Red,
    icon: $r('app.media.ic_delete'), // 可选图标
    title: '删除' // 可选文本
  }
})

2. 自定义侧滑菜单内容 builder函数支持返回任意自定义组件，实现复杂菜单：

.swipeAction({
  start: {
    builder: () => {
      return Row() { // 使用Row构建横向菜单
        Button('置顶')
          .onClick(() => {})
        Button('标记')
          .onClick(() => {})
        Button('删除')
          .backgroundColor(Color.Red)
          .onClick(() => {})
      }
    }
  }
})

3. 关键配置说明

  • id: 动作项标识，用于在事件回调中区分
  • background: 滑动区域的背景色
  • icon/title: 系统提供的快捷样式（与builder二选一）
  • builder: 完全自定义滑动区域UI

4. 注意事项

  • 滑动操作默认触发需要最小拖动距离，可通过swipeThreshold配置
  • 支持start（左滑）和end（右滑）两个方向
  • 使用onActionTrigger事件可统一处理动作触发
  • 列表数据更新后需手动调用closeSwipeAction()关闭已打开菜单

此实现方式性能优化较好，手势交互符合系统规范。

回到顶部