HarmonyOS 鸿蒙Next如何将listitem的swipeAction滑动效果恢复至未滑动

HarmonyOS 鸿蒙Next如何将listitem的swipeAction滑动效果恢复至未滑动

【关键字】

• listitem
• swipeAction
• 滑动效果
• 恢复

【问题描述】

如何将listitem的swipeAction滑动效果恢复至未滑动？

【解决方案】

可以使用ListScroller提供的closeAllSwipeActions()方法将滑动效果进行恢复。

参考文档如下： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#closeallswipeactions11

示例代码如下：

@CustomDialog
struct CustomDialogExample {
    cancel?: () => void
    confirm?: () => void
    controller: CustomDialogController

    build() {
        Column() {
            Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
            Flex({ justifyContent: FlexAlign.SpaceAround }) {
                Button('cancel').onClick(() => {
                    this.controller.close()
                    if (this.cancel) this.cancel()
                }).backgroundColor(0xffffff).fontColor(Color.Black)
                Button('confirm').onClick(() => {
                    this.controller.close()
                    if (this.confirm) this.confirm()
                }).backgroundColor(0xffffff).fontColor(Color.Red)
            }.margin({ bottom: 10 })
        }
    }
}

@Entry
@Component
struct ListSwipePage {
    @State arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    private scrollerForList: ListScroller = new ListScroller()
    dialogController: CustomDialogController = new CustomDialogController({
        builder: CustomDialogExample({
            cancel: this.onCancel,
            confirm: this.onAccept,
        })
    })

    onCancel() {}

    onAccept() {}

    @Builder
    itemEnd() {
        Row() {
            Button("Delete").margin("4vp")
            Button("Set").margin("4vp")
            .onClick(() => {
                this.dialogController.open()
                this.scrollerForList.closeAllSwipeActions() // 重点是这行代码
            })
        }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
    }

    build() {
        Column() {
            List({ space: 5, scroller: this.scrollerForList }) {
                ForEach(this.arr, (item: number) => {
                    ListItem() {
                        Text("item" + item)
                        .width('100%')
                        .height(100)
                        .textAlign(TextAlign.Center)
                        .borderRadius(10)
                        .backgroundColor(0xFFFFFF)
                    }
                    .transition({ type: TransitionType.Delete, opacity: 0 })
                    .swipeAction({
                        end: {
                            builder: () => {
                                this.itemEnd()
                            },
                            onAction: () => {
                                animateTo({ duration: 1000 }, () => {
                                    let index = this.arr.indexOf(item)
                                    this.arr.splice(index, 1)
                                }), 
                            actionAreaDistance: 56
                        }
                    })
                }, (item: string) => item)
            }
        }
        .padding(20)
        .backgroundColor(0xDCDCDC)
        .width('100%')
        .height('100%')
    }
}