【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%')
}
}