当前位置：首页 > news >正文

鸿蒙笔记--触摸事件

news 来源：原创 2025/5/4 8:41:40

这一节主要了解一下Ark UI中的触摸事件，涉及responseRegion函数，它继承自 CommonMethod ， CommonMethod 中定义的属性样式属于公共样式,responseRegion主要用于设定组件的触摸区域(比如扩大按钮的热区点击)。当触摸点落在设定的区域内时，会触发相应的事件。使用responseRegion函数可以定义一个或多个矩形区域，这些区域可以是组件的全部或部分区域。

  1 设定触摸区域：通过responseRegion函数，可以设置组件的额外触摸区域。当触摸点坐标落在这些区域内时，事件会派发到当前组件上。
  2 参数说明：该函数接收一个Rectangle对象或Rectangle对象数组作为参数。每个Rectangle包含x、y、width和height属性。x和y定义了触摸区域相对于组件左上角的起始坐标，width和height定义了触摸区域的大小。
  3 百分比表示：x和y的值可以是百分比形式的字符串，如"50%"表示位置是组件宽度或高度的一半。width和height也可以是百分比表示，这决定了触摸区域的尺寸。
  4 应用实例：在组件的构建方法中，可以通过链式调用responseRegion来设置触摸区域。例如，在一个按钮组件上设定特定的触摸反馈区域。
  5 支持的组件：该方法适用于支持通用点击事件、通用触摸事件及通用手势处理的组件。

栗子:

 @Entry @Component struct Test {

  @State message: string = 'testResponseRegion'

  build() {
     Column({ space: 10 }) {
      Text(this.message)
        .fontSize(20)
        .size({width: 200, height: 60})
        .backgroundColor(Color.Yellow)
        .onClick(() => {
          this.message += "1：" + "Test 1";
        })

      Text(this.message)
        .fontSize(20)
        .size({width: 200, height: 60})
        .backgroundColor(Color.Yellow)
        .responseRegion({ // 设置触摸区域
          x: 0,           // 起点和自身顶点一致
          y: 0,           // 起点和自身顶点一致
          width: 250,     // 设置触摸区域的宽度
          height: 100     // 设置触摸区域的高度
        })
        .onClick(() => {
          this.message += "2：" + "Test 2";
        })

      Text("清除数据")
        .fontSize(20)
        .size({width: 200, height: 60})
        .backgroundColor(Color.Yellow)
        .touchable(true)// false 设置不可以触摸  true: 可触摸
        .onClick(() => {
          this.message = "";
          console.log(" 组件可触摸...");
        })
      Text("组件响应")
        .fontSize(20)
        .size({width: 200, height: 60})
        .backgroundColor(Color.Pink)
        .enabled(false) // false:组件不可用，不可以响应点击  true:则可以相应点击
        .onClick(() => {
          console.log(" 组件响应...");
        })
    }
    .width('100%')
    .height("100%")
    .padding(10)
  }
}