HarmonyOS-ArkUI 手势系列4--多层级手势

已于 2025-07-04 16:46:53 修改
阅读量902 收藏 12
点赞数 12
CC 4.0 BY-SA版权
分类专栏： HarmonyOS学习笔记 文章标签： HarmonyOS harmonyos 华为 ArkUI ArkTs
于 2025-07-04 16:40:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_28774815/article/details/149120741

HarmonyOS-ArkUI 手势系列1--API分析及使用方式及示例-优快云博客

HarmonyOS-ArkUI 手势系列2--单一手势(长按，拖拽，滑动，旋转，捏合)-优快云博客

HarmonyOS-ArkUI 手势系列3--组合手势-优快云博客

什么是多层级手势

就是父容器和子组件都有手势监听的情况，叫做多层级手势。

VS Android

如果您没有Android研发经验，可以略过此处。本节主要是讲鸿蒙在onTouch分发事件的时候，与Android存在的重要区别。

如果您之前开发过Android，尤其是界面开发，想必会碰到著名的手势冲突问题。 例如：一个ScrollView(滚动视图)父控件，里面嵌套了一个固定大小的RecyclerView(列表)，这是一个比较常见的搭配方式，如果您只在Xml文件中写完，之后给RecyclerView适配器喂了很多数据，当界面展示出来的时候，您会发现，这个被嵌套的RecyclerView根本就滑不动。

原因就是ScrollView作为父组件，本身就会响应手指的触摸事件， 而RecyclerView作为子组件也本应该响应手指的触摸事件。 而Android默认的事件分发机制，是先问"父亲"拿到onTouch事件之后是否要继续向下层子控件传递，如果"父亲"的源码里写着不传递，那就直接拦截了，子控件是不会知道有这个事件的。这种责任链模式实现的方式，在某些特殊的场景，便显得不是那么灵活了。

最低0.47元/天 解锁文章
HarmonyOS-ArkUI 手势系列1--API分析及使用方式及示例
童年纸飞机的博客
07-01 1016
手势是人机交互的重要方式，可分为单一手势（如点击、滑动）、组合手势（多个手势组合）和多层级手势（复杂嵌套交互）。ArkTS通过gesture属性实现手势监听，如TapGesture监听点击事件。手势API采用接口类型化工厂常量模式，隐藏实现细节，提供统一调用入口。开发者可通过配置手势参数（如count、fingers）和回调函数实现丰富交互，回调返回的GestureEvent包含详细交互数据。这种设计简化了手势监听实现，同时支持复杂交互场景。
HarmonyOS-ArkUI 手势系列2--单一手势(长按，拖拽，滑动，旋转，捏合)
童年纸飞机的博客
07-01 791
本文深入解析了鸿蒙ArkUI中的手势交互机制，详细介绍了长按、拖拽、滑动、旋转和捏合五种单一手势的实现方式。通过gesture属性监听手势事件，开发者可配置参数并设置回调函数处理交互数据。文章提供了每种手势的完整代码示例，展示如何通过API实现缩放、旋转、位移等动态效果。手势分类包括单一、组合和多层级三种类型，本文重点剖析单一手势的API调用模式，为后续组合手势开发奠定基础。所有示例均采用接口类型化工厂常量模式，统一调用入口并隐藏实现细节。
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
2403_89081261的博客
06-10 972
摘要：HarmonyOS开发中，ArkTS框架提供了完善的手势处理能力，包括7种核心手势和3级绑定策略。本文深入解析了点击、长按、拖动等单一手势的实现方法，介绍了父子组件手势冲突的解决方案(.gesture/.priorityGesture/.parallelGesture)，并提出了手势冲突三维处理模型和性能优化方案。通过实际案例展示了如何实现双击切换、长按渐变、拖拽组件等交互效果，为开发者构建了完整的手势开发知识体系，最终实现精准响应与自然交互的平衡。
HarmonyOS核心知识点：ArkUI框架之多层级手势事件
wuliusan5的博客
03-26 618
可以通过设置属性，控制默认的多层级手势事件竞争流程，更好的实现手势事件。目前，responseRegion属性和hitTestBehavior属性可以控制Touch事件的分发，从而可以影响到onTouch事件和手势的响应。而绑定手势方法属性可以控制手势的竞争从而影响手势的响应，但不能影响到onTouch事件。
鸿蒙5.0版开发：ArkUI框架开发-多层级手势事件
m0_73088370的博客
11-06 683
多层级手势事件指父子组件嵌套时，父子组件均绑定了手势或事件。
HarmonyOS NEXT实战开发：多层级手势事件
hanyanyou的博客
07-30 934
多层级手势事件指父子组件嵌套时，父子组件均绑定了手势或事件。
鸿蒙HarmonyOS(ArkUI基础-4）
weixin_67448099的博客
11-07 1381
（今天更新的内容是通用布局属性与层叠布局）
HarmonyOS Next开发学习手册——多层级手势事件
maniuT的博客
07-07 859
可以通过设置属性，控制默认的多层级手势事件竞争流程，更好的实现手势事件。目前，responseRegion属性和hitTestBehavior属性可以控制Touch事件的分发，从而可以影响到onTouch事件和手势的响应。而绑定手势方法属性可以控制手势的竞争从而影响手势的响应，但不能影响到onTouch事件。
鸿蒙HarmonyOS （开发进阶）多层级手势事件（ArkUI）
m0_67143533的博客
10-26 734
多层级手势事件指父子组件嵌套时，父子组件均绑定了手势或事件。在该场景下，手势或者事件的响应受到多个因素的影响，相互之间发生传递和竞争，容易出现预期外的响应。
鸿蒙 Secure Boot 全流程解析：从 BootROM 到内核签名验证的实战指南
最新发布
m0_74456227的博客
07-11 663
摘要： 鸿蒙系统采用"自底向上，逐级验证"的安全启动机制，通过Boot ROM、BootLoader、内核和系统四个阶段的完整校验（含代码示例），确保系统从硬件到应用层的可信运行。该设计支持智能穿戴、家居控制、车载系统等多场景应用，结合硬件安全模块形成全链路保护。文章通过优化代码演示了内核签名验证、固件校验等核心流程，并解答了Boot ROM不可修改、多级校验必要性等关键问题，为开发者提供了可信启动的完整实现方案。
鸿蒙网络编程系列57-仓颉版固定包头可变包体解决TCP粘包问题
长弓三石
07-10 684
本文介绍了使用固定包头可变包体方案解决TCP粘包问题的方法。该方案通过在数据包前添加2字节固定包头来记录包体长度，避免了传统结束标志法的局限性。文章展示了在鸿蒙系统仓颉语言API17环境下的实现步骤，包括项目创建、权限配置、代码编写等关键环节。演示示例通过TCP回声服务器测试，成功实现了数据包的完整收发，解决了粘包问题。主要代码展示了如何构建包含长度信息的包头，以及如何通过缓冲区管理确保数据包的完整性。该方法适用于需要稳定传输数据的网络应用场景。
京东携手HarmonyOS SDK首发家电AR高精摆放功能
京东零售技术的博客
07-11 215
此次发布的‘AR高精摆放’功能，不仅是京东3D产品矩阵的重要组成，也是京东布局‘3D信息流’的关键一步，”京东XR创新团队负责人表示，“未来，京东将继续以技术驱动体验升级，持续优化3D引擎、拓展AIGC能力，并与更多品牌合作，共同探索3D信息流时代的无限可能。用户只需通过手机摄像头扫描现实世界的环境，系统即可自动识别空间结构并计算空间尺寸，随后将京东平台上的家电商品以1:1比例的3D模型呈现在用户真实环境中，以虚实融合实现真正的“所见即所得”。
配置鸿蒙 fastboot
dilvx的博客
07-09 358
fastboot 是一种基于 USB 的底层通信协议，设备进入 fastboot 模式时，会以特定的“USB 设备身份”（通过 Vendor ID、Product ID 等标识）与电脑通信。都需要首先安装驱动。但是 windows 集成了 google 的驱动，并且绝大多数厂商会遵顼 Google 开发标准使用兼容的 Vender ID 和 Product ID。，其 Vendor ID（厂商标识）和 Product ID（产品标识）大多被纳入行业通用标准，或与安卓 ADB 驱动共享基础框架。
交通银行基于HarmonyOS数字盾服务，实现大额转账安全
HarmonyOS SDK闭源开放能力技术团队
07-09 1006
在近日落幕的华为开发者大会2025（6月20日-6月22日）上，交通银行作为HarmonyOS安全合作的关键伙伴受邀出席。在大会的主题演讲上介绍了交通银行基于HarmonyOS SDK设备安全服务（Device Security Kit）中的数字盾服务，成功打造了安全盾，实现大额转账场景安全的合作成果。
HarmonyOS学习记录4
AX400的博客
07-10 611
UIAbility组件是一种包含UI的应用组件，主要用于和用户交互。被@Entry装饰的组件（页面）的生命周期流程，如下图所示router页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：（不推荐使用）onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景onBackPress：当用户点击返回按钮时触发。
HarmonyOS中各种动画的使用介绍
cj641809386的专栏
07-09 635
摘要：鸿蒙系统（HarmonyOS）提供全面的动画解决方案，包括属性动画、显式动画、转场动画、帧动画、粒子动画和路径动画等类型。属性动画通过animateTo实现组件属性平滑过渡，转场动画支持页面切换效果，帧动画适合逐帧控制，粒子动画可创建复杂视觉效果。开发者应注意性能优化，如合并动画闭包、减少布局属性动画等。系统支持从简单交互到复杂场景的动画需求，需根据具体场景选择合适类型并参考官方实践案例。
开源 Arkts 鸿蒙应用 开发（六）数据持久--文件和首选项存储
ajassi2000的博客
07-10 867
本文记录了使用ArkTS进行HarmonyOS应用开发的学习经历，主要包含文件存储和首选项存储的实现方法。文件存储部分展示了通过fs模块实现文本读写功能，包括文件路径获取、写入和读取操作，并提供界面交互演示。首选项存储部分详细说明了Preferences的使用，包括初始化、数据写入（字符串、二进制、数字）、读取和删除操作，通过三个按钮分别实现不同功能。文章还附带了完整的代码示例和测试效果说明，为嵌入式开发者临时转型App开发提供了实用参考。
用AI重塑游戏体验：《诛仙2》携手HarmonyOS SDK实现性能与功耗双赢
HarmonyOS SDK闭源开放能力技术团队
07-09 650
作为由完美世界开发的国风MMORPG，《诛仙2》构建的宏大的游戏世界，不仅拥有陆地、海洋与北境等多种地貌组成的6km*6km超大无缝地图，还加入了独特的角色光照及渲染系统，其极致写实的画面在广受玩家好评的同时，也不可避免提高了图形负载。在移动端，高负载意味着用户设备很容易遭遇掉帧、发热等体验瓶颈。传统的优化手段如直接降低分辨率和限制帧率，虽能缓解功耗，但会牺牲视觉质量，与《诛仙2》所追求的"极致国风仙侠感"写实画质背道而驰。
arkts顶部和底部导航栏如何避免冲突？
02-26
<think>嗯，用户问的是如何在ArkTS中避免顶部和底部导航栏的冲突。这个问题看起来是关于HarmonyOS应用开发的，特别是使用ArkUI框架的时候，导航栏的布局问题。首先，我需要回忆一下ArkTS中的布局组件和导航组件的使用方法。 用户可能已经遇到了顶部和底部导航栏同时存在时，内容区域被覆盖或者布局错乱的情况。这时候需要确保两个导航栏都不影响主要内容区域，并且各自固定在屏幕的顶部和底部。常见的做法可能是使用Flex布局或者层叠布局，比如将顶部和底部导航栏固定在屏幕的上下，中间内容区域可滚动。 首先，我应该考虑使用Column容器作为根布局，里面包含顶部导航栏、内容区域和底部导航栏。内容区域需要用Flex布局的flexWeight属性来占据剩余空间，这样无论内容多少，都能正确适配。同时，要确保内容区域可以滚动，特别是在内容较多时，可能需要使用Scroll组件。 另外，要注意导航栏的固定位置，避免在滚动时被覆盖。可能需要使用position属性来固定，但ArkUI中可能更推荐使用Flex布局的flexWeight来分配空间。例如，顶部导航栏高度固定，底部也是固定高度，中间内容区域flexWeight(1)来填充剩余空间。 还有可能用户的问题是关于同时使用Tabs和底部导航栏时的路由冲突。比如，顶部Tabs切换内容，而底部导航切换不同的页面，这时候需要确保两者的状态管理不冲突。可能需要分别管理顶部Tabs的索引和底部导航的索引，避免互相干扰。 此外，导航栏的层级问题，比如使用Stack布局时，导航栏可能会覆盖内容。这时候应该把内容区域放在中间，并且允许滚动。或者，使用Column布局，按顺序排列顶部、内容和底部，这样自然不会有覆盖的问题。 还需要考虑不同设备的屏幕适配，比如不同的屏幕尺寸和方向，确保导航栏不会挤压内容区域。使用百分比或者相对单位可能更合适，但ArkTS中可能更推荐使用资源文件进行适配。 最后，可能需要检查导航栏的样式，比如高度、背景色和阴影，确保它们正确显示，并且内容区域的内边距不会被导航栏遮挡。例如，在内容区域添加paddingTop和paddingBottom，避免内容被顶部和底部导航栏遮挡。 总结一下，解决方案应该是使用Column布局，顶部和底部固定高度，中间内容区域使用flexWeight(1)和Scroll组件，确保内容可滚动且不冲突。同时，在涉及多个导航组件时，分别管理各自的状态，避免交互冲突。</think>在 ArkTS（HarmonyOS 的声明式 UI 开发框架）中，当同时使用**顶部导航栏**（如 `Tabs` 或自定义导航栏）和**底部导航栏**（如 `BottomNavigation` 或 `NavigationContainer`）时，可能会因布局层级、位置或事件冲突导致显示异常。以下是避免冲突的常见方法： --- ### 1. **明确布局层级** - 使用 `Column` 或 `Stack` 作为根容器，将**顶部导航栏**和**底部导航栏**固定在屏幕边缘，中间区域作为内容区。 - 示例： ```typescript Column() { // 顶部导航栏 TopNavigationBar() .height(50) // 固定高度 // 中间内容区域（可滚动） Scroll() { ContentComponent() // 页面主体内容 } .flexWeight(1) // 占据剩余空间 // 底部导航栏 BottomNavigationBar() .height(60) // 固定高度 } .width('100%') .height('100%') ``` --- ### 2. **合理分配空间** - **中间内容区域**需设置为 `flexWeight(1)`，确保其自动填充顶部和底部导航栏之外的剩余空间。 - 避免使用 `position: fixed` 或绝对定位覆盖导航栏，优先使用弹性布局（Flex）。 --- ### 3. **路由与状态管理** - **顶部导航栏**（如 Tabs）和**底部导航栏**通常管理不同层级的导航： - **底部导航**：切换一级页面（如首页、分类、个人中心）。 - **顶部导航**：切换当前页面的子视图（如首页下的推荐、热门）。 - 使用 `@State` 或全局状态管理（如 `AppStorage`）分别记录顶部和底部导航的选中索引，避免互相干扰。 --- ### 4. **避免手势冲突** - 如果顶部/底部导航栏包含可滑动组件（如横向 TabBar），需确保手势事件不会与页面滚动冲突。 - 通过 `onTouch` 事件或自定义手势控制交互优先级。 --- ### 5. **适配安全区域** - 针对不同设备（如屏幕刘海、圆角），在内容区域添加安全边距，防止内容被遮挡： ```typescript Scroll() { ContentComponent() } .padding({ top: 安全区域上边距, bottom: 安全区域下边距 }) ``` --- ### 示例代码：综合布局 ```typescript @Entry @Component struct MainPage { @State bottomIndex: number = 0; // 底部导航索引 @State tabIndex: number = 0; // 顶部 Tabs 索引 build() { Column() { // 顶部 Tabs 导航 Tabs({ barPosition: BarPosition.Start }) { TabContent() { Text('推荐') } TabContent() { Text('热门') } } .barWidth('100%') .height(50) // 动态内容区域 Scroll() { if (this.bottomIndex === 0) { // 根据底部导航显示不同页面 HomeContent({ tabIndex: this.tabIndex }) // 首页内容（含子 Tab） } else if (this.bottomIndex === 1) { CategoryPage() } } .flexWeight(1) // 底部导航栏 BottomNavigation() { BottomNavigationItem({ icon: '首页', text: '首页' }) .onClick(() => this.bottomIndex = 0) BottomNavigationItem({ icon: '分类', text: '分类' }) .onClick(() => this.bottomIndex = 1) } .height(60) } .width('100%') .height('100%') } } ``` --- ### 关键点总结 1. **布局分离**：顶部和底部导航栏固定位置，中间内容区域自适应。 2. **状态独立**：分别管理不同导航组件的选中状态。 3. **空间适配**：使用 `flexWeight` 确保内容区域自动填充。 4. **事件隔离**：避免手势或点击事件冲突。 通过合理设计层级和状态管理，可以确保导航栏和谐共存且功能独立。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

曹小满2579

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

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

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

打赏作者

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

抵扣说明：

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

余额充值