使用场景

滑动删除是提升列表操作效率的经典交互模式。比如消息列表：左滑删除一条消息;待办事项：左滑标记完成或删除任务;文件管理器：左滑删除或分享文件等都是其经典的使用交互场景。

实现效果

完成思路

一、封装与复用：将滑动逻辑封装在SwipeItem组件中，使其成为一个可复用的UI单元。父组件只需关心数据和删除逻辑，无需关心滑动实现细节。

二、状态是桥梁：@State translateX是连接手势事件和UI视图的桥梁。手势改变状态，状态驱动UI更新。

三、@BuilderParam的妙用：使用@BuilderParam让SwipeItem组件更加灵活，父组件可以自由定义列表项内部的具体内容，实现了高内聚低耦合。

四、动画是点睛之笔：在onActionEnd中使用animateTo处理“收尾”工作，无论是自动滑出还是平滑回弹，都极大地提升了精致感。

完整代码

@Component
export struct SwipeItem {
  // 子组件接收一个删除回调函数
  onDelete?: () => void;
  // 子组件接收要显示的内容，使用构建器函数 [@BuilderParam](/user/BuilderParam)
  [@BuilderParam](/user/BuilderParam) content?: () => void;

  // 1. 状态变量：控制列表项的水平偏移
  [@State](/user/State) translateX: number = 0;
  // 定义删除按钮的宽度
  private readonly DELETE_BUTTON_WIDTH: number = 80;
  // 定义触发删除的阈值
  private readonly DELETE_THRESHOLD: number = -100;

  build() {
    Stack({ alignContent: Alignment.End }) {
      // 删除按钮（在底层）
      Button('删除')
        .width(this.DELETE_BUTTON_WIDTH)
        // .height('100%')
        .backgroundColor(Color.Red)
        .fontColor(Color.White)
        .onClick(() => {
          // 点击删除按钮时，执行删除动画并调用回调
          animateTo({ duration: 300 }, () => {
            this.translateX = -this.DELETE_BUTTON_WIDTH;
          });
          if (this.onDelete) {
            this.onDelete();
          }
        })

      // 列表项主内容（在顶层）
      Row() {
        // 使用 [@BuilderParam](/user/BuilderParam) 渲染父组件传入的内容
        if (this.content) {
          this.content()
        }
      }
      .width('100%')
      .height(60)
      .backgroundColor('#FFFFFF')
      .borderRadius(8)
      // 2. 将位移与状态变量绑定
      .translate({ x: this.translateX })
      // 3. 绑定滑动手势
      .gesture(
        PanGesture({ fingers: 1, direction: PanDirection.Horizontal })
          .onActionUpdate((event: GestureEvent) => {
            // 实时更新偏移量，限制只能向左滑
            this.translateX = Math.max(event.offsetX, -this.DELETE_BUTTON_WIDTH);
          })
          .onActionEnd(() => {
            // 4. 手势结束时的判断与动画
            if (this.translateX < this.DELETE_THRESHOLD) {
              // 如果滑动距离超过阈值，则自动滑到删除按钮位置
              animateTo({ duration: 200, curve: Curve.EaseOut }, () => {
                this.translateX = -this.DELETE_BUTTON_WIDTH;
              });
            } else {
              // 否则，回弹到原位
              animateTo({ duration: 200, curve: Curve.EaseOut }, () => {
                this.translateX = 0;
              });
            }
          })
      )
    }
    .width('100%')
    .margin({ bottom: 8 })
  }
}

// 文件名: Index.ets

import { SwipeItem } from './SwipeItem'; // 导入子组件

@Entry
@Component
struct Index {
  // 父组件管理数据源
  [@State](/user/State) messageList: string[] = [
    '鸿蒙OS 5 正式发布',
    'ArkTS 成为第一开发语言',
    '元服务生态蓬勃发展',
    '滑动删除交互体验极佳',
    '学习鸿蒙，正逢其时'
  ];

  build() {
    Column() {
      Text('消息列表 (左滑删除)')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 })

      List({ space: 8 }) {
        ForEach(this.messageList, (item: string, index: number) => {
          ListItem() {
            // 5. 使用自定义的 SwipeItem 组件
            SwipeItem({
              // 传入删除逻辑的回调函数
              onDelete: () => {
                this.messageList.splice(index, 1);
              },
              // 使用 @Builder 传入自定义内容
              content: () => {
                this.ItemContent(item)
              }
            })
          }
        }, (item: string) => item)
      }
      .layoutWeight(1)
      .width('90%')
      .padding({ left: 10, right: 10 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
  }

  // 定义列表项内容的构建器函数
  @Builder ItemContent(text: string) {
    Text(text)
      .fontSize(18)
      .fontColor('#333333')
      .margin({ left: 15 })
  }
}