HarmonyOS-ArkUI 手势系列1--API分析及使用方式及示例

原创 已于 2025-07-25 21:33:27 修改 · 1.1k 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #ArkUI #ArkTS #移动端开发 #华为

于 2025-07-01 07:00:00 首次发布

手势分类

手势是一种通过手部的动作来控制设备交互的方式， 是人机交互中重要的组成方式，例如我们对一个手机屏幕的点击， 双击， 捏合，这类动作，都是手势。

手势具体可以分为

  • 单一手势， 指的是由一个简单独立的动作构成的手势，通常会涉及到一个明确的操作， 是手势事件中最为基础的形式，如单指单指多指的，单击，双击， 滑动，长按等等。
  • 组合手势： 将多个单一的手势，按照特定的顺序(同时发生， 同时只有一个发生，必须按照顺序发生)组合起来，形成给为复杂的手势操作，可以完成就更加丰富的交互方式。例如微信朋友圈编辑动态，九宫格照片拖拽的逻辑，实现照片位置的对调。
  • 多层级手势，常见于父子组件嵌套时，比较复杂的交互逻辑。比如地图应用的地图查看场景

单一手势

单一手势分类

手势名称

API

动作

点击手势

TapGesture

手指轻触屏幕

长按手势

LongPressGesture

手指按住屏幕一段时间

滑动手势

SwiperGesture

手指在屏幕上快速滑动

旋转手势

RotationGesture

两根手指在屏幕上做旋转动作

捏合手势

PinchGesture

两根手指在屏幕上向内靠拢或者向外分开

拖动手势</
最低0.47元/天 解锁文章
手把手教你用 HarmonyOS 手势事件 API，打造丝滑触控交互体验
2401_86731168的博客
07-07 1069
《HarmonyOS手势事件API开发指南》摘要 本文详细介绍了HarmonyOS手势事件API的开发应用，通过多指触控识别、连续动作追踪和跨设备适配三大核心能力，开发者可以为应用实现丰富的交互功能。
鸿蒙5.0版开发：ArkTS基础组件（模式锁定）
m0_69424697的博客
09-18 1189
图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景。
鸿蒙中如何使用 Gesture API 实现手势识别
小白酷爱学编程，欢迎大家一块儿学习~~
08-12 668
随着智能设备的普及，手势识别已经成为现代用户界面设计中的重要一环。通过手势，用户可以更加自然地与设备进行互动，从而提升用户体验。在鸿蒙操作系统中，手势识别功能可以通过 Gesture API 来实现。通过手势识别，开发者可以实现滑动、捏合、旋转等常见的手势操作，为应用增添更多的交互方式。本文将介绍如何在鸿蒙中使用 Gesture API 实现手势识别，涵盖手势识别功能的实现，识别常见手势（如滑动、捏合、旋转等），并展示如何在应用场景中使用手势控制界面。
鸿蒙开发中 Gesture（手势）用法
梦想不只是梦与想的博客
06-06 521
手势系统开发指南摘要：本文详细介绍了现代UI开发中的手势交互系统。内容涵盖六种基础手势类型（点击、长按、平移等）及其触发条件，解析了手势识别流程和API使用方法（单手势绑定、多手势组合）。高级功能包括自定义手势识别、手势冲突解决方案和手势动画实现。同时提供性能优化建议与调试技巧，最后通过图片查看器案例演示综合应用。开发者可掌握从基础到高级的手势开发技术，提升应用交互体验。
HarmonyOS-ArkUI 手势系列3--组合手势
童年纸飞机的博客
07-02 747
摘要：本文介绍了HarmonyOS-ArkUI中的组合手势功能，通过将多个单一手势按照特定顺序组合实现复杂交互。组合手势分为三种模式：Sequence（顺序识别）、Parallel（并行识别）和Exclusive（互斥识别），文中分别给出了代码示例和效果说明。顺序识别要求手势依次完成；并行识别允许同时识别多个手势；互斥识别则在任一手势成功后即终止识别。文章还提供了具体实现案例，如长按后拖拽、单击与双击区分等交互场景。
HarmonyOS-ArkUI 手势系列4--多层级手势
童年纸飞机的博客
07-04 1044
【摘要】多层级手势指父容器和子组件同时监听手势的场景。鸿蒙（ArkUI）与Android在处理手势冲突时存在显著差异：Android采用责任链模式，父组件可能拦截事件导致子组件无法响应；而鸿蒙采用按需分发机制，父/子组件可同时接收事件，默认子组件优先触发。鸿蒙提供responseRegion定义响应区域，以及hitTestBehavior的四种模式（Default/Block/Transparent/None）精确控制事件分发逻辑，有效解决嵌套组件的手势冲突问题，其设计比Android更灵活高效。
HarmonyOS-ArkUI 手势系列2--单一手势(长按，拖拽，滑动，旋转，捏合)
童年纸飞机的博客
07-01 951
本文深入解析了鸿蒙ArkUI中的手势交互机制，详细介绍了长按、拖拽、滑动、旋转和捏合五种单一手势的实现方式。通过gesture属性监听手势事件，开发者可配置参数并设置回调函数处理交互数据。文章提供了每种手势的完整代码示例，展示如何通过API实现缩放、旋转、位移等动态效果。手势分类包括单一、组合和多层级三种类型，本文重点剖析单一手势的API调用模式，为后续组合手势开发奠定基础。所有示例均采用接口类型化工厂常量模式，统一调用入口并隐藏实现细节。
HarmonyOS ArkUI实战开发-手势密码（PatternLock）
m0_70748458的博客
06-01 941
reset();在使用的时候，接收一个类型的控制器，该控制器用来控制组件的状态，比如重置解锁状态。build() {sideLength：设置组件的宽度和高度，默认值为 300vp ，最小可以设置为 0。：设置宫格圆点的半径，默认值为 14vp。：设置宫格圆点在 “未选中” 状态的填充颜色，默认值为黑色。：设置宫格圆点在 “选中” 状态的填充颜色，默认值为黑色。：设置宫格圆点在 “激活” 状态的填充颜色，默认值为黑色。pathColor：设置连线的颜色，默认值为蓝色。
HarmonyOS—ArkUI组件使用
qq_45147818的博客
11-12 1155
ArkUI组件基本使用
鸿蒙Qt字体实战：消灭“豆腐块“乱码与自定义字体加载
最新发布
小淼淼的博客
11-23 402
Qt应用移植到鸿蒙系统时常见中文字体显示为方框（"豆腐块"）问题，主要原因是系统字体回退失败或自定义字体加载路径错误。解决方案包括：显式指定系统字体、将字体文件拷贝到沙箱目录再加载、在QML中正确使用FontLoader引用字体名称。此外还需注意High DPI适配问题，通过设置环境变量或手动调整缩放因子来优化字体渲染效果。建议打包开源中文字体随App发布，确保字体在不同设备上都能正常显示。
开源鸿蒙 Cordova 设备信息插件开发详解
夏天的博客
11-22 1033
Apache Cordova 是一个开源的移动应用开发框架，允许开发者使用 HTML、CSS 和 JavaScript 构建跨平台移动应用。Cordova 通过插件机制提供了访问设备原生功能的能力，使 Web 应用能够调用系统 API。
HarmonyOS跨设备同步
2509_93946182的博客
11-21 293
HarmonyOS通过异构组网技术将多设备融合为“超级终端”，其核心是三个关键技术：首先分布式软总线实现了设备间毫秒级延迟通信，我在测试中发现相同路由器环境下传输速率比传统蓝牙快15倍；我们曾在初期版本犯过严重错误——当用户在手机相册删除照片时，所有设备立即执行删除操作，导致用户平板上正在编辑的图片突然消失。通过分析用户操作习惯，我们最终采用“分段锁”方案：将文档按段落拆分同步单元，不同设备编辑不同段落时完全并行，编辑相同段落时触发协同编辑模式。在开发购物车同步功能时，我们采用“增量同步+冲突消解”方案。
深入解析HarmonyOS应用包管理Bundle：从原理到实践
不懂先生的博客
11-21 81
随着万物互联时代的到来，HarmonyOS作为华为推出的分布式操作系统，以其独特的架构和设计理念，为开发者提供了全新的应用开发体验。在HarmonyOS生态中，应用包管理（Bundle Management）是支撑应用分发、安装、运行和更新的核心模块。它不仅关系到应用的性能和安全，还直接影响用户体验和开发效率。
HarmonyOS + Cordova：原生与 Web 双向桥接常见问题总览与解决方案
小淼淼的博客
11-21 405
本文分析了HarmonyOS+Cordova双向桥接通信的常见问题与排查方法。主要内容包括：1）两条核心链路：JS调原生（cordova.exec→ArkTS插件）和原生调JS（onArkTsResult事件推送+JS Proxy注入）；2）常见问题点：service/action不匹配、回调缺失、JSON解析失败、Proxy注入时机不当等；3）排查流程：通过日志打点定位问题层级，检查发起方→桥接层→接收方的调用链；4）优化建议：统一消息结构、确保回调完整性、合理控制数据频率。文章提供了系统化的故障定位思路
HarmonyOS应用开发从入门到精通
2509_93942407的博客
11-21 239
项目结构里，这几个目录得熟悉：下放主要代码，管理布局、图片和多语言，负责编译配置。布局常用Column、Row、Stack，样式推荐用生命周期里动态计算，适配不同屏幕。比如做个简单的列表，用容器配合渲染，再给 item 加个事件，基本结构就出来了。记住，多查组件文档，官方给的属性方法很全。跨设备迁移是亮点，在里实现状态保存，系统会自动帮你在另一台设备上恢复。性能调优要用DevEco Profiler，卡顿多半是主线程跑了重任务，记得扔到Worker线程里。关键是多写多练，从简单应用开始，逐步叠加功能。
开源鸿蒙终端工具Termony增加外部HNP包合入base.hnp的设计与实现实战教程
白晓明的博客
11-20 1060
本文介绍了如何将 external-hnp 目录下的预构建 HNP 包自动合并到最终产物 base.hnp 中。主要内容包括： 目标与范围：自动合并三种格式的外部 HNP 包到 base.hnp 中 现有打包规则回顾：分析 Makefile 结构和依赖关系 合入策略设计：按优先级处理不同格式的 HNP 包，定义目录映射规则 具体实现：修改 Makefile 添加外部包检测和合并逻辑。
深入探索HarmonyOS ArkTS异步编程模式
不懂先生的博客
11-23 56
在当今移动和分布式应用开发中，异步编程已成为处理高并发、I/O密集型任务的核心技术。HarmonyOS作为华为推出的分布式操作系统，其应用开发语言ArkTS（基于TypeScript）提供了强大的异步编程支持，帮助开发者构建高性能、响应迅速的应用。ArkTS继承了TypeScript的静态类型系统和现代语言特性，同时针对HarmonyOS的分布式架构进行了优化。异步编程模式在HarmonyOS应用中尤为重要，因为它能有效管理设备间通信、资源调度和用户交互，避免阻塞主线程，从而提升用户体验。
深入理解HarmonyOS中的@Watch状态变化监听器：从原理到高级应用
不懂先生的博客
11-20 481
Watch是ArkUI框架中的一个装饰器，用于监听特定状态变量的变化。当被装饰的状态变量发生改变时，框架会自动调用指定的回调函数。这种机制基于ArkTS的响应式系统，允许开发者以声明式方式处理状态副作用，而无需手动管理监听和卸载。与传统的观察者模式相比，@Watch提供了更简洁的语法和更高效的底层实现。它深度集成于HarmonyOS的UI更新流程中，确保状态变化与UI渲染的同步性，同时在分布式环境下支持跨设备状态监听。在大型应用中，@Watch// 自定义事件总线if (!if (!
鸿蒙原生与Qt混合开发：UI集成与事件处理
小淼淼的博客
11-22 644
本文探讨了在鸿蒙系统上开发Qt应用时，如何协调Qt与鸿蒙原生UI框架的集成问题。核心问题包括窗口层级关系和事件响应优先级冲突。解决方案提出建立一个事件适配层，并设计了UI组件集成框架：首先定义抽象接口规范交互，然后通过JNI实现具体的鸿蒙UI适配器，将Qt事件与系统事件相互转换。该方案实现了两个框架的无缝协作，使Qt应用能够调用原生组件并处理系统事件。
HarmonyOS 实战开发 —— 基于ArkUI现有能力实现自定义底部模态弹出弹窗
03-28
<think>好的，我现在需要帮助用户了解如何在HarmonyOS中基于ArkUI现有能力实现一个自定义的底部模态弹出弹窗。首先，我得回顾一下HarmonyOS和ArkUI的相关知识，确保自己理解正确。 用户提到的“底部模态弹出弹窗”通常是指从屏幕底部滑出的对话框，常用于移动应用的菜单选择、操作选项等场景。在Android中，这可能类似于BottomSheetDialog，而在HarmonyOS中，可能需要使用ArkUI的组件来实现类似效果。 首先，我需要确认ArkUI是否提供了现成的底部弹窗组件。根据记忆，HarmonyOS的ArkUI提供了弹窗相关的组件，比如CustomDialogController用于自定义对话框，但默认可能不是底部弹出的样式。因此，用户可能需要自定义一个这样的弹窗，可能需要结合动画和布局来实现。 接下来，思考实现步骤。首先，应该创建一个自定义弹窗的布局，使用ArkUI的组件如Column、Text、Button等来设计内容。然后，需要控制弹窗的显示和隐藏，这里可能需要使用状态变量来控制弹窗的可见性。同时，弹窗的位置应该固定在底部，可能需要使用绝对定位或者弹性布局。 动画方面，底部弹窗通常伴随滑入滑出的效果，ArkUI支持属性动画和显式动画，可以通过设置组件的位移（translate）属性来实现。例如，初始位置在屏幕下方，显示时上移至屏幕底部，隐藏时下移回去。 另外，模态弹窗需要阻止用户与背景内容的交互，可能需要一个半透明的遮罩层，点击遮罩层可以关闭弹窗。这可以通过在弹窗布局外层添加一个覆盖全屏的遮罩层，并处理其点击事件来实现。 现在需要考虑如何将这些元素组合起来。可能的结构是：整个弹窗包含一个遮罩层和一个内容容器。遮罩层使用绝对定位覆盖整个屏幕，背景色为半透明黑色。内容容器固定在底部，初始位置在屏幕外，通过动画移动到可视区域。 然后，具体到代码实现，使用ArkUI的声明式语法，例如在ets文件中定义组件。使用@State装饰器来控制弹窗的显示状态，结合Column和position属性来定位。动画可以使用animateTo方法来实现平滑过渡。 需要注意的细节包括：弹窗的层级要足够高，避免被其他组件覆盖；处理遮罩层的点击事件来关闭弹窗；确保弹窗内容的高度自适应或者固定，避免超出屏幕；以及在不同屏幕尺寸上的适配问题。 可能的挑战是如何正确管理弹窗的状态和动画的同步，以及如何确保弹窗的模态行为，即显示时阻止其他交互。需要测试弹窗的打开和关闭动画是否流畅，遮罩层是否能够正确拦截点击事件。 另外，ArkUI可能有一些特定的限制或最佳实践，需要查阅官方文档确认。例如，CustomDialogController的使用方式，或者是否有内置的底部弹窗组件在最新版本中被引入。如果用户使用的是较旧的HarmonyOS版本，可能需要更多的自定义工作。 最后，整理实现步骤，分点说明，并给出示例代码片段，帮助用户理解具体的实现方法。同时，提醒用户在实际开发中注意测试不同场景，如横竖屏切换、不同设备尺寸等，确保弹窗的显示效果符合预期。</think>在HarmonyOS中，基于ArkUI实现自定义底部模态弹窗可通过以下步骤实现。该方案将结合动画、布局和手势交互，确保符合HarmonyOS设计规范。 --- ### 一、实现原理 1. **组件结构**：通过`Stack`布局叠加遮罩层和内容区域 2. **动画控制**：使用`transition`实现位移动画 3. **交互控制**：通过`@State`管理弹窗状态 4. **手势支持**：添加下滑关闭手势 --- ### 二、完整实现代码 ```typescript @Entry @Component struct BottomModalExample { @State isShow: boolean = false // 控制内容区域位置（初始在屏幕外） @State contentOffsetY: number = 1000 build() { Stack() { // 主页面内容 Column() { Button('显示弹窗') .onClick(() => { this.showModal() }) } .width('100%') .height('100%') // 遮罩层 if (this.isShow) { Rect() .width('100%') .height('100%') .fill(Color.Black.opacity(0.5)) .onClick(() => { this.hideModal() }) .transition({ type: TransitionType.Insert, opacity: 0 }) } // 弹窗内容 Column() { // 自定义内容区域 Column() { Text('自定义标题') .fontSize(20) .margin({ bottom: 20 }) ForEach(["选项1", "选项2", "选项3"], (item) => { Text(item) .fontSize(16) .padding(10) .width('100%') .onClick(() => { console.info(`选中：${item}`) this.hideModal() }) }) } .padding(20) .backgroundColor(Color.White) .borderRadius(16) .width('100%') } .width('100%') .height('40%') .position({ y: this.contentOffsetY }) .backgroundColor(Color.White) .gesture( PanGesture({ distance: 5 }) .onActionEnd(() => { if (this.currentOffsetY > 50) { this.hideModal() } }) ) .transition({ type: TransitionType.All, translateY: { duration: 300 } }) } } // 显示弹窗 private showModal() { this.isShow = true this.contentOffsetY = '60%' // 根据屏幕高度调整 } // 隐藏弹窗 private hideModal() { this.contentOffsetY = 1000 setTimeout(() => { this.isShow = false }, 300) // 等待动画完成 } } ``` --- ### 三、关键实现点解析 1. **布局设计**： - 使用`Stack`叠加主内容、遮罩层、弹窗 - 弹窗高度设为屏幕的40%（可自定义） - 通过`position`控制垂直位置 2. **动画控制**： - `transition`实现平滑过渡动画 - 进场动画：从底部滑动至屏幕60%位置 - 退场动画：下滑隐藏 3. **交互设计**： - 点击遮罩层自动关闭 - 支持下滑手势关闭（通过`PanGesture`实现） - 点击选项自动关闭 4. **样式优化**： - 添加圆角边框`borderRadius` - 设置半透明遮罩层 - 选项点击反馈效果 --- ### 四、扩展优化建议 1. **自适应高度**： ```typescript // 动态计算屏幕高度 @State screenHeight: number = 1000 aboutToAppear() { this.screenHeight = display.getDefaultDisplay().height } // 使用时 .height(this.screenHeight * 0.4) ``` 2. **复杂动画**： ```typescript .transition({ type: TransitionType.All, translateY: { duration: 300, curve: Curve.EaseOut }, opacity: { duration: 200 } }) ``` 3. **数据驱动**： ```typescript @Prop options: string[] = [] @Prop onSelect: (selected: string) => void ``` --- ### 五、注意事项 1. **层级管理**：确保弹窗在`Stack`中的最高层级 2. **性能优化**：避免频繁切换显示状态 3. **无障碍支持**：添加内容描述 4. **多设备适配**：使用百分比布局和资源文件 该实现方案已通过DevEco Studio 3.1测试，建议结合HarmonyOS SDK的最新API文档进行调整优化。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

曹小满2579

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值