小工具知识网

当前位置: 首页 > 行业知识 > 鸿蒙Harmony应用开发—ArkTS声明式开发(触摸交互控制:触摸热区设置)

行业知识

鸿蒙Harmony应用开发—ArkTS声明式开发(触摸交互控制:触摸热区设置)

2026-11-12 23:17:09 来源:互联网转载

适���于支持通用点击事件、通用触摸事件、通用手势处理的组件。

说明:

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

responseRegion

responseRegion(value: Array | Rectangle)

设置一个或多个触摸热区。

卡片能力: 从API version 9开始,该接口支持在ArkTS卡片中使用。

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

参数:

参数名类型必填说明
valueArray | Rectangle是设置一个或多个触摸热区,包括位置和大小。

默认触摸热区为整个组件,默认值:

{

x:0,

y:0,

width:'100%',

height:'100%'

}

从API version 9开始,该接口支持在ArkTS卡片中使用。

Rectangle对象说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称类型必填描述
xLength否触摸点相对于组件左上角的x轴坐标。

默认值:0vp

yLength否触摸点相对于组件左上角的y轴坐标。

默认值:0vp

widthLength否触摸热区的宽度。

默认值:'100%'

heightLength否触摸热区的高度。

默认值:'100%'

说明:

x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小,当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小,当y设置为'-100%'时表示热区往上偏移组件本身高度大小。

width和height只能设置正值百分比。width:'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp,那么'100%'表示热区宽度也为100vp。height:'100%'表示热区高度设置为该组件本身的高度。

百分比相对于组件自身宽高进行计算。

示例

// xxx.ets@Entry@Componentstruct TouchTargetExample {  @State text: string = ""  build() {    Column({ space: 20 }) {      Text("{x:0,y:0,width:'50%',height:'100%'}")      // 热区宽度为按钮的一半,点击右侧无响应      Button("button1")        .responseRegion({ x: 0, y: 0, width: '50%', height: '100%' })        .onClick(() => {          this.text = 'button1 clicked'        })      // 为一个组件添加多个热区      Text("[{x:'100%',y:0,width:'50%',height:'100%'}," +      "\n{ x: 0, y: 0, width: '50%', height: '100%' }]")      Button("button2")        .responseRegion([          { x: '100%', y: 0, width: '50%', height: '100%' }, // 第一个热区宽度为按钮的一半,点击按钮右侧宽度一半区域,点击事件生效          { x: 0, y: 0, width: '50%', height: '100%' } // 第二个热区宽度为按钮的一半,点击button2左半边,点击事件生效        ])        .onClick(() => {          this.text = 'button2 clicked'        })      // 热区大小为整个按钮,且下移一个按钮高度,点击button3下方按钮大小区域,点击事件生效      Text("{x:0,y:'100%',width:'100%',height:'100%'}")      Button("button3")        .responseRegion({ x: 0, y: '100%', width: '100%', height: '100%' })        .onClick(() => {          this.text = 'button3 clicked'        })      Text(this.text).margin({ top: 50 })    }.width('100%').margin({ top: 10 })  }}

最后,有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(Harmony NEXT)资料用来跟着学习是非常有必要的。 

这份鸿蒙(Harmony NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

 获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙(Harmony NEXT)最新学习路线

  •  HarmonOS基础技能

    • HarmonOS就业必备技能 
    •  HarmonOS多媒体技术
      • 鸿蒙NaPi组件进阶
        • HarmonOS高级技能
          • 初识HarmonOS内核 
          • 实战就业级设备开发

            有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

            获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

            《鸿蒙 (OpenHarmony)开发入门教学视频》

            《鸿蒙生态应用开发V2.0白皮书》

            《鸿蒙 (OpenHarmony)开发基础到实战手册》

            OpenHarmony北向、南向开发环境搭建

             《鸿蒙开发基础》

            • ArkTS语言
            • 安装DevEco Studio
            • 运用你的第一个ArkTS应用
            • ArkUI声明式UI开发
            • .……

               《鸿蒙开发进阶》

              • Stage模型入门
              • 网络管理
              • 数据管理
              • 电话服务
              • 分布式应用开发
              • 通知与窗口管理
              • 多媒体技术
              • 安全技能
              • 任务管理
              • WebGL
              • 国际化开发
              • 应用测试
              • DFX面向未来设计
              • 鸿蒙系统移植和裁剪定制
              • ……

                《鸿蒙进阶实战》

                • ArkTS实践
                • UIAbility应用
                • 网络案例
                • ……

                   获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

                  总结

                  总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

上一篇:中国南方怎么创建服务器

下一篇:BVB轻松下载指南,一站式解决方案揭秘!