HarmonyOS 鸿蒙Next 如何解决Tab组件嵌套使用时滑动事件冲突 鸿蒙场景化案例

HarmonyOS 鸿蒙Next 如何解决Tab组件嵌套使用时滑动事件冲突 鸿蒙场景化案例

【问题现象】

在一个Tab组件下嵌套使用了二级Tab，当二级Tab第一个页面左滑或最后一个页面右滑不能切换到一级Tab标签的前一个Tab或后一个Tab。

【背景知识】

• 拖动手势（PanGesture）：拖动手势用于触发拖动手势事件。
• Pangesture的API介绍：拖动手势事件，当滑动的最小距离达到设定的最小值时触发拖动手势事件。
• TabsController控制器：Tabs组件的控制器，用于控制Tabs组件进行页签切换。

【定位思路】

单独使用Tab组件可以直接触发滑动手势。但是，当Tab组件内嵌套了一个子Tab后，由于在子Tab上触发的滑动手势只能作用于当前的组件也就是子Tab上。从而导致手势触发无法作用到父组件的Tab上。

【解决方案】

把子Tab组件再嵌套在一个Column组件内，通过Column组件绑定手势触发。当Column内的Tab触发了首页右滑，或者尾页左滑时。使用TabsController控制器，来改变父Tab的标签index，从而达到控制子Tab首页右滑，或者尾页左滑时，一级Tab左右滑动的效果。

在二级Tab绑定拖动手势事件的方式，当事件触发时，用一级Tabs组件的控制器TabsController切换到一级Tabs指定页签。效果如下：

【总结】

ArkUI为开发提供了完整的基础设施和丰富的能力，灵活的运用各种组件的能力，可以让开发者实现预期的效果。从而为最终使用者提供丰富、良好的交互体验。