鸿蒙HarmonyOS 【ArkTS组件】无障碍悬浮事件

📑往期推文全新看点（附带最新·鸿蒙全栈学习笔记）

嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

分享一场鸿蒙开发面试经验记录（三面全过程）

鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

持续更新中。。。

---

在开启无障碍模式后，Touch事件会转换为无障碍悬浮事件。

说明

• 从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
• 目前仅支持通过开启无障碍模式触发。

onAccessibilityHover

onAccessibilityHover(callback: AccessibilityCallback): T

开启无障碍模式后，单指触摸绑定该回调的组件时触发该回调。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	参数类型	必填	参数描述
callback	AccessibilityCallback	是	提供开启无障碍模式后的无障碍悬浮回调事件，当开启无障碍模式后，单指触摸绑定该回调的组件时触发该回调。

返回值：

类型	说明
T	返回当前组件。

AccessibilityCallback

type AccessibilityCallback = (isHover: boolean, event: AccessibilityHoverEvent) => void

提供开启无障碍模式后的无障碍悬浮回调事件类型。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
isHover	boolean	是	表示开启无障碍模式后，手指是否悬浮在组件上，手指进入时为true, 退出时为false。
event	AccessibilityHoverEvent	是	获得AccessibilityHoverEvent对象。

AccessibilityHoverEvent对象说明

继承于BaseEvent。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	属性类型	描述
type	AccessibilityHoverType	无障碍悬浮动作。
x	number	手指位置相对于当前组件左上角的x轴坐标。 单位：vp
y	number	手指位置相对于当前组件左上角的y轴坐标。 单位：vp
windowX	number	手指位置相对于应用窗口左上角的x轴坐标。 单位：vp
windowY	number	手指位置相对于应用窗口左上角的y轴坐标。 单位：vp
displayX	number	手指位置相对于应用屏幕左上角的x轴坐标。 单位：vp
displayY	number	手指位置相对于应用屏幕左上角的y轴坐标。 单位：vp

AccessibilityHoverType

定义无障碍悬浮类型。

名称	值	描述
HOVER_ENTER	0	手指按下时触发。
HOVER_MOVE	1	触摸移动时触发。
HOVER_EXIT	2	抬手触发。
HOVER_CANCEL	3	打断取消当前触发的事件。

示例

该示例主要演示通过使用onAccessibilityHover事件，对无障碍模式下的按钮进行设置。

1. // xxx.ets
   @Entry
   @Component
   struct OnAccessibilityHoverEventExample {
     @State hoverText: string = 'no hover';
     @State color: Color = Color.Blue;
   
     build() {
       Column({ space: 20 }) {
         Button(this.hoverText)
           .width(180).height(80)
           .backgroundColor(this.color)
           .onAccessibilityHover((isHover: boolean, event: AccessibilityHoverEvent) => {
             // 通过onAccessibilityHover事件动态修改按钮在是否有鼠标悬浮时的文本内容与背景颜色
             if (isHover) {
               this.hoverText = 'hover';
               this.color = Color.Pink;
             } else {
               this.hoverText = 'no hover';
               this.color = Color.Blue;
             }
           })
       }.padding({ top: 30 }).width('100%')
     }
   }