HarmonyOS ListItem的swipeAction(end:)问题

ListItem的swipeAction(end:)中的end点击后如何收回左划的按钮?

HarmonyOS
18h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

可以使用ListScroller提供的closeAllSwipeActions()方法将滑动效果进行恢复,参考文档如下:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#closeallswipeactions11

参考demo:

// xxx.ets
@Entry
@Component
struct Index {
  @State arr: number[] = [0, 1, 2, 3, 4]
  @State enterEndDeleteAreaString: string = "not enterEndDeleteArea"
  @State exitEndDeleteAreaString: string = "not exitEndDeleteArea"
  private listScroller: ListScroller = new ListScroller()
  @Builder
  itemEnd() {
    Row() {
      Button("Delete").margin("4vp")
        .onClick(() => {
          // 收回左划的按钮
          this.listScroller.closeAllSwipeActions()
        })
      Button("Set").margin("4vp")
        .onClick(() => {
          // 收回左划的按钮
          this.listScroller.closeAllSwipeActions()
        })
    }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
  }
  build() {
    Column() {
      List({ space: 10, scroller: this.listScroller }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text("item" + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .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,
              onEnterActionArea: () => {
                this.enterEndDeleteAreaString = "enterEndDeleteArea"
                this.exitEndDeleteAreaString = "not exitEndDeleteArea"
              },
              onExitActionArea: () => {
                this.enterEndDeleteAreaString = "not enterEndDeleteArea"
                this.exitEndDeleteAreaString = "exitEndDeleteArea"
              }
            }
          })
        }, (item: string) => item)
      }
      Text(this.enterEndDeleteAreaString).fontSize(20)
      Text(this.exitEndDeleteAreaString).fontSize(20)
    }
    .padding(10)
    .backgroundColor(0xDCDCDC)
    .width('100%')
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
15h前
相关问题
HarmonyOS listItem问题
287浏览 • 1回复 待解决
HarmonyOS listitem位置保持问题
32浏览 • 1回复 待解决
linear-gradient不支持start,end属性
852浏览 • 1回复 待解决
HarmonyOS 如何实现Listitem拖拽排序
59浏览 • 1回复 待解决
List及ListItem组件使用
1783浏览 • 1回复 待解决
HarmonyOS ListItem之间存在空隙
388浏览 • 1回复 待解决