HarmonyOS 开发实践 —— 基于滚动组件的手势处理

原创

小帅聊鸿蒙

发布于 2024-12-05 15:53:18

3460

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

场景一：实现左滑阻尼效果

效果图

方案

在List组件上绑定滑动手势，在List里面最后一个ListItem内部放入Ellipse和Text组件，在滑动手势onActionUpdate回调里控制ListItemGroup组件的offset属性left参数和Ellipse的宽度达到左滑阻尼的效果。

核心代码

List({ initialIndex: 0, scroller: this.scroller }) {
  ListItemGroup({ space: 20 }) {
    ForEach(this.arr, (item: number) => {
      ListItem() {
        Text('' + item)
          .width(80)
          .height(100)
          .fontSize(16)
          .textAlign(TextAlign.Center)
          .borderRadius(10)
          .backgroundColor(0xFFFFFF)
      }
    }, (item: string) => item)
  }
  .offset({ left: this.offsetLeft })
 
  ListItem() {
    this.itemEnd()
  }
}
.width('100%')
.height(120)
.scrollBar(BarState.Off)
.listDirection(Axis.Horizontal)
.edgeEffect(EdgeEffect.None)
.backgroundColor(0xDCDCDC)
.padding(10)
.onReachEnd(() => {
  this.isEnd = true
  console.log('is end')
})
.onScrollFrameBegin((offset: number) => {
  console.log('offset', offset)
  if (!this.scroller.isAtEnd()) {
    this.isEnd = false
  }
  if (this.ellipseWidth > 0) {
    return { offsetRemain: 0 }
  }
  return { offsetRemain: offset }
})
.parallelGesture(
  PanGesture({ direction: PanDirection.Horizontal, distance: 1 })
    .onActionStart(() => {
      this.slidOffsetX = 0
    })
    .onActionUpdate((event: GestureEvent) => {
      if (event && this.isEnd) {
        // 限制offsetLeft大于-60小于0
        if (event.offsetX - this.slidOffsetX < -60) {
          this.offsetLeft = -60
        } else if (event.offsetX - this.slidOffsetX > 0) {
          this.offsetLeft = 0
        } else {
          this.offsetLeft = event.offsetX - this.slidOffsetX
        }
        this.ellipseWidth = (-this.offsetLeft) / 1.5
      } else {
        // 已滑动的偏移量x保存下来，用于处理还未至底部就开始滑动的情况
        this.slidOffsetX = event.offsetX
      }
    })
    .onActionEnd((event: GestureEvent) => {
      console.info('Pan end')
      this.offsetLeft = 0
      this.ellipseWidth = 0
      if (event.offsetX < 0) {
        console.log('跳转')
      }
    })
)

场景二：左滑删除，类似点击弹出 swipeAction 的效果

效果图

方案

在ListItem组件上绑定滑动手势，在滑动手势onActionUpdate事件里控制ListItem的属性offset的参数x的值，在onActionEnd事件里判断当前左滑的偏移量控制是否拉出删除按钮，最后给ListItem绑定点击事件，使用animateTo展开删除按钮。

核心代码

ListItem() {
  Row() {
    Text('item' + this.item.num)
      .width('100%')
      .height(100)
      .fontSize(16)
      .textAlign(TextAlign.Center)
      .borderRadius(10)
      .backgroundColor(0xFFFFFF)
    Row() {
      Button('删除')
    }
    .width(120)
    .justifyContent(FlexAlign.Center)
  }
}
.offset({ x: this.item.offsetX })
.transition({ type: TransitionType.Delete, opacity: 0 })
.priorityGesture(
  PanGesture({ direction: PanDirection.Horizontal, distance: 1 })
    .onActionUpdate((event: GestureEvent) => {
      if (this.item.isDelShow) {
        // 删除按钮显示状态
        if (-120 + event.offsetX < -120) {
          this.item.offsetX = -120
        } else if (-120 + event.offsetX > 0) {
          this.item.offsetX = 0
        } else {
          this.item.offsetX = -120 + event.offsetX
        }
      } else {
        // 删除按钮未显示状态
        if (event.offsetX < -120) {
          this.item.offsetX = -120
        } else if (event.offsetX > 0) {
          this.item.offsetX = 0
        } else {
          this.item.offsetX = event.offsetX
        }
      }
    })
    .onActionEnd((_event: GestureEvent) => {
      console.log('this.item.offsetX', this.item.offsetX)
      if (this.item.offsetX > -60) {
        animateTo({
          duration: 300,
        }, () => {
          this.item.offsetX = 0
          this.item.isDelShow = false
        })
      } else {
        animateTo({
          duration: 300,
        }, () => {
          this.item.offsetX = -120
          this.item.isDelShow = true
        })
      }
    })
)
.onClick(() => {
  animateTo({
    duration: 300,
  }, () => {
    this.item.offsetX = -120
    this.item.isDelShow = true
  })
})