【Harmony3.1/4.0】笔记七-选项卡布局

概念

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

底部导航

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

顶部导航

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

侧边导航

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

实现侧边导航栏需要设置Tabs的属性vertical为true。在底部导航和顶部导航实现中，其默认值为false，表明内容页和导航栏垂直方向排列。

选项卡布局嵌套

自定义导航栏

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

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

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

import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Seven{//默认第一个选项卡被选中@State currentIndex:number=0;//自定义选项卡@Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {Column() {Image(this.currentIndex === targetIndex ? selectedImg : normalImg).size({ width: 40, height: 40 })Text(title).fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B').fontSize(20)}.width('100%').height(50).justifyContent(FlexAlign.Center)}build(){
//当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。// Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。Tabs({barPosition:BarPosition.End}){TabContent(){Tabs({barPosition:BarPosition.Start}){TabContent(){Text("关注的内容").width("100%").height("100%").backgroundColor("#74f0").fontColor(Color.White).fontSize(30).textAlign(TextAlign.Center)}.tabBar({text:"关注",})TabContent(){Text("视频的内容").width("100%").height("100%").backgroundColor("#70f8").fontColor(Color.White).fontSize(30).textAlign(TextAlign.Center)}.tabBar({text:"视频",})TabContent(){Text("游戏的内容").width("100%").height("100%").backgroundColor("#7f0f").fontColor(Color.White).fontSize(30).textAlign(TextAlign.Center)}.tabBar({text:"游戏",})TabContent(){Text("数码的内容").width("100%").height("100%").backgroundColor("#70ff").fontColor(Color.White).fontSize(30).textAlign(TextAlign.Center)}.tabBar({text:"数码",})TabContent(){Text("科技的内容").width("100%").height("100%").backgroundColor("#7f6f").fontColor(Color.White).fontSize(30).textAlign(TextAlign.Center)}.tabBar({text:"科技",})}.width("100%").height("100%")}.tabBar(this.TabBuilder("首页",0,$r("app.media.tab1"),$r("app.media.tab1")))TabContent(){Text("推荐的内容").width("100%").height("100%").backgroundColor("#70f0").fontColor(Color.White).fontSize(30).textAlign(TextAlign.Center)}.tabBar(this.TabBuilder("推荐",1,$r("app.media.tab2"),$r("app.media.tab2")))TabContent(){Text("发现的内容").width("100%").height("100%").backgroundColor("#700f").fontColor(Color.White).fontSize(30).textAlign(TextAlign.Center)}.tabBar(this.TabBuilder("发现",2,$r("app.media.tab3"),$r("app.media.tab3")))TabContent(){Text("我的内容").width("100%").height("100%").backgroundColor("#70ff").fontColor(Color.White).fontSize(30).textAlign(TextAlign.Center)}.tabBar(this.TabBuilder("我的",3,$r("app.media.tab4"),$r("app.media.tab4")))}.width("100%").height("100%")//设置选项卡改变事件.onChange((index)=>{this.currentIndex=indexpromptAction.showToast({message:index.toString()})})//设置选项卡垂直显示，默认为水平显示，配合设置选项卡的位置进行上下左右位置的调整.vertical(false)//设置选项卡的模式是拉伸模式还是滚动模式.barMode(BarMode.Fixed).barHeight(80)}
}

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

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

相关文章

AJAX——事件循环（EventLoop）

AJAX——事件循环（EventLoop）

1.事件循环（EventLoop） 概念：JavaScript有一个基于事件循环的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。这个模型与其它语言中的模型截然不同，比如C和Java。 原因：JavaScri…
阅读更多...
Nacos、OpenFeign、网关 笔记

Nacos、OpenFeign、网关 笔记

一、远程调用 1.1配置RestTemplate配置类 package com.hmall.cart.config;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.client.RestTemplate;Configuration public c…
阅读更多...
测试新人，如何快速上手一个陌生的系统！

测试新人，如何快速上手一个陌生的系统！

大家好，我是狂师！ 作为刚不行不久的测试新人，面对一个陌生的系统时，可能会感到有些手足无措。面对一个全新的系统系统，如何快速上手并展开有效的测试工作是一个重要的挑战。 本文将探讨测试新人如何通过一系列步骤和…
阅读更多...
VSCode SSH连接远程主机失败，显示Server status check failed - waiting and retrying

VSCode SSH连接远程主机失败，显示Server status check failed - waiting and retrying

vscode ssh连接远程主机突然连接不上了，终端中显示：Server status check failed - waiting and retrying 但是我用Xshell都可以连接成功，所以不是远程主机的问题，问题出在本地vscode； 现象一： 不停地输入…
阅读更多...
lt Redis变慢的原因及排查解决方法

lt Redis变慢的原因及排查解决方法

前言 Redis 作为优秀的内存数据库，其拥有非常高的性能，单个实例的 OPS 能够达到 10W 左右(5-10W)。但也正因此如此，当我们在使用 Redis 时，如果发现操作延迟变大的情况，就会与我们的预期不符。 你也许或多或少地&…
阅读更多...
OpenAI发布GPT-4.0使用指南

OpenAI发布GPT-4.0使用指南

大家好，ChatGPT 自诞生以来，凭借划时代的创新，被无数人一举送上生成式 AI 的神坛。在使用时，总是期望它能准确理解我们的意图，却时常发现其回答或创作并非百分之百贴合期待。这种落差可能源于我们对于模型性能的过高期…
阅读更多...
Unity 合并子物体获得简化Mesh

Unity 合并子物体获得简化Mesh

合并子物体获得简化Mesh 🥙环境🥪Demo 🥙环境 PackageManager安装Editor Coroutines 导入插件👈 🥪Demo 生成参数微调：Assets/EasyColliderEditor/Scripts/VHACDSettings/VHACDSettings.asset
阅读更多...
【骑友警惕】停骑的惊人后果揭晓 你真的有“休息”的权利吗？

【骑友警惕】停骑的惊人后果揭晓 你真的有“休息”的权利吗？

骑行，不仅仅是一项运动，它是一部分人的生活方式，是对自由的追逐，对健康的向往。然而，在这条充满汗水和风景的路上，有时候我们会因为各种原因不得不暂时停下脚步。但你知道吗？停骑，看…
阅读更多...
Python | Leetcode Python题解之第58题最后一个单词的长度

Python | Leetcode Python题解之第58题最后一个单词的长度

题目： 题解： class Solution:def lengthOfLastWord(self, s: str) -> int:ls[]for i in s.split():ls.append(i)return len(ls[-1])
阅读更多...
若依：Linux Centos 7.9 安装部署RuoYi前后端集成版

若依：Linux Centos 7.9 安装部署RuoYi前后端集成版

目录 1.虚拟机操作系统版本 2.删除旧的jdk 3.下载JDK 17 ： 4.下载 mvn 3.9.6： 5.下载mysql:5.7.44版本 6.git下载若依： 7.修改数据库连接： 8.mvn 清理和打包 9.启动若依： 1.虚拟机操作系统版本 2.删除旧的jd…
阅读更多...
UDP文件传输工具之UDP传输的优点和缺点

UDP文件传输工具之UDP传输的优点和缺点

在当今快节奏的网络通信时代，UDP以其独特的优势，在众多应用场景中扮演着关键角色。本文将深入探讨UDP的优缺点及其应用场景，并重点介绍镭速软件如何通过技术创新，显著提升UDP传输的效率和可靠性。 UDP传输的优点 UDP的显著优势在…
阅读更多...
pytorch-解决过拟合之regularization

pytorch-解决过拟合之regularization

目录 1.解决过拟合的方法2. regularization2. regularization分类3. pytorch L2 regularization4. 自实现L1 regularization5. 完整代码 1.解决过拟合的方法 更多的数据降低模型复杂度 regularizationDropout数据处理早停止 2. regularization 以二分类的cross entropy为例&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023