经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 鸿蒙 » 查看文章
鸿蒙HarmonyOS实战-ArkUI组件（Tabs）
来源：cnblogs　　作者：蜀道山QAQ　　时间：2024/4/15 14:39:12　　对本文有异议

??一、Tabs

Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。每个选项卡通常包含一个面板和一个标签，用户可以通过点击标签来切换面板。Tabs组件通常用于展示多个相关但又不需要同时展示的数据集合或功能集合，以提高页面的可维护性和可用性。

Tabs组件的主要功能包括：

  1. 切换选项卡：用户可以通过点击标签来切换显示面板。
  2. 激活状态：当前选中的标签会呈现激活状态，以便用户清楚地知道他们当前所在的选项卡。
  3. 自定义选项卡内容：用户可以通过自定义选项卡内容（例如图片、文本、图标等）来增强页面的可读性和可用性。
  4. 加载延迟：如果页面需要加载大量数据或内容，Tabs组件可以通过延迟加载未激活的面板来提升页面性能。

??1.基本布局

image

Tabs使用花括号包裹TabContent，每一个TabContent对应一个tabBar

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private arr: number[] = [1, 2, 3];
  6.   build() {
  7.     Column() {
  8.       Tabs() {
  9.         TabContent() {
  10.           Text('首页的内容').fontSize(30)
  11.         }
  12.         .tabBar('首页')
  14.         TabContent() {
  15.           Text('推荐的内容').fontSize(30)
  16.         }
  17.         .tabBar('推荐')
  19.         TabContent() {
  20.           Text('发现的内容').fontSize(30)
  21.         }
  22.         .tabBar('发现')
  24.         TabContent() {
  25.           Text('我的内容').fontSize(30)
  26.         }
  27.         .tabBar("我的")
  28.       }
  29.     }
  30.     .height('100%')
  31.     .width('100%')
  32.     .backgroundColor('#F1F3F5')
  33.   }
  34. }

image

??2.导航位置

??2.1 底部导航

BarPosition.End设置底部导航

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private arr: number[] = [1, 2, 3];
  6.   build() {
  7.     Column() {
  8.       Tabs({ barPosition: BarPosition.End }) {
  9.         TabContent() {
  10.           Text('首页的内容').fontSize(30)
  11.         }
  12.         .tabBar('首页')
  14.         TabContent() {
  15.           Text('推荐的内容').fontSize(30)
  16.         }
  17.         .tabBar('推荐')
  19.         TabContent() {
  20.           Text('发现的内容').fontSize(30)
  21.         }
  22.         .tabBar('发现')
  24.         TabContent() {
  25.           Text('我的内容').fontSize(30)
  26.         }
  27.         .tabBar("我的")
  28.       }
  29.     }
  30.     .height('100%')
  31.     .width('100%')
  32.     .backgroundColor('#F1F3F5')
  33.   }
  34. }

image

??2.2 顶部导航

BarPosition.Start设置顶部导航

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private arr: number[] = [1, 2, 3];
  6.   build() {
  7.     Column() {
  8.       Tabs({ barPosition: BarPosition.Start  }) {
  9.         TabContent() {
  10.           Text('首页的内容').fontSize(30)
  11.         }
  12.         .tabBar('首页')
  14.         TabContent() {
  15.           Text('推荐的内容').fontSize(30)
  16.         }
  17.         .tabBar('推荐')
  19.         TabContent() {
  20.           Text('发现的内容').fontSize(30)
  21.         }
  22.         .tabBar('发现')
  24.         TabContent() {
  25.           Text('我的内容').fontSize(30)
  26.         }
  27.         .tabBar("我的")
  28.       }
  29.     }
  30.     .height('100%')
  31.     .width('100%')
  32.     .backgroundColor('#F1F3F5')
  33.   }
  34. }

image

??2.3 侧边导航

实现侧边导航栏需要设置Tabs的属性vertical为true

  • vertical为false时，tabbar宽度会默认撑满屏幕的宽度，需要设置barWidth为合适值。

  • vertical为true时，tabbar的高度会默认实际内容高度，需要设置barHeight为合适值。

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private arr: number[] = [1, 2, 3];
  6.   build() {
  7.     Column() {
  8.       Tabs({ barPosition: BarPosition.Start  }) {
  9.         TabContent() {
  10.           Text('首页的内容').fontSize(30)
  11.         }
  12.         .tabBar('首页')
  14.         TabContent() {
  15.           Text('推荐的内容').fontSize(30)
  16.         }
  17.         .tabBar('推荐')
  19.         TabContent() {
  20.           Text('发现的内容').fontSize(30)
  21.         }
  22.         .tabBar('发现')
  24.         TabContent() {
  25.           Text('我的内容').fontSize(30)
  26.         }
  27.         .tabBar("我的")
  28.       }.vertical(true)
  29.       .barWidth(100)
  30.       .barHeight(200)
  31.     }
  32.     .height('100%')
  33.     .width('100%')
  34.     .backgroundColor('#F1F3F5')
  35.   }
  36. }

image

??3.导航效果

??3.1 限制导航栏的滑动切换

在某些需要进行多级分类的页面上，如同时存在底部导航栏和顶部导航栏时，因为默认情况下导航栏都支持滑动切换，所以当底部导航栏的滑动效果与顶部导航栏出现冲突时，需要限制底部导航栏的滑动，以避免给用户带来不好的体验。

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private arr: number[] = [1, 2, 3];
  6.   build() {
  7.     Column() {
  8.       Tabs({ barPosition: BarPosition.End }) {
  9.         TabContent(){
  10.           Column(){
  12.             Tabs({ barPosition: BarPosition.Start  }) {
  13.               TabContent() {
  14.                 Text('首页的内容').fontSize(30)
  15.               }
  16.               .tabBar('首页')
  18.               TabContent() {
  19.                 Text('推荐的内容').fontSize(30)
  20.               }
  21.               .tabBar('推荐')
  23.               TabContent() {
  24.                 Text('发现的内容').fontSize(30)
  25.               }
  26.               .tabBar('发现')
  28.               TabContent() {
  29.                 Text('我的内容').fontSize(30)
  30.               }
  31.               .tabBar("我的")
  32.             }.vertical(true)
  33.             .barWidth(100)
  34.             .barHeight(200)
  35.           }
  36.           .backgroundColor('#ff08a8f1')
  37.           .width('100%')
  38.         }
  39.         .tabBar('首页')
  40.         TabContent() {
  41.           Text('推荐的内容').fontSize(30)
  42.         }
  43.         .tabBar('推荐')
  45.         TabContent() {
  46.           Text('发现的内容').fontSize(30)
  47.         }
  48.         .tabBar('发现')
  50.         TabContent() {
  51.           Text('我的内容').fontSize(30)
  52.         }
  53.         .tabBar("我的")
  54.       }
  55.       .scrollable(false)
  57.     }
  58.     .height('100%')
  59.     .width('100%')
  60.     .backgroundColor('#F1F3F5')
  61.   }
  62. }

image

??3.2 固定导航栏

Tabs的属性barMode是控制导航栏是否可以滚动，默认值为Fixed

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private arr: number[] = [1, 2, 3];
  6.   build() {
  7.     Column() {
  8.       Tabs({ barPosition: BarPosition.End }) {
  9.         TabContent(){
  10.           Column(){
  12.             Tabs({ barPosition: BarPosition.Start  }) {
  13.               TabContent() {
  14.                 Text('首页的内容').fontSize(30)
  15.               }
  16.               .tabBar('首页')
  18.               TabContent() {
  19.                 Text('推荐的内容').fontSize(30)
  20.               }
  21.               .tabBar('推荐')
  23.               TabContent() {
  24.                 Text('发现的内容').fontSize(30)
  25.               }
  26.               .tabBar('发现')
  28.               TabContent() {
  29.                 Text('我的内容').fontSize(30)
  30.               }
  31.               .tabBar("我的")
  32.             }.vertical(true)
  33.             .barWidth(100)
  34.             .barHeight(200)
  35.           }
  36.           .backgroundColor('#ff08a8f1')
  37.           .width('100%')
  38.         }
  39.         .tabBar('首页')
  40.         TabContent() {
  41.           Text('推荐的内容').fontSize(30)
  42.         }
  43.         .tabBar('推荐')
  45.         TabContent() {
  46.           Text('发现的内容').fontSize(30)
  47.         }
  48.         .tabBar('发现')
  50.         TabContent() {
  51.           Text('我的内容').fontSize(30)
  52.         }
  53.         .tabBar("我的")
  54.       }
  55.       .scrollable(false)
  56.       .barMode(BarMode.Fixed)
  57.     }
  58.     .height('100%')
  59.     .width('100%')
  60.     .backgroundColor('#F1F3F5')
  61.   }
  62. }

image

??3.3 滚动导航栏

滚动导航栏需要设置Tabs组件的barMode属性，默认情况下其值为Fixed，表示为固定导航栏，设置为Scrollable即可设置为可滚动导航栏

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private arr: number[] = [1, 2, 3];
  6.   build() {
  7.     Column() {
  8.       Tabs({ barPosition: BarPosition.End }) {
  9.         TabContent(){
  10.           Column(){
  12.             Tabs({ barPosition: BarPosition.Start  }) {
  13.               TabContent() {
  14.                 Text('首页的内容').fontSize(30)
  15.               }
  16.               .tabBar('首页')
  18.               TabContent() {
  19.                 Text('推荐的内容').fontSize(30)
  20.               }
  21.               .tabBar('推荐')
  23.               TabContent() {
  24.                 Text('发现的内容').fontSize(30)
  25.               }
  26.               .tabBar('发现')
  28.               TabContent() {
  29.                 Text('我的内容').fontSize(30)
  30.               }
  31.               .tabBar("我的")
  33.             }.vertical(true)
  34.             .barWidth(100)
  35.             .barHeight(200)
  36.           }
  37.           .backgroundColor('#ff08a8f1')
  38.           .width('100%')
  39.         }
  40.         .tabBar('首页')
  41.         TabContent() {
  42.           Text('推荐的内容').fontSize(30)
  43.         }
  44.         .tabBar('推荐')
  46.         TabContent() {
  47.           Text('发现的内容').fontSize(30)
  48.         }
  49.         .tabBar('发现')
  51.         TabContent() {
  52.           Text('我的内容').fontSize(30)
  53.         }
  54.         .tabBar("我的")
  55.         TabContent() {
  56.           Text('推荐的内容').fontSize(30)
  57.         }
  58.         .tabBar('推荐')
  60.         TabContent() {
  61.           Text('发现的内容').fontSize(30)
  62.         }
  63.         .tabBar('发现')
  65.         TabContent() {
  66.           Text('我的内容').fontSize(30)
  67.         }
  68.         .tabBar("我的")
  69.         TabContent() {
  70.           Text('推荐的内容').fontSize(30)
  71.         }
  72.         .tabBar('推荐')
  74.         TabContent() {
  75.           Text('发现的内容').fontSize(30)
  76.         }
  77.         .tabBar('发现')
  79.         TabContent() {
  80.           Text('我的内容').fontSize(30)
  81.         }
  82.         .tabBar("我的")
  83.         TabContent() {
  84.           Text('推荐的内容').fontSize(30)
  85.         }
  86.         .tabBar('推荐')
  88.         TabContent() {
  89.           Text('发现的内容').fontSize(30)
  90.         }
  91.         .tabBar('发现')
  93.         TabContent() {
  94.           Text('我的内容').fontSize(30)
  95.         }
  96.         .tabBar("我的")
  97.         TabContent() {
  98.           Text('推荐的内容').fontSize(30)
  99.         }
  100.         .tabBar('推荐')
  102.         TabContent() {
  103.           Text('发现的内容').fontSize(30)
  104.         }
  105.         .tabBar('发现')
  107.         TabContent() {
  108.           Text('我的内容').fontSize(30)
  109.         }
  110.         .tabBar("我的")
  111.         TabContent() {
  112.           Text('推荐的内容').fontSize(30)
  113.         }
  114.         .tabBar('推荐')
  116.         TabContent() {
  117.           Text('发现的内容').fontSize(30)
  118.         }
  119.         .tabBar('发现')
  121.         TabContent() {
  122.           Text('我的内容').fontSize(30)
  123.         }
  124.         .tabBar("我的")
  125.         TabContent() {
  126.           Text('推荐的内容').fontSize(30)
  127.         }
  128.         .tabBar('推荐')
  130.         TabContent() {
  131.           Text('发现的内容').fontSize(30)
  132.         }
  133.         .tabBar('发现')
  135.         TabContent() {
  136.           Text('我的内容').fontSize(30)
  137.         }
  138.         .tabBar("我的")
  139.         TabContent() {
  140.           Text('推荐的内容').fontSize(30)
  141.         }
  142.         .tabBar('推荐')
  144.         TabContent() {
  145.           Text('发现的内容').fontSize(30)
  146.         }
  147.         .tabBar('发现')
  149.         TabContent() {
  150.           Text('我的内容').fontSize(30)
  151.         }
  152.         .tabBar("我的")
  153.       }
  154.       .scrollable(false)
  155.       .barMode(BarMode.Scrollable)
  156.     }
  157.     .height('100%')
  158.     .width('100%')
  159.     .backgroundColor('#F1F3F5')
  160.   }
  161. }

image

??4.自定义导航栏

自定义导航栏是指在应用开发中，开发者使用自己定制的视图代替系统自带的导航栏，以实现更加自由、灵活和符合应用风格的导航栏。自定义导航栏可以包括各种 UI 元素，例如按钮、文本、图片、标签等，以满足不同应用的需求。自定义导航栏可以帮助应用创建独特的风格和品牌形象，提高用户体验和应用的可用性。

  1. @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
  2.   Column() {
  3.     Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
  4.       .size({ width: 25, height: 25 })
  5.     Text(title)
  6.       .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
  7.   }
  8.   .width('100%')
  9.   .height(50)
  10.   .justifyContent(FlexAlign.Center)
  11. }
  1. TabContent() {
  2.   Column(){
  3.     Text('我的内容')  
  4.   }
  5.   .width('100%')
  6.   .height('100%')
  7.   .backgroundColor('#007DFF')
  8. }
  9. .tabBar(this.TabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))

image

??5.切换至指定页签

要想切换特定的标签页，需要使用TabsController。TabsController是Tabs组件的控制器，它用于控制Tabs组件进行标签页的切换。使用TabsController的changeIndex方法，可以实现跳转到指定索引值对应的标签页内容。

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private tabsController : TabsController = new TabsController()
  5.   @State currentIndex:number = 0;
  7.   @Builder TabBuilder(title: string, targetIndex: number) {
  8.     Column() {
  9.       Text(title)
  10.         .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
  11.     }
  12.     .onClick(() => {
  13.       this.currentIndex = targetIndex;
  14.       this.tabsController.changeIndex(this.currentIndex);
  15.     })
  16.   }
  18.   build() {
  19.     Column() {
  20.       Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
  21.         TabContent(){
  22.           Text('首页')
  23.         }.tabBar(this.TabBuilder('首页',0)).backgroundColor(Color.Black)
  25.         TabContent(){
  26.           Text('发现')
  27.         }.tabBar(this.TabBuilder('发现',1)).backgroundColor(Color.Blue)
  29.         TabContent(){
  30.           Text('推荐')
  31.         }.tabBar(this.TabBuilder('推荐',2)).backgroundColor(Color.Red)
  33.         TabContent(){
  34.           Text('我的')
  35.         }
  36.         .tabBar(this.TabBuilder('我的',3)).backgroundColor(Color.Pink)
  37.       }
  38.     }
  39.     .height('100%')
  40.     .width('100%')
  41.     .backgroundColor('#F1F3F5')
  42.   }
  43. }

image

??6.滑动切换导航栏

在不使用自定义导航栏的情况下，Tabs组件会默认实现tabBar与TabContent的切换联动。然而，一旦使用了自定义导航栏，就需要使用TabsController来实现点击页签与页面内容的联动。但使用TabsController无法实现滑动页面时，页面内容对应页签的联动。也就是说，当用户滑动屏幕切换页面内容时，页签栏无法同步切换至对应的页签，这可能会影响用户的体验。

  1. @Entry
  2. @Component
  3. struct NavigationExample {
  4.   private tabsController : TabsController = new TabsController()
  5.   @State currentIndex:number = 0;
  7.   @Builder TabBuilder(title: string, targetIndex: number) {
  8.     Column() {
  9.       Text(title)
  10.         .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
  11.     }
  12.     .onClick(() => {
  13.       this.currentIndex = targetIndex;
  14.       this.tabsController.changeIndex(this.currentIndex);
  15.     })
  16.   }
  18.   build() {
  19.     Column() {
  20.       Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
  21.         TabContent(){
  22.           Text('首页')
  23.         }.tabBar(this.TabBuilder('首页',0)).backgroundColor(Color.Black)
  25.         TabContent(){
  26.           Text('发现')
  27.         }.tabBar(this.TabBuilder('发现',1)).backgroundColor(Color.Blue)
  29.         TabContent(){
  30.           Text('推荐')
  31.         }.tabBar(this.TabBuilder('推荐',2)).backgroundColor(Color.Red)
  33.         TabContent(){
  34.           Text('我的')
  35.         }
  36.         .tabBar(this.TabBuilder('我的',3)).backgroundColor(Color.Pink)
  37.       }.onChange((index) => {
  38.         this.currentIndex = index
  39.       })
  40.     }
  41.     .height('100%')
  42.     .width('100%')
  43.     .backgroundColor('#F1F3F5')
  44.   }
  45. }

image

??写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing??，不定期分享原创知识。
  • 更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY

image

原文链接：https://www.cnblogs.com/shudaoshan/p/18135920

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

鸿蒙热门文章

  • 小窗口大魔力，实况窗服务实时掌控重要信息变化
  • 鸿蒙HarmonyOS实战-ArkUI动画（放大缩小视图）
  • 鸿蒙HarmonyOS实战-ArkUI组件（TextInput/TextArea）
  • 鸿蒙HarmonyOS实战-Web组件（请求响应和页面调试）
  • Winform 控件库 MaterialSkin.2 使用教程（鸿蒙字体版）
  • 鸿蒙开发学习（一）之ArkTS
  • 纯血鸿蒙来了，企业开发者应该关注什么
  • 鸿蒙HarmonyOS实战-ArkUI组件（RelativeContainer）
  • 鸿蒙开发游戏（一）---大鱼吃小鱼（界面部署）
  • 鸿蒙开发游戏（三）---大鱼吃小鱼（放置NPC）

    • 鸿蒙推荐文章

  • 鸿蒙HarmonyOS实战-ArkTS语言基础类库（并发）
  • 鸿蒙HarmonyOS实战-Stage模型（应用上下文Context）
  • 鸿蒙HarmonyOS实战-Stage模型（开发卡片事件）
  • 鸿蒙HarmonyOS实战-Stage模型（UIAbility组件）
  • 鸿蒙HarmonyOS实战-ArkUI事件（焦点事件）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Canvas）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Tabs）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Navigation）
  • 鸿蒙HarmonyOS实战-ArkUI组件（Flex）
  • 鸿蒙HarmonyOS实战-工具安装和Helloworld案例

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号