鸿蒙(HarmonyOS)应用开发实战——tabContent内容可以在tabBar上显示并响应滑动事件案例

最新推荐文章于 2025-02-21 21:43:16 发布

CTrup

最新推荐文章于 2025-02-21 21:43:16 发布

阅读量1.2k

点赞数 9

分类专栏：移动开发 HarmonyOS 鸿蒙开发文章标签： harmonyos 鸿蒙开发移动开发 ArkUI 界面布局

本文链接：https://blog.youkuaiyun.com/CTrup/article/details/142642897

版权

往期知识点整理

介绍

本示例实现了tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。

效果图预览

使用说明

点击播放按钮进行视频播放，按住进度条按钮和进度条下方区域可以拖动进度条，更改视频播放进度。

实现思路

原生的Tabs组件，tabContent内容无法在tabBar上显示。本案例实现tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能

主要是通过将Tabs组件的barHeight设置为0，重新自定义tabBar。将TabContent的内容分为上下两部分，上半部高度为100% - 60vp，存放video组件，下部分高度为60vp，存放进度条。将Tabs组件的zIndex属性设置为2，tabContent的视图就可以堆叠在自定义tabBar之上。再设置hitTestBehavior属性
使被覆盖的tabBar可以响应点击事件。这样就实现tabBar可以响应滑动事件并且tabBar可以响应点击事件的效果。

创建Tabs组件，将barHeight设置为0。

Tabs({
    index: this.index, controller: this.tabsController }) {
   
   ...
}
// TODO: 知识点：将zIndex设置为2，TabContent将在tabBar之上，显示的效果就是TabContent外溢的部分在tabBar上。
.zIndex(CONFIGURATION.TABCONTENTOVERFLOWZINDEX)
.scrollable(false)
.barHeight($r('app.integer.tabcontentoverflow_tabs_barheight'))
.animationDuration(CONFIGURATION.TABCONTENTOVERFLOWTABSDURATION)
.onChange((index: number) => {
   
   this.index = index;
})
// TODO: 知识点：hitTestBehavior属性可以实现在复杂的多层级场景下，一些组件能够响应手势和事件，而一些组件不能响应手势和事件。HitTestMode.Transparent的效果为，自身响应触摸测试，不会阻塞兄弟节点的触摸测试。
.hitTestBehavior(HitTestMode.Transparent)
.id('tabs')
.alignRules({
   
   top: {
    anchor: STRINGCONFIGURATION.TABCONTENTOVERFLOWCONTAINER, align: VerticalAlign.Top },
   left: {
    anchor: STRINGCONFIGURATION.TABCONTENTOVERFLOWCONTAINER

最低0.47元/天解锁文章