HarmonyOS 鸿蒙Next应用开发ets基础手势TapGesture

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS 鸿蒙Next应用开发ets基础手势TapGesture

1. 接口

TapGesture(options?: { count?: number, fingers?: number })

参数：

参数名称 参数类型 必填 默认值 参数描述
count number 否 1 识别的连续点击次数。如果设置小于1，会被转化为默认值。
（说明：如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。）
fingers number 否 1 触发点击的最少手指数，最小为1指， 最大为10指。
（说明：1. 当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。
2. 实际点击手指数超过配置值，手势识别失败。）

2. 事件

名称 功能描述
onAction((event?: GestureEvent) => void) Tap手势识别成功回调。

3. 代码示例

@Entry
@Component
struct Index {
  @State value: string = ''
  
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
      Text('连续点击两次')
        .fontSize(20)
      Text(this.value)
        .fontSize(20)
    }
    .height(200).width(300).padding(60).border({ width: 1 }).margin(30)
    .gesture(
      TapGesture({ count: 2 })
        .onAction(() => {
          this.value = 'this TapGesture onAction'
        })
    )
  }
}

4. 效果

（A）->（B）

代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/JLTF_TapGesture


更多关于HarmonyOS 鸿蒙Next应用开发ets基础手势TapGesture的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
6 回复

值得学习

更多关于HarmonyOS 鸿蒙Next应用开发ets基础手势TapGesture的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


同一个控件那么单击一次和双击分别都支持的写法是怎么样的？

案例中有哦，

已解决，多谢，

居然没人气，支持下！

在HarmonyOS（鸿蒙）Next应用开发中，ETS（Efficient TypeScript）基础手势TapGesture用于处理用户的点击事件。以下是对TapGesture在ETS中的基本使用方法：

TapGesture主要用于识别用户的单次点击操作。在ETS中，你可以通过给组件添加TapGesture监听器来处理点击事件。具体步骤如下：

  1. 导入必要的模块：确保你已经导入了处理手势所需的模块。

  2. 创建TapGesture对象：使用new TapGesture()创建一个TapGesture实例。

  3. 设置监听器：通过onAction方法为TapGesture设置一个监听器函数，该函数将在用户点击时被调用。

  4. 将TapGesture添加到组件：使用gesture属性将创建的TapGesture实例添加到需要监听点击事件的组件上。

示例代码：

import { Text, FlexColumn, TapGesture } from '@ohos.agp.components';

@Entry
@Component
struct MyComponent {
  build() {
    let tapGesture = new TapGesture(() => {
      console.log('Text clicked!');
    });

    FlexColumn() {
      Text('Click me!')
        .gesture(tapGesture)
    }
  }
}

在上述示例中，当用户点击“Click me!”文本时，控制台将输出“Text clicked!”。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部