鸿蒙 TabList和Tab基础用法教程

已于 2024-06-12 10:22:02 修改
阅读量947 收藏 2
点赞数 1
分类专栏： 鸿蒙 ArkUI 文章标签： harmonyos 华为
于 2020-12-20 19:45:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xq610928/article/details/111461491
版权
本文介绍了鸿蒙开发中的TabList和Tab组件的使用，包括XML创建、颜色设置、添加Tab、固定模式、响应焦点变化事件监听等，并提供了相关接口和属性的设置方法。通过实例展示了如何在鸿蒙OS中实现顶部导航的标签页切换效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言：

各位同学大家好，有段时间没有给大家更新文章了 具体多久我也不记得，最近在学习鸿蒙开发（第三天学）写了一些小demo 就想着分享给家 今天要讲的是TabList和Tab 鸿蒙OS开发中的 顶部导航控件

准备工作

1 安装鸿蒙开发环境 大家可以看我之前的文章
华为鸿蒙系统开发初体验 ：https://www.jianshu.com/p/f94c847c7fdc
效果图：
QQ截图20201220170606.png

QQ截图20201220170627.png

QQ截图20201220170635.png

具体实现：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
鸿蒙应用开发（基础篇）之列表组件
xiangzhihong8的专栏
09-12 3472
List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。Grid组件为网格容器，是一种网格列表，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用，Grid列表中的每一个条目对应一个GridItem组件。
HarmonyOS鸿蒙基于Java开发:Java UI 常用组件TabList和Tab
sybh的博客
01-12 879
Tablist可以实现多个页签栏的切换，Tab为某个页签。子页签通常放在内容区上方，展示不同的分类。页签名称应该简洁明了，清晰描述分类的内容。
自学鸿蒙应用,自学鸿蒙应用开发（17）- TabList和Tab
weixin_42498585的博客
05-27 182
本文介绍在鸿蒙应用中TabList和TabList.Tab组件的基本用法。具体步骤，可点击查看视频准备TabList页面布局在layout目录下创建TabList布局，将其命名为ability_tablist.xml。xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_...
鸿蒙HarmonyOS 5.0开发实战：自定义视图实现Tab效果实现案例
最新发布
m0_73088370的博客
02-25 967
本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果
鸿蒙应用开发 | 选项卡(TabList / Tab)的功能和用法
08-04 2395
导语：大家好，我是你们的朋友 朋哥，十年码农经验，对技术情有独钟。 今天来一个大招，鸿蒙中的顶部 切换 选项卡 TabList，开发应用的时候会经常用到，一般作为二级内容分类来用的。 不多说，今天的内容很多，下面我们开始今天的文章，还是老规矩，通过如下几点来说： 1，简介 2，属性 3，实战 简介 Tablist可以实现多个页签栏的切换，Tab为某个页签。子页签通常放在内容区上方，展示不同的分类。页签名称应该简洁明了，清晰描述分类的内容。 一般应用场景 都是作为应用首页的...
鸿蒙开发（6）---TabList组件
李元静
06-12 2413
目录鸿蒙App开发之TabList组件创建TabList组件TabList事件监听 鸿蒙App开发之TabList组件 在众多的资讯App中，我们能够看到各式各样的头部标签。比如我们的优快云，通过头部分类标签可以快速找到自己需要学习的内容。 这在鸿蒙之中实现起来也是非常简单的，它给我们提供了TabList组件。今天，我们将详细介绍TabList并实现相应的交互效果。 创建TabList组件 同样的，我们首先在XML布局文件中创建TabList组件。示例代码如下： <TabList ohos
自学鸿蒙应用开发（17）- TabList和Tab
面向对象思考
07-02 713
本文介绍在鸿蒙应用中TabList和TabList.Tab组件的基本用法。 准备TabList页面布局 在layout目录下创建TabList布局，将其命名为ability_tablist.xml。 <?xml version="1.0" encoding="utf-8"?><DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent"
鸿蒙（HarmonyOS）TabList和Tab使用示例
05-16
在鸿蒙操作系统（HarmonyOS）的开发过程中，TabList和Tab组件是构建用户界面时常用的元素，尤其适用于创建多页面、多视图的应用场景。TabList和Tab的结合使用可以为用户提供清晰的导航结构，方便他们在不同内容之间...
鸿蒙HarmonyOS中TabList与Tab组件的应用演示
总结以上内容，本文档主要介绍了鸿蒙（HarmonyOS）操作系统中TabList和Tab组件的使用方法，包括它们的基础概念、属性设置、布局方式以及事件处理机制。通过实例代码的解析，旨在帮助开发者快速学习并实践鸿蒙应用...
鸿蒙HarmonyOS开发 TabList+Fraction实现底部栏切换，尝试用鸿蒙实现自己项目的底部栏效果
weixin_37191074的博客
06-21 2331
先上效果， （暂时没找到合适的带图标的底部栏，要是带图标只能写布局切换吧，萌新的小声bb） 、
鸿蒙 TabList 配合Fraction 实现顶部切换效果
xq610928的博客
03-06 714
前言： 各位同学大家好，有段时间没有给大家更新文章，具体多久我也不清楚哈，昨天发了一篇关于 Fraction。的基础用法和生命周期的，今天我想着配合鸿蒙里面提供的顶部切换控件 tablist 来实现顶部tab 切换然后下面多个fraction的效果。那么废话不多说我们正式开始 准备工作 1 安装鸿蒙开发环境 大家可以看我之前的文章 华为鸿蒙系统开发初体验 ：https://www.jianshu.com/p/f94c847c7fdc 效果图： 具体实现： tablist布局 <?xml ver
TabList
03-16
带有Header的列有框控件 http://zglong.com
鸿蒙OS应用开发之——Java UI框架-常用组件TabList和Tab
我的博客
01-05 590
一 概念 Tab为某个页签 TabList为包含Tab的页签栏，可以实现多个页签的切换 二 创建TabList 3.1 XML中创建TabList <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent
基于tabs实现页面布局
hongxiaomeng的博客
06-04 646
零基础学鸿蒙编程-UI控件_TabList
蓝不蓝编程
10-26 447
什么是TabList TabList一般用来实现标签栏.常见效果如下： 1.基本用法 效果图 代码 1）布局文件代码： <TabList ohos:id="$+id:tab_list" ohos:height="50vp" ohos:width="match_parent" ohos:layout_alignment="center" ohos:normal_text_color="#000000"
探索鸿蒙（HarmonyOS）：TabList和Tab
TULIPSYS的专栏
05-17 1460
官方文档说：“Tablist可以实现多个页签栏的切换，Tab为某个页签。子页签通常放在内容区上方，展示不同的分类。页签名称应该简洁明了，清晰描述分类的内容。”（https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-tablist-tab-0000001062229749） TabList就是页面上方的切换按钮，就像今日头条这种。 参考官方代码做了个示例，介绍一下重点。 地址：https:
鸿蒙应用ArtTS开发---底部切换（tab）和角标组件（Badge）
m0_72951245的博客
06-13 662
鸿蒙应用ArtTS开发---底部切换（tab）和角标组件（Badge）
鸿蒙 Tabs 切换页面刷新
青杉旧故°的博客
03-30 2026
鸿蒙Tabs刷新
【鸿蒙开发实践】——自定义tabs导航栏实现切换效果
liuhaojiabin的博客
10-30 665
但是该导航栏为默认样式，要想实现更多样式，必须自定义TabBar。自定义TabBar步骤1.使用@Builder修饰一个函数tabBarBuilder()，里面是自定义的TabBar的结构。2…tabBar()中传参为自定义构建器this.tabBarBuilder()。注：构建器函数里面是可以传参的，所以多个TabContent可以共用一个tabBarBuilder()然后传不同的参数。.onChange()事件和.onTabBarClick()事件都可以获得当前页面的索引。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xq9527--

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值