本文主要是介绍鸿蒙笔记--触摸事件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
这一节主要了解一下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)}
}
这篇关于鸿蒙笔记--触摸事件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!