第十一节HarmonyOS 常用容器组件3-Tabs

一、Tabs

1、概述

我们经常使用时,会出现试图切换的场景,比如底部有多个菜单,“首页”、 “我的”等。

两个内容容器的切换:

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

二、Tabs组件的使用

Tabs组件仅可包含子组件TabContent,每一个页签对应一个内容视图即TabContent组件。

示例代码:

@Entry
@Component
struct ControlTabs {// 设置Tabs控制器private controller: TabsController = new TabsController()build() {Row() {Column() {Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {TabContent(){Column().width('100%').height('100%').backgroundColor(Color.Red)}.tabBar("Red")TabContent(){Column().width('100%').height('100%').backgroundColor(Color.Green)}.tabBar("Green")}.barWidth('100%') // 设置TabBar宽度.barHeight(60) // 设置TabBar高度.width('100%') // 设置Tabs组件宽度.height('100%') // 设置Tabs组件高度.backgroundColor(0xF5F5F5) // 设置Tabs组件背景颜色}.width('100%')}.height('100%')}
}

效果图:

接口:

Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: ​TabsController​})

参数:

参数名

参数类型

必填

参数描述

barPosition

BarPosition

设置Tabs的页签位置,默认值:BarPosition.Start(顶部)

index

number

设置初始页签索引。

默认值:0

说明:

设置为小于0的值时按默认值显示。

可选值为[0, TabContent子节点数量-1]。

设置不同值时,默认生效切换动效,可以设置animationDuration为0关闭动画。

controller

TabsController

设置Tabs的控制器

一搬是: new TabsController();

BarPosition枚举说明:

名称

描述

Start

Vertical属性方法设置为true时,页签位于容器的左侧;Vertical属性方法设置为false(默认)时,页签位于容器顶部。

End

Vertical属性方法设置为true时,页签位于容器右侧;Vertical属性方法设置为false(默认)时,页签位于容器底部。

Tabs的一些属性:

名称

参数类型

描述

Vertical

boolean

设置为false时为横向Tabs

设置为true时为纵向Tabs。

默认值:false

scrollable

boolean

设置为true时,可以通过滑动页面进行页面的切换。

设置为false时,不可滑动来切换页面。

默认值:true

barMode

BarMode

TabBar布局模式,具体描述见TabBar布局模式。

默认值:BarMode.Fixed

barwidth

number | Length8+

TabBar的宽度值。

说明:

设置为小于0或大于Tabs宽度值时,按默认值显示。

barHeight

number | Length8+

TabBar的高度值。

说明:

设置为小于0或大于Tabs宽度值时,按默认值显示。

animationDuration

number

TabContent滑动动画时长。不设置时,点击切换页签无动画,滑动切换有动画;设置时,点击切换和滑动切换都有动画。

默认值:300

说明:

设置为小于0或百分比时,按默认值显示。

设置TabBar布局模式:

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

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

  • BarMode.Fixed:所有TabBar平均分配barWidth宽度(纵向时平均分配barHeight高度),页签不可滚动,效果图如下:

  • BarMode.Scrollable:每一个TabBar均使用实际布局宽度,超过总长度(横向Tabs的barWidth,纵向Tabs的barHeight)后可滑动。

自定义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.mzph.cn/news/194662.shtml

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

相关文章

跟着Nature Communications学习Hisat-Trinity-PASA等分析流程

一边学习,一边总结,一边分享! 详细教程请访问: 组学分析流程 本期分析流程 Hisat2-SamtoolsTrinity_GG_denovoPASA … 本期教程文章 题目:Genomic insights into local adaptation and future climate-induced vu…

华为手环配置技巧

前言 华为手环作为生活健康辅助设备发挥不可忽视的作用,但每次更换手环后需要重新配置。华为手环不仅有健康监测、消息通知、天气推送、离线支付、公交卡、运动锻炼、等功能,还有倒计时、计时器、手电筒、闹钟、等小工具。下文介绍如何进行配置。 配置…

qt-C++笔记之组件-分组框QGroupBox

qt-C笔记之组件-分组框QGroupBox code review! 文章目录 qt-C笔记之组件-分组框QGroupBox1.《Qt 6 C开发指南》p752.《Qt 官方文档》3.《Qt 5.12实战》——5.9 分组框控件 1.《Qt 6 C开发指南》p75 2.《Qt 官方文档》 中间段落翻译: 我把示例补充完整: …

深入了解Java8新特性-日期时间API之ZonedDateTime类

阅读建议 嗨,伙计!刷到这篇文章咱们就是有缘人,在阅读这篇文章前我有一些建议: 本篇文章大概19000多字,预计阅读时间长需要10分钟以上。本篇文章的实战性、理论性较强,是一篇质量分数较高的技术干货文章&…

【c++随笔15】c++常用第三方库

【c随笔15】c常用第三方库 一、数据库相关:HDFS、libpq、SQLite、RocksDB、unixODBC、Nanobdc、Ignite ; 二、网络通信相关:libcurl、libevent、libssh、mosquitto、nghttp2、libuv; 三、加密和安全相关:1、OpenSSL 四…

【Java 基础】17 集合

文章目录 1.基本概念2.核心接口3.常见实现1)List 接口的实现类ArrayListLinkedListVector 2)Set 接口的实现类HashSetLinkedHashSetTreeSet 3)Queue 接口的实现**类**ArrayQueue 4)Map 接口的实现类HashMapLinkedHashMapTreeMap 4…

GateWay的路由与全局过滤器

1.断言工厂 我们在配置文件中写的断言规则只是字符串,这些字符串会被Predicate Factory读取并处理,转变为路由判断的条件 例如Path/user/**是按照路径匹配,这个规则是由 org.springframework.cloud.gateway.handler.predicate.PathRoutePr…

shell编程-awk命令详解(超详细)

文章目录 前言一、awk命令介绍1. awk命令简介2. awk命令的基本语法3. 常用的awk命令选项4. 常用的awk内置变量 二、awk命令示例用法1. 打印整行2. 打印特定字段3. 根据条件筛选行4. 自定义分隔符5. 从文件中读取awk脚本 总结 前言 awk命令是一种强大的文本处理工具&#xff0c…

柔性数组(Flexible Array Members)在C语言中的应用

什么是柔性数组? 在C语言中,柔性数组(Flexible Array Members,FAMs)是C99标凈引入的一种便捷的数据结构,用于声明具有可变大小数组的结构体。柔性数组通常用于当结构体的大小在编译时不确定,但…

【C++】异常处理 ⑦ ( 异常类的继承层次结构 | 抛出 / 捕获 多个类型异常对象 | 抛出子类异常对象 / 捕获并处理 父类异常对象 )

文章目录 一、抛出 / 捕获 多个类型异常对象1、抛出 / 捕获 多个类型异常对象2、操作弊端3、完整代码示例 二、异常类的继承层次结构1、抛出子类异常对象 / 捕获并处理 父类异常对象2、完整代码示例 - 抛出子类异常对象 / 捕获并处理 父类异常对象 自定义的 异常类 , 可能存在 …

浅析SD-WAN技术如何加强企业网络安全

在这个数字化时代,企业组网的安全性已经成为许多企业所面临的一个重要挑战。特别是随着云计算、移动办公等新型信息技术的普及,企业网络的规模和复杂度不断增加,网络攻击和数据泄露的威胁也日益增加。因此,企业需要采取更加有效的…

西南科技大学C++程序设计实验三(类与对象二)

一、实验目的 1.理解类的复制构造函数的定义、说明与使用 2.扩充类的数据成员,为其增加静态数据成员、常(const)成员、其他类定义的成员等 3.理解组合类的相关知识点 二、实验任务 阅读分析、完善程序。下面是一个学生类student的定义,数据成员包括一个代表姓名字符个数的…

23.12.3日总结

饿了么项目进度 新建菜品的添加属性: 适应不同尺寸的媒体查询: 菜品详细页面: 项目上遇到的问题 媒体查询遇到的问题: 关于媒体查询不能生效的原因-CSDN博客 答辩总结 js中声明变量的关键字(const,let…

c语言编程题经典100例——(61~65例)

1&#xff0c;写一个函数&#xff0c;判断一个数是否为正数。 #include <stdio.h> #include <stdbool.h> bool isPositive(int num) { if (num > 0) { return true; } else { return false; } }int main() { int num, cube; printf("请输入一个…

初始化 Clouder Manager 数据库报错Unable to find JDBC driver for database type: MySQL

CDH部署初始化 Clouder Manager 数据库报错。 解决方法&#xff1a; 把mysql驱动放到 /usr/share/java/目录下面(没有的新建&#xff09;&#xff0c;驱动名称也要修改为mysql-connector-java.jar 再次执行后成功&#xff1a; sudo /opt/cloudera/cm/schema/scm_prepare_data…

SpringBoot之自定义Starter

目录 一、自己的理解 1. 理解一 2. 理解二 二、自定义starter&#xff08;重点&#xff09; 三、以mybatis-spring-boot-starter为例进行分析 1. 写好自己的自动配置类逻辑 2. 创建自己的starter项目并引入自动配置类项目的依赖 3. 在其它项目中使用自定义的starter 一…

c++遍历算法的transform算法

transform 算法函数用于对指定范围内的元素进行一个操作&#xff0c;并将结果存储到另一个范围中。 template<class InputIterator, class OutputIterator, class UnaryOperation> OutputIterator transform(InputIterator first, InputIterator last, OutputIterator r…

共享智能指针shared_ptr

共享智能指针 在C中没有垃圾回收机制&#xff0c;必须自己释放分配的内存&#xff0c;否则就会造成内存泄露。解决这个问题最有效的方法是使用智能指针&#xff08;smart pointer&#xff09;。智能指针是存储指向动态分配&#xff08;堆&#xff09;对象指针的类&#xff0c;…

[ 云计算 | AWS 实践 ] 使用 Java 检查指定的密钥是否存在于给定的 Amazon S3 存储桶中

本文收录于【#云计算入门与实践 - AWS】专栏中&#xff0c;收录 AWS 入门与实践相关博文。 本文同步于个人公众号&#xff1a;【云计算洞察】 更多关于云计算技术内容敬请关注&#xff1a;CSDN【#云计算入门与实践 - AWS】专栏。 本系列已更新博文&#xff1a; [ 云计算 | …

C++ 智能指针和内存管理:使用指南和技巧

C是一门强大的编程语言&#xff0c;但是在内存管理方面却存在着一些问题。手动管理内存不仅费时费力&#xff0c;而且容易出错。因此&#xff0c;C中引入了智能指针这一概念&#xff0c;以更好地管理内存。 什么是智能指针&#xff1f; 在C中&#xff0c;内存的分配和释放都是…