HarmonyOS 鸿蒙Next中当滑过一个组件时，什么事件会触发

HarmonyOS 鸿蒙Next中当滑过一个组件时，什么事件会触发 比如从任意(其他)位置按下并滑过一个按钮时，这个按钮怎么才能知道手指滑过自己了

11 回复

背景知识：

1、onTouch 触摸事件

  • 触发条件：手指在组件上按下、滑动、抬起时触发1。
  • 事件类型判断：通过 TouchEvent.type 可以区分具体动作：
  • TouchType.Down：手指按下时触发。
  • TouchType.Move：手指滑动时触发。
  • TouchType.Up：手指抬起时触发。

2、手势事件扩展

  • panGesture 平移手势：可用于监听滑动行为，与 onTouch 结合使用以实现复杂交互：

问题解决：

示例代码：

1、onTouch 触摸事件

@Component
struct ExampleComponent {
  build() {
    Column()
      .onTouch((event: TouchEvent) => {
        if (event.type === TouchType.Move) {
          console.log("滑动经过组件，坐标：" + event.x + ", " + event.y);
        }
      })
  }
}

2、手势事件扩展

Column()
  .gesture(
    PanGesture()
      .onActionUpdate((event: GestureEvent) => {
        console.log("滑动中，偏移量：" + event.offsetX + ", " + event.offsetY);
      })
  )

更多关于HarmonyOS 鸿蒙Next中当滑过一个组件时，什么事件会触发的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


触发快滑手势SwipeGesture，滑动速度需大于速度阈值，默认最小速度为100vp/s。

这个得绑定按钮吧，

也可以绑定到容器组件等其他，

你看看这个地方的文档应该对你有帮助：手势拖拽 ，这个里面有一段叫：感知平移

没看到呀大佬，有没有链接指个路，

“手势拖拽” 这四个蓝色字点不了嘛？，

HarmonyOS的分布式文件系统让我在多设备间传输文件变得轻松无比。

手势拖拽

在 HarmonyOS Next 中，当滑过一个组件时，会触发 HoverEvent 事件。该事件包含组件进入和离开的两种状态：HOVER_STATE_ENTER 表示滑入组件区域，HOVER_STATE_EXIT 表示滑出组件区域。开发者可通过 onHover 回调监听并处理这两种状态变化。

在HarmonyOS Next中，当手指滑过组件时，可以使用TouchEvent或Gesture相关的事件监听来实现。具体推荐以下方式：

  1. 使用onTouch事件：
    通过组件的onTouch方法监听触摸事件，判断触摸点是否在组件区域内。当TouchEvent的类型为TouchType.Move时，检查触摸位置是否进入组件边界，即可触发“滑过”行为。

    Button()
  .onTouch((event: TouchEvent) => {
    if (event.type === TouchType.Move) {
      // 通过event.getOrCreateTouchesData()获取触摸坐标
      // 判断坐标是否在按钮区域内，触发自定义逻辑
    }
  })

  2. 结合Gesture手势处理：
    利用GestureGroup和PanGesture监听滑动轨迹，通过onActionUpdate回调实时获取触摸位置，再通过Rect.intersects等方法判断是否与目标组件区域相交。

    GestureGroup(
  GestureMode.Parallel,
  PanGesture({ distance: 1 })
    .onActionUpdate((event: GestureEvent) => {
      // 根据event.offsetX/offsetY计算当前位置
      // 与目标组件的区域进行碰撞检测
    })
)

关键点：

  • 需要将触摸事件的全局坐标转换为相对于目标组件的局部坐标。
  • 建议通过组件全局区域（Rect）与触摸点坐标进行判断，避免依赖父组件布局变化。
  • 若需高精度检测不规则形状，可通过HitTestMode设置触摸测试模式。

这种方式能准确响应从外部滑入组件的事件，适用于按钮、自定义视图等交互场景。

回到顶部