HarmonyOS4.0从零开始的开发教程09页签切换

HarmonyOS(七)页签切换

List组件和Grid组件的使用

Tabs组件的使用

概述

在我们常用的应用中,经常会有视图内容切换的场景,来展示更加丰富的内容。比如下面这个页面,点击底部的页签的选项,可以实现“首页”和“我的”

两个内容视图的切换。

点击放大

ArkUI开发框架提供了一种页签容器组件Tabs,开发者通过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%')}
}

效果图如下:

img

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

点击放大

说明

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

设置TabBar布局模式

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

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

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

    点击放大

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

    点击放大

  • 当页签比较多的时候,可以滑动页签,下面的示例代码将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给我们的设计效果可能并不是这样的,比如下面的这种底部页签效果:

img

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页签切换后触发该事件,这样当我们左右滑动内容视图的时候,页签样式也会跟着改变。

参考

  • Tabs组件的更多属性和参数的使用,可以参考API:Tabs。
  • @Builder装饰器的使用,可以参考:@Builder。

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

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

相关文章

[ES]ElasticSearch强转日期的时区问题

问题 由于ES不能修改时区,且默认时区始终为UTC。 当才查询数据时,通过强转获得的日期并不是想要的,通过分析发现,正是由于默认时区导致结果相差了8个小时。 查询语句: POST http://localhost:9200/_sql?formattext {&…

CTF工控工业互联网(ISC)复现总结WP(超详细)

工业互联网复现 Modbus协议:MMS协议:ISC工业互联网比赛题目复现:Modbus协议分析:组态软件安全分析:工业协议分析1:工业协议分析2:特殊的工控流量: Modbus协议: Modbus 市…

JavaScript中的连续赋值问题a.x = a = {n:2}

输出以下代码的执行结果并解释为什么 var a {n: 1}; var b a; a.x a {n: 2}; console.log (a.x); console.log (b.x); 下面来分析下这段简单代码的工作步骤,从而进一步理解js引用类型“赋值”的工作方式。 首先第一行和第二行 var a {n:1}; var b a; …

Android studio 工程的 module 依赖关系图绘制 、 Android Module 依赖关系的可视化实现

整体步骤: 1、利用gradle脚本生成dot; 2、利用graphviz将dot可视化转为图片 利用gradle脚本生成dot 下载projectDependencyGraph.gradle脚本 下载 projectDependencyGraph.gradle ,放在项目根目录, 源码如下: t…

JVM 命令行监控及诊断工具

面试题 你使用过Java虚拟机性能监控和故障处理工具吗?(美图) 怎么打出线程栈信息。(字节跳动) JVM诊断调优工具用过哪些? (京东) 怎么获取 Java 程序使用的内存?堆使用…

ScheduleThreadPoolExecutor应用源码

4.1 ScheduleThreadPoolExecutor介绍 从名字上就可以看出,当前线程池是用于执行定时任务的线程池。 Java比较早的定时任务工具是Timer类。但是Timer问题很多,串行的,不靠谱,会影响到其他的任务执行。 其实除了Timer以及ScheduleT…

学生成绩管理系统(Java)

开发环境: Windows 11 IDEA 2021.3.3 需求: package com.it.neu;import java.util.ArrayList; import java.util.Scanner;import static java.time.Clock.system;class Student { //创建学生类private String Stu_name;private String Stu_id;public Student(String id, S…

圆通单号查询,圆通速递物流查询,对需要的单号进行颜色标记

批量查询圆通速递单号的物流信息,并对需要的单号进行颜色标记。 所需工具: 一个【快递批量查询高手】软件 圆通速递单号若干 操作步骤: 步骤1:运行【快递批量查询高手】软件,第一次使用的伙伴记得先注册&#xff0c…

【Java】实现顺序表基本的操作(数据结构)

文章目录 前言顺序表1、打印顺序表2、增加元素3、在任意位置增加元素4、判断是否包含某个元素5、查找某个元素对于的位置6、获取任意位置的元素7、将任意位置的元素设为value8、删除第一次出现的关键字9、获取顺序表长度10、清空顺序表总结 前言 在了解顺序表之前我们要先了解…

Kubernetes集群安装高可用postgresql

Kubernetes集群安装高可用postgresql Bitnami 提供的 postgresql-ha 解决方案是一个预配置的、高可用的 PostgreSQL 集群配置,通常部署在 Kubernetes 环境中。它使用了一些关键技术和组件来实现数据库的高可用性。,Bitnami postgresql-ha 主要采用以下构…

JVM 虚拟机(二)类的生命周期

类的声明周期描述了一个类加载、使用和卸载的整个过程。 一个类的声明周期包括五个阶段:加载、连接、初始化、使用、卸载,其中连接部分分为验证、准备和解析阶段。 加载阶段 加载阶段是第一步是类加载器根据类的全限定名通过不同的渠道以二进制流的方式…

区块链媒体:Web3.0时代的推广创新10爆款策略概览-华媒舍

随着Web3.0时代的到来,互联网推广正经历着一场创新的革命。在这个新的时代背景下,一系列全新的推广策略正在兴起,引领着市场的变革。本文将基于这一背景,为大家介绍Web3.0时代中的10大爆款推广策略概览。 1. 个性化推广 在Web3.0…

【MATLAB】SSA+FFT+HHT组合算法

有意向获取代码,请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 SSAFFTHHT组合算法是一种基于奇异谱分析(SSA)、快速傅里叶变换(FFT)和希尔伯特-黄变换(HHT)的组合算法。 其中&am…

谈谈SQL的优化经验

目录 前言 表设计优化 索引优化 读写分离,主从复制优化 ​编辑sql语句优化 前言 SQL调优在项目中是比较常见的,SQL调优不仅仅包括SQL语句的编写,其中还应包括了数据库的表设计,数据库的配置架构(主从复制&#xf…

pure::variants—产品平台化及变体管理工具

产品概述 pure::variants是德国pure-systems公司的产品,其目的是帮助企业实现对产品线的变体管理,提高企业项目资产的复用效率。pure::variants的核心理念是运用产品线管理方法对项目资产(项目计划、需求、模型、功能模块、代码、测试用例&am…

如何将 MySQL 数据库转换为 SQL Server

本文解释了为什么组织希望将其 MySQL 数据库转换为 Microsoft SQL 数据库。本文接着详细介绍了尝试转换之前需要记住的事项以及所涉及的方法。专业的数据库转换器工具将帮助您快速将 MySQL 数据库记录转换为 MS SQL Server。 在继续之前,我们先讨论一下 MySQL 到 M…

Stable Diffusion WebUI常用Tag收集

捆绑(nsfw)*可以直接加人物lora Masterpiece, high quality, beautiful wallpaper, 16k, animation, illustration, positive perspective, perfect body, complete body, detailed face, delicate features, (solo:1.2), ((1girl)), thin, sexy, (medium to large breasts :1…

Linux(centos)学习笔记(初学)

[rootlocalhost~]#:[用户名主机名 当前所在目录]#超级管理员标识 $普通用户的标识 Ctrlshift放大终端字体 Ctrl缩小终端字体 Tab可以补全命令 Ctrlshiftc/V复制粘贴 / :根目录,Linux系统起点 ls: #list列出目录的内容,通常用户查看…

HTML试题——附答案

HTML试题题目 1. HTML是什么意思&#xff1f;它是什么类型的语言&#xff1f; 2. 请解释HTML标签和元素之间的区别。 3. 以下HTML标记用于什么目的&#xff1f; <!DOCTYPE html> <html> <head><title>我的网页</title> </head> <bo…

什么是 performance_schema ?

MySQL的performance_schema是运行在较低级别的用于监控MySQL Server运行过程中的资源消耗、资源等待等情况的一个功能特性&#xff0c;它具有以下特点。 performance_schema提供了一种在数据库运行时实时检查Server内部执行情况的方法。performance_schema数据库中的表使用per…