#鸿蒙通关秘籍#如何在HarmonyOS中利用ListItem实现滑动删除？

// 使用ArkTS编写示例
@Entry
@Component
struct SwipeDeleteExample {
  @State arr: Array<number> = [0, 1, 2, 3, 4]
  
  @Builder itemEnd() {
    Row() {
      Button("删除")
        .margin("4vp")
        .onClick(() => {
          // 删除操作
        })
    }
    .padding("8vp")
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('Item ' + item)
              .width('100%')
              .height(100)
              .fontSize(20)
              .textAlign(TextAlign.Center)
              .onClick(() => {
                // 点击事件
              })
          }
          .swipeAction({
            end: {
              builder: () => this.itemEnd(),
              onAction: () => {
                this.arr = this.arr.filter(val => val !== item)
              },
              actionAreaDistance: 60
            }
          })
        }, item => item)
      }
    }
    .width('100%')
    .padding(10)
    .backgroundColor(0xF5F5F5)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.