“答开发者问”之HarmonyOS鸿蒙Next技术问题解析 第15期

问题五：如何感知@Component组件的show和hide？

有没有什么办法能感知@Component组件的展示和隐藏？

解决方案：

推荐优先使用Navigation，可以在NavDestination组件下通过onShown和onHidden方法来判断显示和隐藏，代码如下：

@Builder
export function NavDemoBuilder() {
  NavDemo()
}

[@Component](/user/Component)
export struct NavDemo {
  @Consume('pathStack') pathStack: NavPathStack;

  build() {
    NavDestination()
    .onShown(() => {

    })
    .onHidden(()=>{

    })
  }
}

当没有使用Navigation时，组件的显示和隐藏参考onVisibleAreaChange方法：

.onVisibleAreaChange([0.0, 1.0], async (isVisible: boolean, currentRatio: number) => {
  if (isVisible && currentRatio >= 1.0) {
    //完全可见
  }
  if (!isVisible && currentRatio <= 0.0) {
    //完全不可见
  }
})

原理可以参考：组件可见区域变化事件-组件变化事件-通用事件-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

原链接：

[如何感知@Component页面的show和hide-华为开发者问答 | 华为开发者联盟 (huawei.com)](https://developer.huawei.com/consumer/cn/forum/topic/0201186419283271046?fid=0109140870620153026)

问题二：onTouch事件在点击的时候一直会触发TouchType的Move状态？

在HarmonyOS应用开发中，onTouch事件在真机上持续触发TouchType.Move属于正常现象，主要源于以下特性与处理逻辑：

1. 事件机制特性：

   • 触控采样率差异：changedTouches按屏幕刷新率重采样，touches按器件刷新率上报。真机的触摸传感器通常具有高灵敏度，即使手指轻微抖动（用户可能感知不到），传感器仍会捕捉到坐标变化并触发Move事件。

2. 系统级事件处理：

   • HarmonyOS框架为优化交互体验，会主动上报细微的触控变化。这在需要高精度触控的场景（如绘图应用）中是有益的，但在点击场景下可能造成多次Move事件触发。

如果不需要无效的移动事件，可通过代码逻辑过滤掉：

@State startX: number = 0;
@State startY: number = 0;
// 设置移动阈值（单位：vp）
readonly MOVE_THRESHOLD: number = 5; 

.onTouch((event: TouchEvent) => {
  if (!event.touches || event.touches.length === 0) return;

  switch (event.type) {
    case TouchType.Down:
      this.startX = event.touches.x;
      this.startY = event.touches.y;
      console.log('按下');
      break;

    case TouchType.Move:
      const currentX = event.touches.x;
      const currentY = event.touches.y;
      // 计算偏移量
      const deltaX = Math.abs(currentX - this.startX);
      const deltaY = Math.abs(currentY - this.startY);

      if (deltaX > this.MOVE_THRESHOLD || deltaY > this.MOVE_THRESHOLD) {
        console.log('有效移动:', currentX, currentY);
        // 更新起始坐标
        this.startX = currentX;
        this.startY = currentY;
      }
      break;

    case TouchType.Up:
      console.log('抬起');
      break;
  }
})

原链接： onTouch事件在点击的时候，一直会触发TouchType的Move状态-华为开发者问答 | 华为开发者联盟 (huawei.com)