输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQ应用框架开发UI框架UI界面Tabs使用overlay实现在页签栏添加自定义组件

Tabs使用overlay实现在页签栏添加自定义组件

更新时间: 2026-06-26 09:07
本文导读

问题现象

Tabs组件如何在TabBar添加页签之外的自定义组件，如文字和图片等？

背景知识

  • Tabs通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
  • overlay支持在绑定的组件上方增加类似遮罩的效果，遮罩可以是文本、自定义组件以及ComponentContent。

解决方案

使用浮层overlay可以实现，步骤如下：

  1. 通过Builder设置浮层。值得注意的是：为了避免阻塞对TabBar的操作，需在浮层Builder的最外层组件上配置.hitTestBehavior(HitTestMode.Transparent)。
    收起
    自动换行
    深色代码主题
    复制
    1. @Builder
    2. overlayExample() {
    3.   Flex({ justifyContent: FlexAlign.SpaceBetween, direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
    4.     Text('登录').fontSize(18).fontColor('#ffcd6c18');
    5.     Image($r('app.media.search'))
    6.       .width(24)
    7.       .height(24);
    8.   }
    9.   .padding({ left: 20, right: 20 })
    10.   .width('100%')
    11.   .height(56)
    12.   .hitTestBehavior(HitTestMode.Transparent); // 配置浮层不阻塞交互
    13. }
  2. 将浮层添加到Tabs上，注意设置barWidth限制页签大小，腾出浮层容纳的空间，barHeight与浮层的最外层组件高度保持一致。
    收起
    自动换行
    深色代码主题
    复制
    1. Tabs() {
    2.   TabContent() {
    3.     Column().width('100%').height('100%').backgroundColor(Color.Pink);
    4.   }.tabBar(SubTabBarStyle.of('订阅'));
    5. 

    6.   TabContent() {
    7.     Column().width('100%').height('100%').backgroundColor(Color.Green);
    8.   }.tabBar(SubTabBarStyle.of('推荐'));
    9. 

    10.   TabContent() {
    11.     Column().width('100%').height('100%').backgroundColor(Color.Blue);
    12.   }.tabBar(SubTabBarStyle.of('热门'));
    13. }
    14. .width('100%')
    15. .height('100%')
    16. .backgroundColor(0xf1f3f5)
    17. .barMode(this.barMode)
    18. .barWidth(200)
    19. .overlay(this.overlayExample(), { align: Alignment.Top });

完整示例参考如下：

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct TabsExample {
  4.   text: string = '文本';
  5.   barMode: BarMode = BarMode.Fixed;
  6. 

  7.   @Builder
  8.   overlayExample() {
  9.     Flex({ justifyContent: FlexAlign.SpaceBetween, direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
  10.       Text('登录').fontSize(18).fontColor('#ffcd6c18');
  11.       Image($r('app.media.search'))
  12.         .width(24)
  13.         .height(24);
  14.     }
  15.     .padding({ left: 20, right: 20 })
  16.     .width('100%')
  17.     .height(56)
  18.     .hitTestBehavior(HitTestMode.Transparent); // 配置浮层不阻塞交互
  19.   }
  20. 

  21.   build() {
  22.     Column() {
  23.       Tabs() {
  24.         TabContent() {
  25.           Column().width('100%').height('100%').backgroundColor(Color.Pink);
  26.         }.tabBar(SubTabBarStyle.of('订阅'));
  27. 

  28.         TabContent() {
  29.           Column().width('100%').height('100%').backgroundColor(Color.Green);
  30.         }.tabBar(SubTabBarStyle.of('推荐'));
  31. 

  32.         TabContent() {
  33.           Column().width('100%').height('100%').backgroundColor(Color.Blue);
  34.         }.tabBar(SubTabBarStyle.of('热门'));
  35.       }
  36.       .width('100%')
  37.       .height('100%')
  38.       .backgroundColor(0xf1f3f5)
  39.       .barMode(this.barMode)
  40.       .barWidth(200)
  41.       .overlay(this.overlayExample(), { align: Alignment.Top });
  42.     }
  43.     .width('100%')
  44.     .height('100%');
  45.   }
  46. }
如何获取RichEditor的段落缩进并修改
如何解决打断无限循环动画后，动画失效问题
相关推荐
文档如何在TabBar页签栏添加其他组件
文档如何在Tabs的tabBar中添加其他组件
文档tabBar实现自定义遮罩效果
文档如何实现自定义Tabs模拟浏览器页签增加删除能力
文档TabBar如何自定义下划线
文档HarmonyOS应用侧基于Tabs组件实现胶囊样式、悬浮留空及重叠毛玻璃等常见TabBar自定义样式
文档如何给tabBar页签设置不同宽度
文档如何实现Tabs自定义页签的下划线与文字内容宽度一致
文档TabBar实现居左或居右样式
文档Tabs组件实现的侧边栏，如何实现自顶到底的效果
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词