鸿蒙5.0版开发:ArkTS组件(自定义事件拦截)

自定义事件拦截

为组件提供自定义的事件拦截能力,开发者可根据事件在控件上按下时发生的位置,输入源等事件信息决定控件上的HitTestMode属性。

说明:

从API Version 12开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

onTouchIntercept

onTouchIntercept(callback: Callback<TouchEvent, HitTestMode>)

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

参数:

参数名参数类型必填参数描述
callbackCallback<TouchEventHitTestMode>给组件绑定自定义事件拦截回调,并使能在做触摸测试时回调此函数。

示例

// xxx.ets
@Entry
@Component
struct Index {
  isPolygon(event: TouchEvent) {
    return true;
  }

  build(){
    Row(){
      Column(){
        Text("hello world")
          .backgroundColor(Color.Blue)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            console.log("Text click");
          })
      }
      .width(400)
      .height(300)
      .backgroundColor(Color.Pink)
      .onClick(()=>{
        console.log("Column click");
      })
      // 调用onTouchIntercept修改该组件的HitTestMode属性
      .onTouchIntercept((event : TouchEvent) => {
        console.log("OnTouchIntercept + " + JSON.stringify(event));
        if (this.isPolygon(event)) {
          return HitTestMode.None
        }
        return HitTestMode.Default
      })
    }
    .width('100%')
  }
}

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注作者公众号 『 蜀道衫 』,不定期分享原创知识。
  • 关注后回复【666】扫码即可获取学习资料包。
  • 同时可以期待后续文章ing🚀。

### 关于鸿蒙 ARKTS 5.0 遥控器界面的设计与实现 #### 设计思路 在鸿蒙 ARKTS 5.0 中,遥控器界面通常涉及焦点管理、按键事件处理以及交互逻辑的实现。为了构建一个高效的遥控器界面,可以采用 ArkUI 的 Stage 模型作为基础架构,并利用 ArkTS 提供的焦点事件机制和自定义事件拦截功能来增强用户体验。 #### 技术要点 1. **焦点事件管理** 使用 ArkTS 提供的焦点事件机制,确保用户可以通过方向键或 TAB 键流畅地切换界面上的不同组件[^2]。对于复杂的布局结构,特别是嵌套容器中的子组件,需遵循投影走焦算法进行焦点转移的精确控制[^3]。 2. **自定义事件拦截** 对于某些特殊场景(如防止误触),可通过 `onTouchIntercept` 方法实现事件拦截与重新分发[^4]。此方法允许开发者灵活调整事件流的行为模式,从而优化遥控器操作体验。 3. **UI 组件设计** 利用 ArkUI 提供的基础组件(如 Button、Input 等)搭建遥控器的主要功能模块。同时,合理运用 Flex 布局配合 wrap 属性,使界面适应不同尺寸屏幕的同时保持良好的可访问性[^1]。 4. **键盘导航支持** 结合 Tab 和 Shift+Tab 的组合键逻辑,为用户提供便捷的方向跳转方式。具体而言,当按下一个方向键时,应依据投影走焦规则计算目标组件;而对于 Tab/Shift+Tab,则分别模拟右侧/左侧方向键行为完成焦点迁移[^5]。 #### 示例代码 以下是基于以上理论的一个简单遥控器界面实现案例: ```typescript import { Direction, FocusableProperty } from '@ohos arkui'; // 定义根节点 @Entry @Component struct RemoteControl { build() { Column({ space: 8 }) { Row({ justifyContent: 'center', alignItems: 'center' }) { Button('Up') .focusable(true as FocusableProperty) .onClick(() => console.log('Move Up')) Text('\n') Button('Down') .focusable(true as FocusableProperty) .onClick(() => console.log('Move Down')) } Row({ justifyContent: 'spaceAround', alignItems: 'center' }) { Button('Left') .focusable(true as FocusableProperty) .onClick(() => console.log('Move Left')) Button('OK') .focusable(true as FocusableProperty) .onClick(() => console.log('Select Item')) Button('Right') .focusable(true as FocusableProperty) .onClick(() => console.log('Move Right')) } Input() .placeholder('Enter Command...') .onChange((value) => console.log(`Command entered: ${value}`)) .focusable(true as FocusableProperty) }.padding(16).width('100%').height('100%') } } ``` 上述代码片段展示了如何创建基本按钮排列并赋予其聚焦能力,同时还加入了输入框用于接收额外命令输入。 --- ####
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值