@Component
export struct SwipeView {
  private _scroller: Scroller = new Scroller()
  @State h: Length = 40
  @State downX: number = 0

  @Builder
  doNothingBuilder() {
  }

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

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

  build() {
    Scroll(this._scroller) {
      Row() {
        this.customBuilderParam()
        Text('删除')
          .backgroundColor('red')
          .width(70)
          .fontColor('white')
          .height(this.h)
          .textAlign(TextAlign.Center)
          .fontSize(16)
        // if (this.btnBuilder === this.doNothingBuilder) {
        //   Text('删除')
        // }
        // if (this.btnBuilder !== this.doNothingBuilder) {
        //   this.btnBuilder()
        // }
      }.onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
        this.h = newValue.height ?? 40
      }).alignItems(VerticalAlign.Center)

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

      // 根据触摸类型判断
      switch (event.type) {
        case TouchType.Down: // 触摸按下
          // 记录按下的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
      }
    })
  }
}