OpenHarmony实战开发-使用通用事件、触屏事件

触屏事件指当手指/手写笔在组件上按下、滑动、抬起时触发的回调事件。包括点击事件、拖拽事件和触摸事件。

图1 触摸事件原理

在这里插入图片描述

点击事件

点击事件是指通过手指或手写笔做出一次完整的按下和抬起动作。当发生点击事件时,会触发以下回调函数:

onClick(event: (event?: ClickEvent) => void)

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

例如通过按钮的点击事件控制图片的显示和隐藏。

@Entry
@Component
struct IfElseTransition {@State flag: boolean = true;@State btnMsg: string = 'show';build() {Column() {Button(this.btnMsg).width(80).height(30).margin(30).onClick(() => {if (this.flag) {this.btnMsg = 'hide';} else {this.btnMsg = 'show';}// 点击Button控制Image的显示和消失this.flag = !this.flag;})if (this.flag) {Image($r('app.media.icon')).width(200).height(200)}}.height('100%').width('100%')}
}

图2 通过按钮的点击事件控制图片的显示和隐藏
在这里插入图片描述

拖拽事件

拖拽事件指手指/手写笔长按组件(>=500ms),并拖拽到接收区域释放的事件。

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

拖拽事件触发流程:

在这里插入图片描述

拖拽事件提供以下接口:
在这里插入图片描述
如下是跨窗口拖拽,拖出窗口示例:

import image from '@ohos.multimedia.image';@Entry
@Component
struct Index {@State visible: Visibility = Visibility.Visibleprivate pixelMapReader:image.PixelMap|undefined = undefinedaboutToAppear() {console.info('begin to create pixmap has info message: ')this.createPixelMap()}createPixelMap() {let color = new ArrayBuffer(4 * 96 * 96);let buffer = new Uint8Array(color);for (let i = 0; i < buffer.length; i++) {buffer[i] = (i + 1) % 255;}class hw{height:number = 96width:number = 96}let hwo:hw = new hw()let ops:image.InitializationOptions|void = {'alphaType': 0,'editable': true,'pixelFormat': 4,'scaleMode': 1,'size': hwo}const promise: Promise<image.PixelMap> = image.createPixelMap(color, ops);promise.then((data:image.PixelMap|undefined) => {console.info('create pixmap has info message: ' + JSON.stringify(data))if(data){this.pixelMapReader = data;}})}@Builder pixelMapBuilder() {Text('drag item').width('100%').height(100).fontSize(16).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)}build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text('App1').width('40%').height(80).fontSize(20).margin(30).textAlign(TextAlign.Center).backgroundColor(Color.Pink).visibility(Visibility.Visible)Text('Across Window Drag This').width('80%').height(80).fontSize(16).margin(30).textAlign(TextAlign.Center).backgroundColor(Color.Pink).visibility(this.visible).onDragStart((event: DragEvent|undefined, extraParams: string|undefined):CustomBuilder | DragItemInfo => {console.info('Text onDrag start')return { pixelMap: this.pixelMapReader, extraInfo: 'custom extra info.' }}).onDrop((event: DragEvent|undefined, extraParams: string|undefined) => {console.info('Text onDragDrop,  ')this.visible = Visibility.None                    //拖动结束后,使源不可见})}.width('100%').height('100%')}
}

跨窗口拖拽,拖入示例:

@Entry
@Component
struct Index {@State number: string[] = ['drag here']@State text: string = ''@State bool1: boolean = false@State bool2: boolean = false@State visible: Visibility = Visibility.Visible@State visible2: Visibility = Visibility.Nonescroller: Scroller = new Scroller()build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Text('App2').width('40%').height(80).fontSize(20).margin(30).textAlign(TextAlign.Center).backgroundColor(Color.Pink).visibility(Visibility.Visible)List({ space: 20, initialIndex: 0 }) {ForEach(this.number, (item:string) => {ListItem() {Text('' + item).width('100%').height(80).fontSize(16).borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xFFFFFF)}}, (item:string):string => item)ListItem() {Text('Across Window Drag This').width('80%').height(80).fontSize(16).margin(30).textAlign(TextAlign.Center).backgroundColor(Color.Pink).visibility(this.visible2)}}.height('50%').width('90%').border({ width: 1 }).divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }).onDragEnter((event: DragEvent|undefined, extraParams: string|undefined) => {                         //拖拽进去组件console.info('List onDragEnter, ' + extraParams)}).onDragMove((event: DragEvent|undefined, extraParams: string|undefined) => {                          //拖拽时移动console.info('List onDragMove, ' + extraParams)}).onDragLeave((event: DragEvent|undefined, extraParams: string|undefined) => {                         //拖拽离开组件console.info('List onDragLeave, ' + extraParams)}).onDrop((event: DragEvent|undefined, extraParams: string|undefined) => {                              //释放组件console.info('List onDragDrop, ' + extraParams)this.visible2 = Visibility.Visible                                              //拖拽完成使拖入目标可见})}.width('100%').height('100%')}
}

在这里插入图片描述

触摸事件

当手指或手写笔在组件上触碰时,会触发不同动作所对应的事件响应,包括按下(Down)、滑动(Move)、抬起(Up)事件:

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

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

// xxx.ets
@Entry
@Component
struct TouchExample {@State text: string = '';@State eventType: string = '';build() {Column() {Button('Touch').height(40).width(100).onTouch((event?: TouchEvent) => {if(event){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}})Button('Touch').height(50).width(200).margin(20).onTouch((event?: TouchEvent) => {if(event){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)}
}

在这里插入图片描述

如果大家还没有掌握鸿蒙,现在想要在最短的时间里吃透它,我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发>鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙开发>鸿蒙开发学习手册》:

如何快速入门:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

在这里插入图片描述

开发基础知识:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

在这里插入图片描述

基于ArkTS 开发:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF:https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述


http://www.ppmy.cn/ops/28628.html

相关文章

清理C盘,释放C盘空间

目录 1.清理缓存&#xff1a;2.清理系统更新的旧文件&#xff1a;小结&#xff1a; 1.清理缓存&#xff1a; Ctrl A全部删除 2.清理系统更新的旧文件&#xff1a; 右键c盘属性 勾选windows更新清理点击确定 小结&#xff1a; 关注我给大家分享更多有趣的知识&#xff0c;…

快速了解 git 和 github 是什么,30 分钟速通版

安装 git 安装git和安装node、qq这种软件是一样的&#xff0c;到官网去下载安装就好了&#xff0c;记得选择正确的版本&#xff0c;mac和win需要下载的版本是不一样的。 git下载页面 配置 git 熟悉环境变量的小伙伴应该了解这一步的重要性&#xff0c;如果没有相关经验也不…

基于python-flask技术的社区信息交流平台【数据库+15000文档】

预览 介绍 系统只需使用者通过电脑浏览器即可实现系统的访问和操作的WEB模式的信息化系统。为了保证系统数据的准确性、安全性的数据存储&#xff0c;系统应用MySQL数据库进行系统数据存储服务。根据对社区工作的深入调研和对社区居民的走访调查&#xff0c;详细分析整体系统的…

ElasticSearch教程入门到精通——第四部分(基于ELK技术栈elasticsearch 7.x新特性)

ElasticSearch教程入门到精通——第四部分&#xff08;基于ELK技术栈elasticsearch 7.x新特性&#xff09; 1. Elasticsearch进阶1.1 核心概念1.1.1 索引Index1.1.1.1 索引创建原则1.1.1.2 Inverted Index 1.1.2 类型Type1.1.3 文档Document1.1.4 字段Field1.1.5 映射Mapping1.…

深度学习之基于YOLOv5烟花燃放智能检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 在庆祝和特殊节日中&#xff0c;烟花燃放作为传统的庆祝方式之一&#xff0c;深受人们的喜爱。…

深度学习500问——Chapter08:目标检测(4)

文章目录 8.3 One Stage 目标检测算法 8.3.1 SSD 8.3.2 DSSD 8.3.3 YOLOv1 8.3 One Stage 目标检测算法 我们将对单次目标检测器&#xff08;包括SSD系列和YOLO系列等算法&#xff09;进行综述。我们将分析FPN以理解多尺度特征图如何提高准确率&#xff0c;特别是小目标的检测…

mindjourney和stable diffusion该怎么选?

很多刚开始接触AI绘画的人来说&#xff0c;mindjourney和stable diffusion该怎么选&#xff1f; 坦白来说&#xff0c;这两种对于普通用户来说&#xff0c;门槛都会有一些。 mj的门槛在于需要梯子&#xff0c;而且要想持续出图&#xff0c;还需要付费&#xff0c;对以免费为乐…

vue加载vuetify模板UI

step1:导入vuetify yarn add vuetifystep2: package.json数据 D:\vue_project\project-vue-json-main\package.json "dependencies": {"axios": "^1.6.8","json-server": "^1.0.0-alpha.23","vue": "^3.3.4…

「笔试刷题」:数组中的最长连续子序列

一、题目 描述 给定无序数组arr&#xff0c;返回其中最长的连续序列的长度(要求值连续&#xff0c;位置可以不连续,例如 3,4,5,6为连续的自然数&#xff09; 数据范围&#xff1a;1≤n≤10^5&#xff0c;数组中的值满足 1≤val≤10^8 要求&#xff1a;空间复杂度 O(n)&#…

MATLAB实现果蝇算法优化BP神经网络预测分类(FOA-BP)

果蝇算法&#xff08;Fruit Fly Optimization Algorithm, FFOA&#xff09;是一种启发式优化算法&#xff0c;受果蝇觅食行为的启发。将其应用于优化BP神经网络&#xff0c;主要是为了寻找BP神经网络中的最佳权重和偏置值。以下是一个基本的流程&#xff1a; 初始化&#xff1a…

【Qt】Qt中设置窗口与屏幕大小一样

1. 获取屏幕尺寸 QGuiApplication::screens()availableGeometry() &#xff0c;不包含底部任务栏geometry() &#xff0c; 包含底部任务栏 MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {//设置屏幕大小QList <QScreen *> l…

企微社群群发消息:强化社群互动与营销新策略

在数字化营销日益盛行的今天&#xff0c;企业微信社群已成为企业与用户之间沟通互动的重要桥梁。而企微社群群发消息功能&#xff0c;更是这一桥梁上的重要纽带&#xff0c;它能够帮助企业高效、精准地传递信息&#xff0c;强化社群互动&#xff0c;提升营销效果。本文将详细介…

【C++】---STL之list的模拟实现

【C】---STL之list的模拟实现 一、list模拟实现思路二、结点类的实现三、list迭代器的实现1、ListIterator类2、构造函数3、operator*运算符重载5、operator->运算符重载6、operator&#xff01;运算符重载7、operator运算符重载8、前置9、后置10、前置--11、后置-- 四、lis…

基于MSOGI的交叉对消谐波信号提取网络MATLAB仿真

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 模型简介&#xff1a; 此模型利用二阶广义积分器&#xff08;SOGI&#xff09;对基波电流和相应次的谐波电流进行取 &#xff0c;具体是通过多个基于二阶广义积分器的正交信号发生器 &#xff08; S&#xf…

Web Workers 介绍

Web Workers 是一种在 Web 页面中运行 JavaScript 代码的方式&#xff0c;它允许你在后台线程上运行脚本&#xff0c;而不影响页面的性能。这意味着你可以执行计算密集型任务&#xff0c;而不会造成主线程的阻塞或页面的冻结。 场景 数据处理&#xff1a;对大量数据进行排序、…

关于阿里云DataWorks的20道面试题

1. 请简要介绍阿里云DataWorks的基本概念和主要功能。 阿里云DataWorks是一个全链路的大数据开发治理平台&#xff0c;其主要功能包括数据集成、数据建模与开发、数据地图、数据质量和数据服务等。 DataWorks的基本概念围绕其作为一个大数据开发和治理的平台&#xff0c;它整…

【华为】路由综合实验(基础)

【华为】路由综合实验 实验需求拓扑配置AR1AR2AR3AR4AR5PC1PC2 查看通信OSPF邻居OSPF路由表 BGPBGP邻居BGP 路由表 配置文档 实验需求 ① 自行规划IP地址 ② 在区域1里面 启用OSPF ③ 在区域1和区域2 启用BGP&#xff0c;使AR4和AR3成为eBGP&#xff0c;AR4和AR5成为iBGP对等体…

windows驱动开发-WDF对象

WDF封装了大量的WDF对象&#xff0c;不过&#xff0c;和应用层不一样&#xff0c;不用去尝试从WDF框架对象类上派生和改写原有的WDF类&#xff0c;本意WDF就是希望我们使用这些对象和类&#xff0c;而不是创造新的奇怪的类。 每个WDF对象都代表着对一项驱动需要使用的子功能的…

Java项目:基于SSM框架实现的高校专业信息管理系统设计与实现(ssm+B/S架构+源码+数据库+毕业论文+PPT+开题报告)

一、项目简介 本项目是一套基于SSM框架实现的高校专业信息管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、…

JVM在Java生态系统中的作用和地位

JVM&#xff08;Java Virtual Machine&#xff0c;Java虚拟机&#xff09;在Java生态系统中具有核心作用和无可替代的地位。以下是关于JVM在Java生态系统中的作用和地位的详细解释&#xff1a; 1、 JVM的核心作用&#xff1a; 1、平台无关性&#xff1a; JVM是Java语言实现“…