HarmonyOS Next开发学习手册——选项卡 (Tabs)

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

基本布局

Tabs组件的页面组成包含两个部分,分别是TabContent和TabBar。TabContent是内容页,TabBar是导航页签栏,页面结构如下图所示,根据不同的导航类型,布局会有区别,可以分为底部导航、顶部导航、侧边导航,其导航栏分别位于底部、顶部和侧边。

图1 Tabs组件布局示意图

说明

  • TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。
  • TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。

Tabs使用花括号包裹TabContent,如图2,其中TabContent显示相应的内容页。

图2 Tabs与TabContent使用

每一个TabContent对应的内容需要有一个页签,可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置tabBar属性,可以设置其对应页签中的内容,tabBar作为内容的页签。

 TabContent() {Text('首页的内容').fontSize(30)}
.tabBar('首页')

设置多个内容时,需在Tabs内按照顺序放置。

Tabs() {TabContent() {Text('首页的内容').fontSize(30)}.tabBar('首页')TabContent() {Text('推荐的内容').fontSize(30)}.tabBar('推荐')TabContent() {Text('发现的内容').fontSize(30)}.tabBar('发现')TabContent() {Text('我的内容').fontSize(30)}.tabBar("我的")
}

底部导航

底部导航是应用中最常见的一种导航方式。底部导航位于应用一级页面的底部,用户打开应用,能够分清整个应用的功能分类,以及页签对应的内容,并且其位于底部更加方便用户单手操作。底部导航一般作为应用的主导航形式存在,其作用是将用户关心的内容按照功能进行分类,迎合用户使用习惯,方便在不同模块间的内容切换。

图3 底部导航栏

导航栏位置使用Tabs的barPosition参数进行设置。默认情况下,导航栏位于顶部,此时,barPosition为BarPosition.Start。设置为底部导航时,需要将barPosition设置为BarPosition.End。

Tabs({ barPosition: BarPosition.End }) {// TabContent的内容:首页、发现、推荐、我的...
}

顶部导航

当内容分类较多,用户对不同内容的浏览概率相差不大,需要经常快速切换时,一般采用顶部导航模式进行设计,作为对底部导航内容的进一步划分,常见一些资讯类应用对内容的分类为关注、视频、数码,或者主题应用中对主题进行进一步划分为图片、视频、字体等。

图4 顶部导航栏

Tabs({ barPosition: BarPosition.Start }) {// TabContent的内容:首页、发现、推荐、我的...
}
.vertical(true)
.barWidth(100)
.barHeight(200)

侧边导航

侧边导航是应用较为少见的一种导航模式,更多适用于横屏界面,用于对应用进行导航操作,由于用户的视觉习惯是从左到右,侧边导航栏默认为左侧侧边栏。

图5 侧边导航栏

实现侧边导航栏需要将Tabs的vertical属性设置为true,vertical默认值为false,表明内容页和导航栏垂直方向排列。

Tabs({ barPosition: BarPosition.Start }) {// TabContent的内容:首页、发现、推荐、我的...
}
.vertical(true)
.barWidth(100)
.barHeight(200)

说明

  • vertical为false时,tabbar的宽度默认为撑满屏幕的宽度,需要设置barWidth为合适值。

  • vertical为true时,tabbar的高度默认为实际内容的高度,需要设置barHeight为合适值。

限制导航栏的滑动切换

默认情况下,导航栏都支持滑动切换,在一些内容信息量需要进行多级分类的页面,如支持底部导航+顶部导航组合的情况下,底部导航栏的滑动效果与顶部导航出现冲突,此时需要限制底部导航的滑动,避免引起不好的用户体验。

图6 限制底部导航栏滑动

控制滑动切换的属性为scrollable,默认值为true,表示可以滑动,若要限制滑动切换页签则需要设置为false。

Tabs({ barPosition: BarPosition.End }) {TabContent(){Column(){Tabs(){// 顶部导航栏内容...}}.backgroundColor('#ff08a8f1').width('100%')}.tabBar('首页')// 其他TabContent内容:发现、推荐、我的...
}
.scrollable(false)

固定导航栏

当内容分类较为固定且不具有拓展性时,例如底部导航内容分类一般固定,分类数量一般在3-5个,此时使用固定导航栏。固定导航栏不可滚动,无法被拖拽滚动,内容均分tabBar的宽度。

图7 固定导航栏

Tabs的barMode属性用于控制导航栏是否可以滚动,默认值为BarMode.Fixed。

Tabs({ barPosition: BarPosition.End }) {// TabContent的内容:首页、发现、推荐、我的...
}
.barMode(BarMode.Fixed)

滚动导航栏

滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置,内容分类较多,屏幕宽度无法容纳所有分类页签的情况下,需要使用可滚动的导航栏,支持用户点击和滑动来加载隐藏的页签内容。

图8 可滚动导航栏

滚动导航栏需要设置Tabs组件的barMode属性,默认值为BarMode.Fixed表示为固定导航栏,BarMode.Scrollable表示可滚动导航栏。

Tabs({ barPosition: BarPosition.Start }) {// TabContent的内容:关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事...
}
.barMode(BarMode.Scrollable)

自定义导航栏

对于底部导航栏,一般作为应用主页面功能区分,为了更好的用户体验,会组合文字以及对应语义图标表示页签内容,这种情况下,需要自定义导航页签的样式。

图9 自定义导航栏

系统默认情况下采用了下划线标志当前活跃的页签,而自定义导航栏需要自行实现相应的样式,用于区分当前活跃页签和未活跃页签。

设置自定义导航栏需要使用tabBar的参数,以其支持的CustomBuilder的方式传入自定义的函数组件样式。例如这里声明tabBuilder的自定义函数组件,传入参数包括页签文字title,对应位置index,以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否,决定UI显示的样式。

@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)
}

在TabContent对应tabBar属性中传入自定义函数组件,并传递相应的参数。

TabContent() {Column(){Text('我的内容')  }.width('100%').height('100%').backgroundColor('#007DFF')
}
.tabBar(this.tabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))

切换至指定页签

在不使用自定义导航栏时,默认的Tabs会实现切换逻辑。在使用了自定义导航栏后,默认的Tabs仅实现滑动内容页和点击页签时内容页的切换逻辑,页签切换逻辑需要自行实现。即用户滑动内容页和点击页签时,页签栏需要同步切换至内容页对应的页签。

图10 内容页和页签不联动

此时需要使用Tabs提供的onChange事件方法,监听索引index的变化,并将当前活跃的index值传递给currentIndex,实现页签的切换。

@Entry
@Component
struct TabsExample1 {@State currentIndex: number = 2@Builder tabBuilder(title: string, targetIndex: number) {Column() {Text(title).fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')}}build() {Column() {Tabs({ barPosition: BarPosition.End }) {TabContent() {...}.tabBar(this.tabBuilder('首页', 0))TabContent() {...}.tabBar(this.tabBuilder('发现', 1))TabContent() {...}.tabBar(this.tabBuilder('推荐', 2))TabContent() {...}.tabBar(this.tabBuilder('我的', 3))}.animationDuration(0).backgroundColor('#F1F3F5').onChange((index: number) => {this.currentIndex = index})}.width('100%')}
}

图11 内容页和页签联动

若希望不滑动内容页和点击页签也能实现内容页和页签的切换,可以将currentIndex传给Tabs的index参数,通过改变currentIndex来实现跳转至指定索引值对应的TabContent内容。也可以使用TabsController,TabsController是Tabs组件的控制器,用于控制Tabs组件进行内容页切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。

@State currentIndex: number = 2
private controller: TabsController = new TabsController()Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {...
}
.height(600)
.onChange((index: number) => {this.currentIndex = index
})Button('动态修改index').width('50%').margin({ top: 20 }).onClick(()=>{this.currentIndex = (this.currentIndex + 1) % 4
})Button('changeIndex').width('50%').margin({ top: 20 }).onClick(()=>{let index = (this.currentIndex + 1) % 4this.controller.changeIndex(index)
})

图12 切换指定页签

开发者可以通过Tabs组件的onContentWillChange接口,设置自定义拦截回调函数。拦截回调函数在下一个页面即将展示时被调用,如果回调返回true,新页面可以展示;如果回调返回false,新页面不会展示,仍显示原来页面。

Tabs({ barPosition: BarPosition.End, controller: this.controller, index: this.currentIndex }) {...}
.onContentWillChange((currentIndex, comingIndex) => {if (comingIndex == 2) {return false}return true
})

图13 支持开发者自定义页面切换拦截事件

鸿蒙全栈开发全新学习指南

为了积极培养鸿蒙生态人才,让大家都能学习到鸿蒙开发最新的技术,针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线【包含了大厂APP实战项目开发】

本路线共分为四个阶段:

第一阶段:鸿蒙初中级开发必备技能

在这里插入图片描述

第二阶段:鸿蒙南北双向高工技能基础:gitee.com/MNxiaona/733GH

第三阶段:应用开发中高级就业技术

第四阶段:全网首发-工业级南向设备开发就业技术:gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》(共计892页)

如何快速入门?

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题(含参考答案):gitee.com/MNxiaona/733GH

鸿蒙入门教学视频:

美团APP实战开发教学:gitee.com/MNxiaona/733GH

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新学习资源,请移步前往小编:gitee.com/MNxiaona/733GH

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

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

相关文章

01_初识Java

1:软件 101001010010110101010010 一些计算机指令的集合 系统软件 window linux mac 应用软件 QQ note 2:计算机语言 ---汇编语言---pasical vb vf c c c# php java 源码---->编译---->可执行 java --一种面向对象的高级语言…

微软推出集成GPT-4o的文本转语音虚拟数字人服务

微软近日宣布,其全新的文本转语音虚拟数字人服务正式上线,并集成了GPT-4o技术。这一服务为用户提供了创建实时互动数字人的可能。通过先进的自然语言处理技术,数字人能够将文本转化为自然流畅的语音,并配以生动的虚拟形象&#xf…

Zookeeper是什么

ZooKeeper(动物园管理员)是一个开源的分布式协调服务,主要用于分布式应用程序的协调和管理。它由Apache软件基金会开发和维护,提供了一个高度可靠的分布式协调服务,以解决分布式系统中常见的一致性问题。 主要特性和用…

System Design - basic - Sharding in horizontal scaling of databases

Sharding in horizontal scaling of databases is a technique used to distribute data across multiple database servers to enhance performance, scalability, and availability. Here’s a detailed explanation: What is Sharding? Sharding involves breaking up a …

【ubuntu】切换shell并显示git分支名字

y9kp 显示当前shell echo $SHELLwhich bash根据输出,例如 /bin/bash 改变shell: chsh -s /bin/bash退出重新登录 加入函数及覆盖PS1 # Function to return the current Git branch name git_branch() {# Check if the current directory is in a Git …

[数据集][目标检测]猪只状态吃喝睡站检测数据集VOC+YOLO格式530张4类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):530 标注数量(xml文件个数):530 标注数量(txt文件个数):530 标注类别…

在Redis中使用Lua脚本实现多条命令的原子性操作

Redis作为一个高性能的键值对数据库,被广泛应用于各种场景。然而,在某些情况下,我们需要执行一系列Redis命令,并确保这些命令的原子性。这时,Lua脚本就成为了一个非常实用的解决方案。 问题的提出 假设我们有一个计数…

爱奇艺 Opal 机器学习平台:特征中心建设实践

01 综述 Opal 是爱奇艺大数据团队研发的一站式机器学习平台,旨在提升特征迭代、模型训练效率,帮助业务提高收益。整个平台覆盖了机器学习生命周期中特征生产、样本构建、模型探索、模型训练、模型部署等在内的多个关键环节。其中特征作为模型训练的基石…

基于星火大模型的群聊对话分角色要素提取挑战赛-Lora微调与prompt构造

赛题连接 https://challenge.xfyun.cn/topic/info?typerole-element-extraction&optionphb 数据集预处理 由于赛题官方限定使用了星火大模型,所以只能调用星火大模型的API或者使用零代码微调 首先训练数据很少是有129条,其中只有chat_text和info…

使用Vue CLI创建Vue项目并使用Vue Router进行基本配置的步骤

步骤 1: 安装 Vue CLI 首先,确保你的电脑上已经安装了Node.js和npm。然后,通过以下命令安装Vue CLI(如果已经安装,请跳过此步骤): npm install -g vue/cli步骤 2: 创建新的Vue项目 使用Vue CLI创建一个新…

HPC高性能计算课程(乔治亚理工)

HPC科学计算 Edmond Chow教授主页 学习笔记

【Mac】Listen 1 for Mac(最强的音乐搜索工具)软件介绍

软件介绍 Listen 1 for Mac 是一款非常方便的音乐播放软件,主要功能是集成多个音乐平台,让用户可以方便地搜索、播放和管理音乐。它是一个用 Python 语言开发的免费开源综合音乐搜索工具项目,最大的亮点在于可以搜索和播放来自网易云音乐&am…

实用的vueuseHooks,提高编码效率

文章目录 写在前面vueuse 官网安装HooksuseStorage [地址](https://vueuse.org/core/useStorage/)传统方法数据持久化 举例子传统持久化的弊端useStorage 数据持久化 举例子使用useStorage 更改存储数据使用useStorage 删除存储数据 useScriptTag [地址](https://vueuse.org/co…

matlab中simulink仿真软件的基础操作

(本内容源自《详解MATLAB/SIMULINK 通信系统建模与仿真》 刘学勇编著的第二章内容,有兴趣的可以阅读该书) 例:简单系统输入为两个不同频率的正弦、余弦信号,输出为两信号之和,建立模型。 在…

论文阅读_OpenAI嵌入+Lucene

英文名称: Vector Search with OpenAI Embeddings: Lucene Is All You Need 中文名称: 使用OpenAI嵌入进行向量搜索:只需Lucene 链接: http://arxiv.org/abs/2308.14963v1 作者: Jimmy Lin, Ronak Pradeep, Tommaso Teofili, Jasper Xian 机构: 滑铁卢大学戴维切里顿…

锁机制 -- 概述篇

锁机制 1、概述 ​  加锁是为了解决并发场景下,多个线程对同一资源同时进行操作,而导致同一线程多次操作出现结果不唯一的情况(一次操作包含多条指令)。结果不唯一发生的原因在于指令的错乱,前提条件是多线程环境及…

k8s_如何查看container拉取的镜像

当 Kubernetes (k8s) 使用 containerd 作为容器运行时时,可以通过以下方法查看 Kubernetes 集群中拉取的镜像。可以直接在每个节点上使用 containerd 的命令行工具 ctr 来查看已经拉取的镜像。 方法一:使用 ctr 查看节点上的镜像 确保 containerd 已安装并运行: 在 Kuberne…

全面解析:微软Edge浏览器支持的PDF文件操作功能

微软Edge浏览器,作为Windows 10及更高版本操作系统的默认浏览器,不仅提供了快速、安全的网页浏览体验,还内置了对PDF文件的多种操作功能。本文将详细探讨Edge浏览器支持的PDF文件操作,帮助用户更有效地利用这一功能强大的浏览器。…

双指针算法第一弹(移动零 复写零 快乐数)

目录 前言 1. 移动零 (1)题目及示例 (2)一般思路 (3)双指针解法 2. 复写零 (1)题目及示例 (2)一般解法 (3)双指针解法 3. 快…

61.ThreadLocal认识和使用

ThreadLocal介绍 ThreadLocal类用来提供给线程内部的局部变量。 这种变量在多线程环境下访问(通过get和set方法访问)时能保证各个线程的变量相对独立于其他线程内的变量。 ThreadLocal实例通常来说都是private static类型的,用于关联线程和线程上下文。 ThreadLocal的作用…