鸿蒙应用的Tabs 组件怎么使用

鸿蒙应用中的Tabs组件是一个用于通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。以下是Tabs组件的使用方法:

一、基本结构

Tabs组件的页面组成包含两个部分,分别是TabContent和TabBar。TabContent是内容页,TabBar是导航页签栏。Tabs组件使用花括号包裹TabContent,其中TabContent显示相应的内容页。

二、常用属性

  1. barPosition:用于设置导航栏的位置,可以是开头(BarPosition.Start)或结尾(BarPosition.End)。默认情况下,导航栏位于顶部(BarPosition.Start)。当vertical属性为true时,barPosition设置为start,则导航栏位于左侧;设置为end,则导航栏位于右侧。
  2. vertical:用于设置导航栏的方向,可以是水平(false)或垂直(true)。
  3. scrollable:控制是否允许滑动。当导航栏的内容过多,无法在一屏内显示完时,可以通过设置scrollable为true来允许滑动。
  4. animationDuration:设置切换动画的时间,单位为毫秒。
  5. barMode:设置导航栏的模式,可以是固定(BarMode.Fixed)或滚动(BarMode.Scrollable)。当标签页过多时,可通过barMode属性设置导航栏的滑动。

三、使用方法

  1. 基本用法

在鸿蒙应用的页面中,可以通过以下方式使用Tabs组件:

@Entry
@Component
struct TabsDemo {build() {Tabs() {TabContent() {Text('首页内容')}.tabBar('首页')TabContent() {Text('推荐内容')}.tabBar('推荐')TabContent() {Text('发现内容')}.tabBar('发现')TabContent() {Text('我的内容')}.tabBar('我的')}}
}
  1. 设置导航栏位置

可以通过barPosition属性设置导航栏的位置。例如,将导航栏设置在底部:

Tabs({barPosition: BarPosition.End}) {// ...TabContent和tabBar的内容
}
  1. 滚动导航栏

当标签页过多,无法在一屏内显示完时,可以通过设置barMode为BarMode.Scrollable来实现滚动导航栏:

Tabs() {ForEach(this.titles, (item: string, index: number) => {TabContent() {Text(`${item}内容`)}.tabBar(`${item}`)})
}.barMode(BarMode.Scrollable)

其中,this.titles是一个包含所有标签页标题的字符串数组。

  1. 自定义导航栏

TabBar在底部时,一般会显示图形和文字,甚至有特殊的图标。可以通过自定义构建函数来实现自定义导航栏:

@Builder
myBuildBar(index: number, title: string, img?: ResourceStr, selectImg?: ResourceStr) {Column() {Image(index == this.selectedIndex ? selectImg : img).width(30).fillColor(Color.Orange)if (index === this.selectedIndex) {Text(title).fontColor(Color.Orange)} else {Text(title)}}
}@Entry
@Component
struct CustomTabsDemo {@State selectedIndex: number = 0build() {Tabs({barPosition: BarPosition.End}) {TabContent() {Text('购物')}.tabBar(this.myBuildBar(0, '购物', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected')))TabContent() {Text('我的')}.tabBar(this.myBuildBar(1, '我的', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected')))// ...其他TabContent和tabBar的内容}.onChange((index: number) => {this.selectedIndex = index})}
}

在上面的代码中,myBuildBar函数用于构建自定义的TabBar,其中selectedIndex用于存储当前选中的TabBar索引。通过onChange事件监听TabBar的切换,并更新selectedIndex的值,从而实现高亮切换效果。

  1. 嵌套使用Tabs

Tabs内可以嵌套多个Tabs,以实现更复杂的布局。例如,可以在一个Tabs组件中嵌套另一个Tabs组件:

@Entry
@Component
struct NestedTabsDemo {title: string[] = ['直播', '推荐', '热门', '动画', '影视', '新征程', '军事', '体育', '八卦', '数码', '财经', '美食', '旅行']build() {Tabs({barPosition: BarPosition.End}) {TabContent() {Tabs() {ForEach(this.title, (item: string, index: number) => {TabContent() {Text(`${item}内容`)}.tabBar(`${item}`)})}.barMode(BarMode.Scrollable)}.tabBar('首页')// ...其他TabContent和tabBar的内容}.scrollable(false).animationDuration(3000)}
}

在上面的代码中,外层的Tabs组件包含一个TabBar和一个内容区域,内容区域中嵌套了另一个Tabs组件。内层的Tabs组件用于显示多个标签页的内容,并通过barMode属性设置为滚动模式。

四、注意事项

  1. TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。
  2. TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。
  3. 在自定义TabBar时,需要注意高亮切换效果的实现,可以通过监听onChange事件或onTabBarClick事件来更新选中状态。

通过以上方法,可以在鸿蒙应用中灵活地使用Tabs组件来实现标签页切换功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/57388.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

纯css实现瀑布流! 附源码!!!

瀑布流用于展示图片信息,我这里用的背景颜色来代替图片 PC端效果 源码(直接复制粘贴就可以运行了!!!) <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>PC端瀑布流</title><style>.box {w…

Umi UI报错:连接失败,请尝试重启dev服务

Umi UI连接失败&#xff0c;请尝试重启dev服务 使用umi ui时遇到以下问题 报错如下 从报错可以看出是淘宝镜像失效的问题&#xff0c;检查淘宝镜像 可以看出淘宝镜像是最新的&#xff0c;并无问题 经过查找发现报错是因为依赖文件中使用了旧的淘宝镜像&#xff0c;在node…

2025国内10大主流免费在线客服系统

ttkefu在线客服 多渠道接入&#xff1a;支持网站、APP、社交媒体等多种渠道接入&#xff0c;方便客户随时进行咨询。多样化沟通&#xff1a;提供图文、视频、表情等多种消息类型&#xff0c;提升沟通效率。智能客服与人工客服结合&#xff1a;机器人客服能够自动识别并理解用户…

美国FDA注册和FDA检测的区别

FDA注册 FDA注册是美国食品药品管理局对进入美国市场的产品进行企业和产品信息登记的过程&#xff0c;其目的主要包含反恐和限制不符合要求产品的市场准入&#xff0c;FDA注册主要针对的企业主要有&#xff1a;食品类企业&#xff08;包含所欲可食用产品及动物饲料&#xff09;…

100种算法【Python版】第2篇——分治法

分而治之 1 分治法原理2 示例说明:归并排序2.1 分治法的步骤2.2 归并排序代码3 分治法应用3.1 最近点对问题3.1.1 Python3代码3.1.2 分治法思路说明3.2 快速傅里叶变换(FFT)3.2.1 Python3代码3.2.1 分治法思路说明3.3 最长公共子序列问题3.3.1 Python3代码3.3.2 分治法思路说…

Java全栈经典面试题剖析4】JavaSE高级 -- 包装类,String, 类方法

目录 面试题3.1 什么是自动装箱与拆箱&#xff1f;用什么方式来装箱与拆箱&#xff1f; 面试题3.2 int和Integer有什么区别&#xff1f; 面试题3.3 Integer常量池 面试题3.4 字符串常量池 面试题3.5 这句代码创建了几个对象? String str1 new String("xyz");…

【大数据应用开发】2023年全国职业院校技能大赛赛题第10套

如有需要备赛资料和远程培训,可私博主,详细了解 目录 任务A:大数据平台搭建(容器环境)(15分) 任务B:离线数据处理(25分) 任务C:数据挖掘(10分) 任务D:数据采集与实时计算(20分) 任务E:数据可视化(15分) 任务F:综合分析(10分) 任务A:大数据平台搭…

RootNeighboursDataset(helpers.dataset_classes文件中的root_neighbours_dataset.py)

任务类型:回归 用途:在 `RootNeighboursDataset` 中,任务是给定一棵根树,预测根节点度数为6的邻居的特征平均值。因此,模型需要基于根节点的结构,找到度为6的邻居,并计算其特征的平均值。这属于回归问题,因为目标是预测连续值(特征的平均值)。 from helpers.dataset_…

C++ 抛异常

目录 一.抛异常与运行崩溃的区别 1.运行崩溃 2.抛异常 二.抛异常机制存在的意义 1.清晰的处理错误 2.结构化的错误管理 3.跨函数传递错误信息 4.异常对象多态性 三.抛异常的使用方法 1.抛出异常 (throw) 2.捕获异常 (catch) 3.标准异常类 四.抛异常的处理机制 1.抛…

【MySQL备份】Percona XtraBackup

这份文档针对的是最新发布的版本&#xff1a;Percona XtraBackup 2.4.29&#xff08;发布说明&#xff09;。 Percona XtraBackup是一款针对MySQL系列服务器的开源热备份工具&#xff0c;在备份过程中不会锁定您的数据库。它能够对MySQL 5.1、5.5、5.6和5.7服务器以及带有Xtra…

UDP传输协议Linux C语言实战

文章目录 1.UDP简介1.1特点1.2 UDP协议头部格式1.2.1 **UDP头部**&#xff1a;1.2.2 **头部意义**&#xff1a;1.2.3 **头部参数**&#xff1a; 1.3 UDP数据长度控制1.4 UDP协议建立框架 2. 函数介绍2.1 sendto函数2.2 recvform函数2.3 其他函数 3.实例3.1 通用结构体、IPV4结构…

转置卷积的一些理解

转置卷积 当图像输入到卷积网络中&#xff0c;最终生成的特征图的宽高会减小 在语义分割中标签和原始图像大小一致&#xff0c;若输出宽高减小&#xff0c;不利于标签比对 于是使用转置卷积将图像宽高还原 在卷积的时候&#xff0c;通常输入大于输出&#xff0c;可根据输入大小…

如何通过 Service Mesh 构建高效、安全的微服务系统

1. 引言 1.1.什么是 Service Mesh&#xff1f; Service Mesh 是一种基础架构层&#xff0c;负责处理微服务之间的通信&#xff0c;它通过在每个服务旁边部署代理&#xff08;通常称为 Sidecar&#xff09;来捕获和管理服务间的网络流量。这种方式解耦了微服务的业务逻辑和基础…

【Linux】waitpid函数 及其 非阻塞等待和阻塞等待

父进程等待子进程结束可以通过两种方式实现&#xff1a;阻塞等待和非阻塞等待。这两种方式各有优缺点&#xff0c;适用于不同的场景。 简单来说&#xff1a; 阻塞等待&#xff1a;先等你&#xff0c;我再继续 非阻塞等待&#xff1a;不等你&#xff0c;我继续做自己的事&…

使用Python实现某易云音乐歌曲下载

前言 在这篇文章中,我们将探讨如何通过Python结合JavaScript代码来逆向网易云音乐的API接口,以获取并下载指定歌曲。请注意,本文仅用于技术学习与交流目的,实际使用时请遵守相关法律法规及服务条款。 目标网站 1. 准备工作 首先,我们需要安装一些必要的库: execjs:用…

NVIDIA RTX 5080移动版GPU真身首曝!全系要用GDDR7

英伟达下一代移动版GPU的神秘面纱似乎正在揭开&#xff0c;Moore’s Law is Dead的最新视频首次曝光了疑似RTX 5080移动版GPU的工程样品照片。 这款工程样品印有N22W-ES-A1&#xff0c;与Clevo的下一代笔记本主板规格表相匹配&#xff0c;表明该芯片确实基于NVIDIA的下一代芯片…

java 提示 避免用Apache Beanutils进行属性的copy。

避免用Apache Beanutils进行属性的copy。 Inspection info: 避免用Apache Beanutils进行属性的copy。 说明&#xff1a;Apache BeanUtils性能较差&#xff0c;可以使用其他方案比如Spring BeanUtils, Cglib BeanCopier。 TestObject a new TestObject(); TestObject b new Te…

Cadence元件A属性和B属性相互覆盖

最近在使用第三方插件集成到Cadence,协助导出BOM到平台上&#xff0c;方便对BOM进行管理和修改&#xff0c;结果因为属性A和属性B不相同&#xff0c;导致导出的BOM错误。如下图&#xff1a; ​​ 本来我们需要导出Q12&#xff0c;结果给我们导出了Q13&#xff0c;或者反之&…

【Python】基础语法错误和异常

在Python中&#xff0c;语法错误和异常是两个常见的问题。下面对它们进行简要介绍。 1.语法错误 (Syntax Error) 语法错误是指代码的语法不符合Python的语言规则。当Python解释器读取程序代码时&#xff0c;如果发现语法不正确&#xff0c;就会抛出语法错误。这种错误通常在代…

SpringBoot实现的高效民宿预订平台

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…