OpenHarmony按钮支持哪些交互效果

OpenHarmony 按钮的交互能力概览 OpenHarmony 的按钮（Button）在 ArkUI 中可覆盖从基础点击到焦点、键盘、鼠标、触摸等多模态交互，并可与状态管理联动实现动态 UI 反馈与动效。以下按交互类型归纳其能力与要点。

基础点击与触摸事件

• 点击事件：通过 onClick 监听，回调参数 e 可获取点击位置坐标（e.x、e.y），适合实现提交、跳转、计数器等交互逻辑。示例：

  Button("Click Me").onClick((e) => {
    console.info("Button clicked at: " + e.x + ", " + e.y);
  })
  

• 长按与触摸序列：通过 onTouch 可识别 TouchType.Down / Move / Up 等触点序列，适合实现长按、拖拽阈值判断、进度条手势等。示例：

  Button("Hold").onTouch((e) => {
    if (e.type === TouchType.Down) { /* 进入按压 */ }
    else if (e.type === TouchType.Up) { /* 抬起结束 */ }
  })
  

• 鼠标事件：通过 onMouse 响应鼠标按下、移动、抬起等动作，可结合 SourceType、button、pressure 等字段实现悬停样式、右键菜单等桌面端交互增强。

焦点与键盘交互

• 焦点事件：通过 onFocus / onBlur 响应组件获焦与失焦，常用于高亮、提示、焦点顺序管理等；默认情况下 Button 为可获焦，Text/Image 等需设置 focusable(true) 才支持焦点事件（从 api 8 起）。示例：

  Button('FocusBtn')
    .focusable(true)
    .onFocus(() => { /* 获焦样式 */ })
    .onBlur(() => { /* 失焦样式 */ })
  

• 按键事件：通过 onKeyEvent 监听键盘/遥控器按键，事件包含 keyType（Down/Up）、keyCode、keyText、metaKey、timestamp 等；支持事件冒泡与 stopPropagation 阻断。示例：

  Button('KeyBtn').onKeyEvent((e) => {
    if (e.type === KeyType.Down) { /* 处理按键按下 */ }
  })
  

• 外接键盘导航：支持通过 Tab/方向键在可获焦组件间移动焦点，适合电视、车机等非触控设备的操作路径。

动效与反馈

• 状态驱动 UI 刷新：使用 @State 管理组件内部状态，状态变更会自动触发 UI 重建，适合按钮控制文本、计数、列表/数据源切换等场景。示例：

  @State count: number = 0;
  Button("+1").onClick(() => { this.count++ })
  Text(`Count: ${this.count}`)
  

• 动画曲线与过渡：通过 curves 提供的弹簧动效（如 springCurve、springMotion、responsiveSpringMotion）结合 animateTo 实现点击反馈、跟手回弹等动效，提升按钮按压与状态切换的质感。示例：

  import curves from '@ohos.curves';
  Button('Bounce').onClick(() => {
    animateTo({ duration: 300, curve: curves.springMotion() }, () => {
      // 状态变更或样式回弹
    })
  })
  

• 平台级动效与反馈增强：在 OpenHarmony 5.1.0（API 18） 中，系统进一步增强交互体验，包括菜单/弹窗的振动反馈、自定义焦点走焦逻辑、手势事件信息完善、鼠标轴事件等，按钮可间接受益于这些全局能力。

与其他组件或页面的联动

• 数据通信装饰器：按钮点击常与状态装饰器联动，实现跨组件/跨层级数据传递与同步，典型包括 @Prop（单向）、@Link（双向）、@Provide/@Consume（跨层级）、@StorageLink（应用级）、@Watch（监听）。示例：

  @State count: number = 0;
  Button("Inc").onClick(() => { this.count++ })  // 触发 @Watch 或联动子组件
  

• 弹窗与菜单：按钮可作为触发器打开 Menu/Dialog/Popup，结合 5.1 的层级管理（levelOrder）、背景模糊（backgroundBlurStyleOptions/backgroundEffect）、半模态布局（placement/placementOnTarget）等，构建更丰富的交互流程。