HarmonyOS NEXT鸿蒙（开发进阶）Tabs组件的使用

最新推荐文章于 2025-04-29 13:56:58 发布
最新推荐文章于 2025-04-29 13:56:58 发布
阅读量2.5k 收藏 28
点赞数 25
CC 4.0 BY-SA版权
分类专栏： HarmonyOS 鸿蒙开发 OpenHarmony 文章标签： harmonyos 华为 鸿蒙 鸿蒙系统 前端 ui android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adaedwa187545/article/details/143054408

  鸿蒙NEXT开发实战往期必看文章：

一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！

“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

HarmonyOS NEXT应用开发案例实践总结合（持续更新......）

HarmonyOS NEXT应用开发性能优化实践总结（持续更新......）

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

基本布局

Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。

图1 Tabs组件布局示意图

说明

  • TabContent组件不支持设置通用宽度属性，其

最低0.47元/天 解锁文章
HarmonyOS鸿蒙开发指南:容器组件 tabs开发指导
sybh的博客
01-08 1357
用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。在本场景中，开发者可以点击标签切换内容，选中后标签文字颜色变红，并显示下划线。设置Tabs背景色及边框和tab-content布局。
HarmonyOS实战开发：Tabs（组件导航）
2401_84194030的博客
05-10 2048
当页面信息较多时，为了让用户能够聚焦于当前显示的内容......
【入门到精通】鸿蒙next应用开发：自定义动效tab实现案例
最新发布
m0_73088370的博客
04-29 594
本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果..........
【愚公系列】2023年12月 HarmonyOS教学课程 026-ArkUI组件（Tabs）
热门推荐
时光隧道
12-12 6万+
自定义导航栏是指在应用开发中，开发者使用自己定制的视图代替系统自带的导航栏，以实现更加自由、灵活和符合应用风格的导航栏。自定义导航栏可以包括各种 UI 元素，例如按钮、文本、图片、标签等，以满足不同应用的需求。自定义导航栏可以帮助应用创建独特的风格和品牌形象，提高用户体验和应用的可用性。Column() {Column(){Text('我的内容')
鸿蒙5.0开发：ArkUI组件（Tabs）
AyomQAQ的博客
10-14 963
Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。
鸿蒙(HarmonyOS)应用开发——容器组件（Tabs组件）
weixin_46282323的博客
12-03 3036
Tabs是一种可以通过页签进行内容视图切换的容器组件，每一个页签对应一个内容视图。Tabs组件必须配合子组件TabContent一起使用设置Tabs的页签位置index设置初始化页签位置controller设置Tabs 控制器，用于控制Tabs组件进行页签切换tabBar属性除了支持string类型，还支持使用@Builder装饰器修饰的函数@Entry@ComponentColumn() {})build() {
HarmonyOS NEXT实战开发：Tabs组件
hanyanyou的博客
07-19 1273
通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
鸿蒙HarmonyOS （开发进阶）tabs界面导航组件
m0_67143533的博客
10-28 313
tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。
HarmonyOS NEXT（开发进阶）全局自定义组件复用原理实现
WEZC156465的博客
10-16 755
在ArkUI中，当页面退出时，系统默认会销毁页面上的所有节点及其对应的NodeItem实例，以释放资源。为了提升性能和资源利用率，应用侧可以主动保存NodeItem实例。通过这种方法，能够有效延长这些NodeItem实例的生命周期，避免不必要的重建开销，从而在后续页面或组件的创建过程中实现快速复用。
鸿蒙开发进阶（HarmonyOS ）Refresh组件的下拉刷新使用详解
adaedwa187545的博客
10-24 646
实现页面下拉刷新距离回调以及刷新距离自定义。
鸿蒙HarmonyOS开发：tabs结合tabContent实现底部tabBar导航栏布局
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
05-20 1万+
Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。
鸿蒙HarmonyOS实战-ArkUI组件（Tabs）
shudaoshanQAQ的博客
01-06 7517
Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。每个选项卡通常包含一个面板和一个标签，用户可以通过点击标签来切换面板。Tabs组件通常用于展示多个相关但又不需要同时展示的数据集合或功能集合，以提高页面的可维护性和可用性。
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Tabs）
m0_64420071的博客
03-16 2608
ArkTS声明式开发（容器组件：Tabs）
【入门到精通】鸿蒙next应用开发：ArkUI组件（Tabs）
m0_73088370的博客
04-09 803
Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。
鸿蒙开发-UI-组件导航-Tabs
中年程序员
02-06 3735
上文学习了鸿蒙UI开发组件导航Navigation，学习了组件导航navigation的使用，页面的显示模式以及页面的组成，菜单栏和工具栏的使用设置，本文将要学习另外一种组件导航组件Tabs对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。代码示例。
鸿蒙系列--组件介绍之Tabs组件
weixin_42277946的博客
04-19 1199
鸿蒙系列--组件介绍之Tabs组件
零基础开始学习鸿蒙开发-Tabs的使用
qq_36973384的博客
11-30 1111
代码示例:Text('这是设置内容').fontSize(18)}.tabBar('设置');@Entry@Componentbuild(){Text('这是首页内容').fontSize(18)}.tabBar('首页');Text('这是个人中心内容').fontSize(18)}.tabBar('个人中心');Text('这是设置内容').fontSize(18)}.tabBar('设置');
HarmonyOS 鸿蒙应用开发( 五、快速实现ArkUI页面底部导航Tabs)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-25 6128
对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。图9自定义导航栏图系统默认情况下采用了下划线标志当前活跃的页签，而自定义导航栏需要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。设置自定义导航栏需要使用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。
关于鸿蒙开发中容器组件Tabs的介绍
qq_45569925的博客
08-17 1255
当页面内容较多时，可以通过Tabs组件进行 分类展示。
HarmonyOS ArkUI框架：组件布局及事件处理示例
HarmonyOS（鸿蒙操作系统）是由华为开发的分布式操作系统，旨在为多种设备和场景提供统一的操作体验。ArkUI 是 HarmonyOS 中用于声明式开发的 UI 框架，它允许开发者通过更简洁的代码来构建应用界面。ArkUI 采用了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值