#鸿蒙通关秘籍#如何在HarmonyOS中为ListItem设置长距离滑动删除?

HarmonyOS
2024-12-04 14:48:09
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
DL红日初升

在HarmonyOS中可以为ListItem配置长距离滑动删除组件,通过SwipeActionItem对象实现该功能:

@Entry
@Component
struct LongSwipeActionExample {
  @State listData: Array<number> = [0, 1, 2, 3]

  @Builder leftSwipeAction() {
    Button("删除")
      .backgroundColor(0xFF0000)
      .onClick(() => {
        // 删除
      })
      .margin("8vp")
  }

  build() {
    Column() {
      List() {
        ForEach(this.listData, (item: number) => {
          ListItem() {
            Text('内容 ' + item)
              .width('100%')
              .height(60)
              .fontSize(16)
              .textAlign(TextAlign.Center)
          }
          .swipeAction({
            start: {
              builder: this.leftSwipeAction(),
              actionAreaDistance: 80,
              onEnterActionArea: () => {
                // 进入删除区域
              },
              onExitActionArea: () => {
                // 退出删除区域
              },
              onAction: () => {
                this.listData = this.listData.filter(value => value !== item)
              }
            }
          })
        })
      }
    }
    .backgroundColor(0xF0F0F0)
    .width('100%')
    .padding(12)
    .height('100%')
  }
}

该实例通过SwipeActionItem对象,管理长距离刮动来删除操作,通过回调函数对进入和退出删除区域进行处理。

分享
微博
QQ
微信
回复
2024-12-04 16:00:32
相关问题