HarmonyOS ArkTSTabs组件的使用(六)

Tabs组件的使用

ArkUI开发框架提供了一种页签容器组件Tabs,开发者通过Tabs组件可以很容易的实现内容视图的切换。页签容器Tabs的形式多种多样,不同的页面设计页签不一样,可以把页签设置在底部、顶部或者侧边。

在这里插入图片描述

Tabs组件的简单使用

Tabs组件仅可包含子组件TabContent,每一个页签对应一个内容视图即TabContent组件。下面的示例代码构建了一个简单的页签页面:

@Entry
@Component
struct TabsExample {private controller: TabsController = new TabsController()build() {Column() {Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Green)}.tabBar('green')TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Blue)}.tabBar('blue')TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Yellow)}.tabBar('yellow')TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Pink)}.tabBar('pink')}.barWidth('100%') // 设置TabBar宽度.barHeight(60) // 设置TabBar高度.width('100%') // 设置Tabs组件宽度.height('100%') // 设置Tabs组件高度.backgroundColor(0xF5F5F5) // 设置Tabs组件背景颜色}.width('100%').height('100%')}
}

效果图如下:

在这里插入图片描述

上面示例代码中,Tabs组件中包含4个子组件TabContent,通过TabContent的tabBar属性设置TabBar的显示内容。使用通用属性width和height设置了Tabs组件的宽高,使用barWidth和barHeight设置了TabBar的宽度和高度。

在这里插入图片描述

设置TabBar布局模式
因为Tabs的布局模式默认是Fixed的,所以Tabs的页签是不可滑动的。当页签比较多的时候,可能会导致页签显示不全,将布局模式设置为Scrollable的话,可以实现页签的滚动。

Tabs的布局模式有Fixed(默认)和Scrollable两种:

在这里插入图片描述

  • 当页签比较多的时候,可以滑动页签,下面的示例代码将barMode设置为BarMode.Scrollable,实现了可滚动的页签:
@Entry
@Component
struct TabsExample {private controller: TabsController = new TabsController()build() {Column() {Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Green)}.tabBar('green')TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Blue)}.tabBar('blue')...}.barMode(BarMode.Scrollable).barWidth('100%').barHeight(60).width('100%').height('100%')}}
}

设置TabBar位置和排列方向

Tabs组件页签默认显示在顶部,某些场景下您可能希望Tabs页签出现在底部或者侧边,您可以使用Tabs组件接口中的参数barPosition设置页签位置。此外页签显示位置还与vertical属性相关联,vertical属性用于设置页签的排列方向,当vertical的属性值为false(默认值)时页签横向排列,为true时页签纵向排列。

barPosition的值可以设置为BarPosition.Start(默认值)和BarPosition.End:

  • BarPosition.Start
    vertical属性方法设置为false(默认值)时,页签位于容器顶部。
Tabs({ barPosition: BarPosition.Start }) {...
}
.vertical(false) 
.barWidth('100%') 
.barHeight(60)  

效果图如下:

在这里插入图片描述

vertical属性方法设置为true时,页签位于容器左侧。

Tabs({ barPosition: BarPosition.Start }) {...
}
.vertical(true) 
.barWidth(100) 
.barHeight(200)  

效果图如下:

在这里插入图片描述

  • BarPosition.End
    vertical属性方法设置为false时,页签位于容器底部。
Tabs({ barPosition: BarPosition.End }) {...
}
.vertical(false) 
.barWidth('100%') 
.barHeight(60)

效果图如下:

在这里插入图片描述

vertical属性方法设置为true时,页签位于容器右侧。

Tabs({ barPosition: BarPosition.End}) {...
}
.vertical(true) 
.barWidth(100) 
.barHeight(200)

效果图如下:

在这里插入图片描述

自定义TabBar样式

TabBar的默认显示效果如下所示:

在这里插入图片描述
往往开发过程中,UX给我们的设计效果可能并不是这样的,比如下面的这种底部页签效果:

在这里插入图片描述

TabContent的tabBar属性除了支持string类型,还支持使用@Builder装饰器修饰的函数。您可以使用@Builder装饰器,构造一个生成自定义TabBar样式的函数,实现上面的底部页签效果,示例代码如下:

@Entry
@Component
struct TabsExample {@State currentIndex: number = 0;private tabsController: TabsController = new TabsController();@Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {Column() {Image(this.currentIndex === targetIndex ? selectedImg : normalImg).size({ width: 25, height: 25 })Text(title).fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')}.width('100%').height(50).justifyContent(FlexAlign.Center).onClick(() => {this.currentIndex = targetIndex;this.tabsController.changeIndex(this.currentIndex);})}build() {Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {TabContent() {Column().width('100%').height('100%').backgroundColor('#00CB87')}.tabBar(this.TabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))TabContent() {Column().width('100%').height('100%').backgroundColor('#007DFF')}.tabBar(this.TabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))}.barWidth('100%').barHeight(50).onChange((index: number) => {this.currentIndex = index;})}
}

示例代码中将barPosition的值设置为BarPosition.End,使页签显示在底部。使用@Builder修饰TabBuilder函数,生成由Image和Text组成的页签。同时也给Tabs组件设置了TabsController控制器,当点击某个页签时,调用changeIndex方法进行页签内容切换。

最后还需要给Tabs添加onChange事件,Tab页签切换后触发该事件,这样当我们左右滑动内容视图的时候,页签样式也会跟着改变。

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

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

相关文章

网络参考模型与标准协议(二)-TCP/IP对等模型详细介绍

应用层 应用层为应用软件提供接口,使应用程序能够使用网络服务。应用层协议会指定使用相应的传输层协议,以及传输层所使用的端口等。TCP/IP每一层都让数据得以通过网络进行传输,这些层之间使用PDU ( Paket Data Unit,协议数据单元)彼此交换信…

局域网文件共享神器:Landrop

文章目录 前言解决方案Landrop软件界面手机打开效果 软件操作 前言 平常为了方便传文件,我们都是使用微信或者QQ等聊天软件,互传文件。这样传输有两个问题: 必须登录微信或者QQ聊天软件。手机传电脑还有网页版微信,电脑传手机比…

gitlab 实战

一.安装依赖 yum install -y curl policycoreutils-python openssh-server perl 二.安装gitlab yum install gitlab-jh-16.0.3-jh.0.el7.x86_64.rpm 三.修改下面的 vim /etc/gitlab/gitlab.rbexternal_url http://192.168.249.156 四.初始化 gitlab-ctl reconfigure 五.查看状…

OpenStack-train版安装之环境准备

环境准备 环境介绍VMware配置WMware虚拟机最低配置WMware添加网卡WMware添加硬盘 基础环境安装修改各节点的主机名修改各节点的hosts文件修改各节点的内核参数关闭各节点的防火墙和selinux安装NPT(时间同步)安装OpenStack基础服务包 CentOS升级内核 环境…

C++ Qt 学习(九):模型视图代理

1. Qt 模型视图代理 Qt 模型视图代理,也可以称为 MVD 模式 模型(model)、视图(view)、代理(delegate)主要用来显示编辑数据 1.1 模型 模型 (Model) 是视图与原始数据之间的接口 原始数据可以是:数据库的一个数据表、内存中的一个 StringList&#xff…

集合的自反关系和对称关系

集合的自反关系和对称关系 一:集合的自反关系1:原理:2:代码实现 二:对称关系1:原理:2:代码实现 三:总结 一:集合的自反关系 1:原理: …

简单但好用:4种Selenium截图方法了解一下!

前言 我们执行UI自动化操作时,大多数时间都是不在现场的,出现错误时,没有办法第一时间查看到,这时我们可以通过截图当时出错的场景保存下来,后面进行查看报错的原因,Selenium中提供了几种截图的方法&#x…

OpenAI 董事会与 Sam Altman 讨论重返 CEO 岗位事宜

The Verge 援引多位知情人士消息称,OpenAI 董事会正在与 Sam Altman 讨论他重新担任首席执行官的可能性。 有一位知情人士表示,Altman 对于回归公司一事的态度暧昧,尤其是在他没有任何提前通知的情况下被解雇后。他希望对公司的治理模式进行重…

hisi芯片常见专有名词总结SVP MPP NNIE ACL

1.SVP: Smart Vision Platform是海思媒体处理芯片智能视觉异构加速平台。该平台包含了 CPU、DSP、NNIE(Neural Network Inference Engine)等多个硬件处理单元和运行在这些 硬件上 SDK 开发环境,以及配套的工具链开发环境。 不同芯片下的 SVP 硬件资源…

趣学python编程(七、实现个小网站如此简单 web.py使用介绍)

这里先拿一个小网站的例子来举例,保持好奇心就可以了。因为兴趣才是最好的老师,它能激发人内在的行动力。这里介绍个使用web.py轻量级框架实现的一个小网站,可以看到实现个小网站并不难。python都能用来干什么?那么网站就是它众多…

武汉站--ChatGPT/GPT4科研技术应用与AI绘图及论文高效写作

2023年随着OpenAI开发者大会的召开,最重磅更新当属GPTs,多模态API,未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义,不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

执行npm的时候报权限问题的解决方案

我们在执行npm操作的过程中,会出现以下权限问题,解决方案: 管理员身份 运行cmd 切换目录到要执行命令的文件下 再进行npm操作即可

idea一键打包docker镜像并推送远程harbor仓库的方法(包含spotify和fabric8两种方法)--全网唯一正确,秒杀99%水文

我看了很多关于idea一键打包docker镜像并推送harbor仓库的文章,不论国内国外的,基本上99%都是瞎写的, 这些人不清楚打包插件原理,然后就是复制粘贴一大篇,写了一堆垃圾,然后别人拿来也不能用。 然后这篇文…

下厨房网站月度最佳栏目菜谱数据获取及分析PLus

目录 概要 源数据获取 写Python代码爬取数据 Scala介绍与数据处理 1.Sacla介绍 2.Scala数据处理流程 数据可视化 最终大屏效果 小结 概要 本文的主题是获取下厨房网站月度最佳栏目近十年数据,最终进行数据清洗、处理后生成所需的数据库表,最终进…

丐版设备互联方案:安卓linux互联局域网投屏,文件共享,共享剪切板

华为,苹果,甚至小米最近也推出了澎湃OS,发现实在是太方便了,当然这些对硬件,系统的要求还是比较高,我用的主力机是小米12pro和ubuntu,win双系统也…

Tomcat 9.0.54源码环境搭建

一. 问什么要学习tomcat tomcat是目前非常流行的web容器,其性能和稳定性也是非常出色的,学习其框架设计和底层的实现,不管是使用、性能调优,还是应用框架设计方面,肯定会有很大的帮助 二. 运行源码 1.下载源…

PyTorch中并行训练的几种方式

❤️觉得内容不错的话,欢迎点赞收藏加关注😊😊😊,后续会继续输入更多优质内容❤️ 👉有问题欢迎大家加关注私戳或者评论(包括但不限于NLP算法相关,linux学习相关,读研读博…

dump备份命令

dump备份文件系统,或者目录 文件系统有等级划分,0为全部备份,1.针对上一次有变动的文件进行备份,以此类崔 目录备份:只有一个等级0, 针对文件系统类型有要求ext2,ext3,如果是其他…

pygame播放视频并实现音视频同步

一、前言 在我接触pygame时最新的pygame已经不支持movie模块,这就导致在pygame播放视频变成一个问题,网上搜了下解决方案有两个: 一是使用opencv播放视频,再结合pygame.mixer来播放音频 二是使用moviepy播放视频,再…

K8S1.23.5部署(此前1.17版本步骤囊括)及问题记录

查看你对应命名空间下的pod的重启次数 kubectl get pods --namespace<your-namespace> <your-pod-name> -ojsonpath{.status.containerStatuses[*].restartCount} 应版本需求&#xff0c;升级容器版本为1.23.5 kubernetes组件 一个kubernetes集群主要由控制节…