鸿蒙开发-UI-交互事件-通用事件

鸿蒙开发-UI-组件导航-Tabs

鸿蒙开发-UI-图形-图片

鸿蒙开发-UI-图形-绘制几何图形

鸿蒙开发-UI-图形-绘制自定义图形

鸿蒙开发-UI-图形-页面内动画

鸿蒙开发-UI-图形-组件内转场动画

鸿蒙开发-UI-图形-弹簧曲线动画

鸿蒙开发-UI-交互事件

文章目录

前言

一、交互事件概述

二、通用事件

1.触屏事件

1.1点击事件

[1.2 拖拽事件](#1.2 拖拽事件)

[1.3 触摸事件](#1.3 触摸事件)

总结


前言

上文详细学习了鸿蒙开发UI页面见的动画,了解了页面间动画的两种形式,一种用于页面间有相同元素场景,另一种是应用于页面转场时,随着一个页面出现另一个页面消失产生转场效果的场景。同时详细学习了页面进入时的和退出时分别对应的两种RouteType的类型的设置方式很效果,本文将学习鸿蒙开发UI交互事件相关知识

一、交互事件概述

二、通用事件

1.触屏事件

触屏事件指当手指/手写笔在组件上按下、滑动、抬起时触发的回调事件

1.1点击事件

当发生点击事件时,会触发以下回调函数

复制代码
onClick(event: (event?: ClickEvent) => void)

event参数提供点击事件相对于窗口或组件的坐标位置,以及发生点击的事件源

1.2 拖拽事件

拖拽事件触发流程

拖拽事件的触发通过长按、拖动平移判定,手指平移的距离达到5vp即可触发拖拽事件。

ArkUI支持应用内、跨应用的拖拽事件

拖拽事件相关接口

接口名称 描述
onDragStart(event: (event?: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo) 拖拽启动接口。当前仅支持自定义pixelmap和自定义组件。
onDragEnter(event: (event?: DragEvent, extraParams?: string) => void) 拖拽进入组件接口。DragEvent定义拖拽发生位置,extraParmas表示用户自定义信息
onDragLeave(event: (event?: DragEvent, extraParams?: string) => void) 拖拽离开组件接口。DragEvent定义拖拽发生位置,extraParmas表示拖拽事件额外信息。
onDragMove(event: (event?: DragEvent, extraParams?: string) => void) 拖拽移动接口。DragEvent定义拖拽发生位置,extraParmas表示拖拽事件额外信息。
onDrop(event: (event?: DragEvent, extraParams?: string) => void) 拖拽释放组件接口。DragEvent定义拖拽发生位置,extraParmas表示拖拽事件额外信息。

1.3 触摸事件

当按下(Down)、滑动(Move)、抬起(Up)等触摸事件触发时,调用回调函数

复制代码
//event.type
//TouchType.Down:表示手指按下。
//TouchType.Up:表示手指抬起。
//TouchType.Move:表示手指按住移动。
onTouch(event: (event?: TouchEvent) => void)

触摸事件可以同时多指触发,通过event参数可获取触发的手指位置、手指唯一标志、当前发生变化的手指和输入的设备源等信息

代码示例

复制代码
@Entry
@Component
struct TouchExample {
//step1:定义状态变量text用于Text组件文本显示
  @State text: string = '';
//step2:定义状态变量eventTypes用于接收触摸事件类型
  @State eventType: string = '';

  build() {
    Column() {
      Button('Touch').height(40).width(100)
//step3:通过onTouch定义Button组件的触摸事件响应逻辑
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.eventType = 'Down';
          }
          if (event.type === TouchType.Up) {
            this.eventType = 'Up';
          }
          if (event.type === TouchType.Move) {
            this.eventType = 'Move';
          }
          this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
          + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
          + event.target.area.width + '\nheight:' + event.target.area.height
        })

       
      Text(this.text)
    }.width('100%').padding(30)
  }
}

总结

本文学习了鸿蒙开发UI交互事件的类型,详细学习了通用事件的触屏事件,下文将学习通用事件中的键鼠事件和焦点事件。

相关推荐
问道飞鱼28 分钟前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
小梦白1 小时前
RPG59.玩家拾取物品三:可拾取物品的提示UI
ui·ue5
周胡杰2 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦3 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳12 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼15 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳16 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
R-G-B18 小时前
【27】MFC入门到精通——MFC 修改用户界面登录IP IP Address Control
tcp/ip·ui·mfc·mfc 用户界面登录·mfc ip登录·mfc address登录
DC_BLOG18 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
布兰妮甜20 小时前
Adobe Photoshop:数字图像处理的终极工具指南
图像处理·ui·adobe·photoshop