鸿蒙5.0版开发：ArkUI框架开发-选项卡 (Tabs)

最新推荐文章于 2025-04-09 13:55:11 发布
最新推荐文章于 2025-04-09 13:55:11 发布
阅读量635 收藏 26
点赞数 24
CC 4.0 BY-SA版权
分类专栏： 鸿蒙5.0开发 ArkTS组件 ArkUI框架 文章标签： harmonyos 华为 1024程序员节 音视频 android 数码相机 ArkUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/143274783

 往期鸿蒙全套实战文章必看：

选项卡 (Tabs)

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

最低0.47元/天 解锁文章

200万优质内容无限畅学
HarmonyOS鸿蒙开发指南:容器组件 tabs开发指导
sybh的博客
01-08 1368
用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。在本场景中，开发者可以点击标签切换内容，选中后标签文字颜色变红，并显示下划线。设置Tabs背景色及边框和tab-content布局。
HarmonyOS实战开发：Tabs（组件导航）
2401_84194030的博客
05-10 2076
当页面信息较多时，为了让用户能够聚焦于当前显示的内容......
【愚公系列】2023年12月 HarmonyOS教学课程 026-ArkUI组件（Tabs）
热门推荐
时光隧道
12-12 6万+
自定义导航栏是指在应用开发中，开发者使用自己定制的视图代替系统自带的导航栏，以实现更加自由、灵活和符合应用风格的导航栏。自定义导航栏可以包括各种 UI 元素，例如按钮、文本、图片、标签等，以满足不同应用的需求。自定义导航栏可以帮助应用创建独特的风格和品牌形象，提高用户体验和应用的可用性。Column() {Column(){Text('我的内容')
鸿蒙5.0开发：ArkUI组件（Tabs）
AyomQAQ的博客
10-14 979
Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。
HarmonyOS 鸿蒙应用开发( 五、快速实现ArkUI页面底部导航Tabs)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-25 6193
对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。图9自定义导航栏图系统默认情况下采用了下划线标志当前活跃的页签，而自定义导航栏需要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。设置自定义导航栏需要使用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。
鸿蒙5.0开发进阶：UI框架-选项卡 (Tabs)
Androidbye的博客
09-19 1052
当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。
HarmonyOS鸿蒙开发：ArkUI滚动容器-基于webView的嵌套滚动场景
2401_84917132的博客
08-30 1212
内嵌在可滚动容器（Scroll、List...）中的Web组件，接收到滑动手势事件，需要对接ArkUI框架的NestedScrollMode枚举类型，使得Web组件可以嵌套ArkUI可滚动容器，进行嵌套滚动。
鸿蒙5.0版开发：ArkTS组件-Navigation
m0_69424697的博客
11-07 1219
Navigation组件是路由导航的根视图容器...........
【鸿蒙开发】ArkUI容器类组件-Tabs组件（Tabs、TabContent）
huchenghe2的博客
11-15 929
(value?index?: number;controller?Start,End,：指定页签位置来创建Tabs容器组件，定义了以下两种类型：Start（默认值）：当vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。Endvertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。index：指定初次初始页签索引，默认值为0。controller：设置。
鸿蒙(HarmonyOS)应用开发——容器组件（Tabs组件）
weixin_46282323的博客
12-03 3074
Tabs是一种可以通过页签进行内容视图切换的容器组件，每一个页签对应一个内容视图。Tabs组件必须配合子组件TabContent一起使用设置Tabs的页签位置index设置初始化页签位置controller设置Tabs 控制器，用于控制Tabs组件进行页签切换tabBar属性除了支持string类型，还支持使用@Builder装饰器修饰的函数@Entry@ComponentColumn() {})build() {
鸿蒙HarmonyOS开发：tabs结合tabContent实现底部tabBar导航栏布局
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
05-20 1万+
Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Tabs）
m0_64420071的博客
03-16 2617
ArkTS声明式开发（容器组件：Tabs）
【入门到精通】鸿蒙next应用开发：ArkUI组件（Tabs）
最新发布
m0_73088370的博客
04-09 833
Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。
鸿蒙开发-UI-组件导航-Tabs
中年程序员
02-06 3781
上文学习了鸿蒙UI开发组件导航Navigation，学习了组件导航navigation的使用，页面的显示模式以及页面的组成，菜单栏和工具栏的使用设置，本文将要学习另外一种组件导航组件Tabs对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。代码示例。
鸿蒙系列--组件介绍之Tabs组件
weixin_42277946的博客
04-19 1236
鸿蒙系列--组件介绍之Tabs组件
零基础开始学习鸿蒙开发-Tabs的使用
qq_36973384的博客
11-30 1120
代码示例:Text('这是设置内容').fontSize(18)}.tabBar('设置');@Entry@Componentbuild(){Text('这是首页内容').fontSize(18)}.tabBar('首页');Text('这是个人中心内容').fontSize(18)}.tabBar('个人中心');Text('这是设置内容').fontSize(18)}.tabBar('设置');
关于鸿蒙开发中容器组件Tabs的介绍
qq_45569925的博客
08-17 1279
当页面内容较多时，可以通过Tabs组件进行 分类展示。
【鸿蒙5.0打卡学习】（容器组件Tabs）
鸿蒙的技术博客
01-13 569
概念：Tabs组件，又称为标签页组件，是一种常见的界面元素，它允许用户通过一系列可切换的标签来浏览不同的内容。每个标签对应一个内容区域，用户点击不同的标签可以在这些内容区域之间进行切换。
【鸿蒙学习】HarmonyOS应用开发者基础 - 构建更加丰富的页面之Tabs（三）
一个不断前行的程序者
08-15 1369
当页面信息较多时，为了让用户能够**聚焦**于当前显示的内容，需要对页面内容进行**分类**，提高页面空间利用率。Tabs组件可以在一个页面内**快速实现视图内容的切换**，一方面**提升**查找信息的**效率**，另一方面**精简**用户单次获取到的信息量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值