HarmonyOS鸿蒙Next中如何手动实现左滑删除功能

HarmonyOS鸿蒙Next中如何手动实现左滑删除功能 在list中有时候需要左滑删除某个item的功能，HarmonyOS有个swipeAction组件可以实现，但是swipeAction不能让item的背景颜色跟着一起移动，如何实现？

3 回复

【解决方案】

具体的实现方案是在ListTem的元素中在加上一个删除按钮：

ListItem() {
  Row() {
    ListItem()
    if (isShow == true) {    //用于控制删除按钮是否显示出来
      Row() {
        Button('删除')
          .width(this.width[index])   //控制width的宽度，宽度变化时，就能显示出按钮随着滑动宽度变化的效果
      }
    }
  }
}
// 在通过PanGesture事件中控制滑动相关的设置：
PanGesture({direction: PanDirection.Horizontal})
  .onActionStart(()=>{
    //开始移动
  })
  .onActionUpdate((event: GestureEvent) => {
    //更新滑动位置
  })
  .onActionEnd(()=>{
    //结束滑动时设置
  })

更多关于HarmonyOS鸿蒙Next中如何手动实现左滑删除功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，实现左滑删除功能主要使用SwipeAction组件。该组件是ArkUI提供的标准容器，用于为列表项添加滑动操作。

核心步骤：

  1. 在List的列表项内，使用SwipeAction包裹内容。
  2. 通过SwipeAction的builder参数分别定义主组件（通常为列表项内容）和滑动后出现的次组件（即删除按钮）。
  3. 在次组件（删除按钮）的点击事件中，处理删除对应数据的业务逻辑。

示例代码结构：

SwipeAction({
  builder: (currentOffset: number) => {
    // 1. 主组件：列表项UI
    return ListItemContent...;
    // 2. 次组件：滑动后显示的删除按钮
    return Button('删除').onClick(() => {
      // 删除数据逻辑
    });
  }
})

通过控制currentOffset可以管理滑动手势。

在HarmonyOS Next中，要实现左滑删除时item背景颜色跟随移动的效果，可以通过自定义布局和手势监听来实现，而不是完全依赖SwipeAction组件。以下是核心实现思路：

  1. 使用Stack布局：将每个列表项放在Stack容器中，底层放置一个带背景色（如红色删除按钮）的组件，上层放置正常显示的item内容。

  2. 结合手势监听：给上层的item内容添加PanGesture手势监听，通过手指滑动距离动态控制上层内容的偏移量（translate属性），从而露出底层的删除背景。

  3. 关键代码示例：

@State itemOffset: number = 0;

build() {
  Stack({ alignContent: Alignment.Start }) {
    // 底层删除背景
    Row()
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Red)
    
    // 上层可滑动内容
    Row() {
      // item正常内容
    }
    .translate({ x: this.itemOffset })
    .gesture(
      PanGesture()
        .onActionUpdate((event: GestureEvent) => {
          // 控制滑动范围，通常限制在删除按钮宽度内
          this.itemOffset = Math.max(-DELETE_WIDTH, Math.min(0, event.offsetX));
        })
        .onActionEnd(() => {
          // 根据滑动距离决定是展开还是收回
          if (this.itemOffset < -THRESHOLD) {
            this.itemOffset = -DELETE_WIDTH; // 展开删除按钮
          } else {
            this.itemOffset = 0; // 收回
          }
        })
    )
  }
}

  1. 动画效果：在onActionEnd中可以使用animateTo添加平滑动画，提升用户体验。

  2. 删除操作：在底层删除背景上添加点击事件，执行删除逻辑后需要重置itemOffset为0。

这种方法可以精确控制滑动过程中的背景显示，实现背景颜色跟随移动的效果。相比SwipeAction组件，自定义实现更加灵活，能够满足个性化UI需求。

回到顶部