HarmonyOSBaseLibs/src/main/ets/view/SwipeView.ets

import { SZYXLocalStorageHelper, ToolsHelper } from '../../../../Index'

@Component
export struct SwipeView {
  private _scroller: Scroller = new Scroller()
  @State h: number = 40
  marginBottom: number = 0
  marginTop: number = 0
  brtLeft: number = 0
  brtRight: number = 0
  brbLeft: number = 0
  brbRight: number = 0
  @State downX: number = 0
  onItemClick?: () => void
  onDelete?: () => void
  ids: string = ToolsHelper.getUuid()
  @LocalStorageLink('XBasicSwipeClick') @Watch('onClickIdChange') clickId: string | undefined = undefined

  onClickIdChange() {
    if (this.clickId !== this.ids) {
      this._scroller.scrollTo({
        xOffset: 0, yOffset: 0,
        animation: { duration: 100, curve: Curve.Linear }
      })
    }
  }

  @Builder
  doNothingBuilder() {
  }

  toNumber(len?: Length): number {
    if (typeof len === "number") {
      return len;
    }
    if (typeof len === "string") {
      return Number(len);
    }
    return 70
  }

  @BuilderParam customBuilderParam: () => void = this.doNothingBuilder

  // @BuilderParam btnBuilder: () => void = this.doNothingBuilder

  build() {
    Scroll(this._scroller) {
      Row() {
        Column() {
          this.customBuilderParam()
        }.width('100%').onClick(() => {
          // SZYXLocalStorageHelper.storage.setOrCreate('XBasicSwipeClick', this.ids)
          this._scroller.scrollTo({
            xOffset: 0, yOffset: 0,
            animation: { duration: 100, curve: Curve.Linear }
          })
          this.onItemClick && this.onItemClick()
        })

        Text('删除')
          .backgroundColor('red')
          .width(70)
          .fontColor('white')
          .height(this.h - this.marginBottom - this.marginTop)
          .textAlign(TextAlign.Center)
          .fontSize(16)
          .borderRadius({
            topLeft: this.brtLeft,
            topRight: this.brtRight,
            bottomLeft: this.brbLeft,
            bottomRight: this.brbRight
          })
          .onClick(() => {
            // SZYXLocalStorageHelper.storage.setOrCreate('XBasicSwipeClick', this.ids)
            this._scroller.scrollTo({
              xOffset: 0, yOffset: 0,
              animation: { duration: 100, curve: Curve.Linear }
            })
            this.onDelete && this.onDelete()
          })
      }.onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
        this.h = this.toNumber(newValue.height) ?? 40
      }).alignItems(VerticalAlign.Center)

    }.width('100%').scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off)
    .onTouch((event: TouchEvent) => { // 触摸事件
      // 判断是否有打开删除组件，有则关闭

      // 根据触摸类型判断
      switch (event.type) {
        case TouchType.Down: // 触摸按下
          SZYXLocalStorageHelper.storage.setOrCreate('XBasicSwipeClick', this.ids)
          // 记录按下的x轴坐标
          this.downX = event.touches[0].x
          break
        case TouchType.Up: // 触摸抬起
          // 触摸抬起，根据x轴总偏移量，判断是否打开删除
          let xOffset = event.touches[0].x - this.downX
          // 防止消费点击事件
          if (xOffset == 0) {
            return
          }
          // 滑到x轴的位置
          let toxOffset = 0
          // 开启删除的对象置为null
          // 偏移量超过删除按钮一半且左滑，设置打开
          if (Math.abs(xOffset) > 35 && xOffset < 0) {
            // 删除布局宽度
            toxOffset = 70
          }
          // 滑动指定位置，设置动画
          this._scroller.scrollTo({
            xOffset: toxOffset, yOffset: 0,
            animation: { duration: 300, curve: Curve.Linear }
          })
          // 重置按下的x轴坐标
          this.downX = 0
          break
      }
    })
  }
}