鸿蒙实现自定义Tabbar样式,显示数字红点提示

2024-06-18 20:44

本文主要是介绍鸿蒙实现自定义Tabbar样式,显示数字红点提示,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言:

DevEco Studio版本:4.0.0.600

Tabs的链接参考:OpenHarmony Tabs

TabContent的链接参考:OpenHarmony TabContent

通过查看链接参考我们知道可以通过TabContent的tabBar来实现自定义TabBar样式(CustomBuilder)

实现效果:

具体实现逻辑:

1、自定义样式

@Builder
tabBuilder(index: number, name: string) {RelativeContainer() {Text(name).id("textTab").fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor).fontSize(16).fontWeight(this.currentIndex === index ? 8 : 4).margin({ top: 17, bottom: 7 }).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center }, //竖直居中middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中})Text("5").id("textDot").textAlign(TextAlign.Center).backgroundColor(Color.Red).borderRadius(10).fontSize(12).fontColor(Color.White).width(20).height(20).alignRules({left: { anchor: 'textTab', align: HorizontalAlign.End },center: { anchor: 'textTab', align: VerticalAlign.Center }})Divider().id("dividerTab").strokeWidth(this.strokeWidth).color('#007DFF').opacity(this.currentIndex === index ? 1 : 0).alignRules({bottom: { anchor: '__container__', align: VerticalAlign.Bottom }, //竖直居中middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中})}.width('100%')
}

2、完整代码:

@Entry
@Component
struct Index {@State fontColor: string = '#111111'@State selectedFontColor: string = '#007DFF'@State currentIndex: number = 0private controller: TabsController = new TabsController()@State strokeWidth: number = 3 //下划线的宽度@Builder
tabBuilder(index: number, name: string) {RelativeContainer() {Text(name).id("textTab").fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor).fontSize(16).fontWeight(this.currentIndex === index ? 8 : 4).margin({ top: 17, bottom: 7 }).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center }, //竖直居中middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中})Text("5").id("textDot").textAlign(TextAlign.Center).backgroundColor(Color.Red).borderRadius(10).fontSize(12).fontColor(Color.White).width(20).height(20).alignRules({left: { anchor: 'textTab', align: HorizontalAlign.End },center: { anchor: 'textTab', align: VerticalAlign.Center }})Divider().id("dividerTab").strokeWidth(this.strokeWidth).color('#007DFF').opacity(this.currentIndex === index ? 1 : 0).alignRules({bottom: { anchor: '__container__', align: VerticalAlign.Bottom }, //竖直居中middle: { anchor: '__container__', align: HorizontalAlign.Center }//水平居中})}.width('100%')
}build() {Column() {Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {TabContent() {Column().width('100%').height('100%').backgroundColor('#00CB87')}.tabBar(this.tabBuilder(0, 'green'))TabContent() {Column().width('100%').height('100%').backgroundColor('#007DFF')}.tabBar(this.tabBuilder(1, 'blue'))TabContent() {Column().width('100%').height('100%').backgroundColor('#FFBF00')}.tabBar(this.tabBuilder(2, 'yellow'))TabContent() {Column().width('100%').height('100%').backgroundColor('#E67C92')}.tabBar(this.tabBuilder(3, 'pink'))}.vertical(false).barMode(BarMode.Fixed).barHeight(56).animationDuration(400).onChange((index: number) => {this.currentIndex = index}).width('100%').height('100%').backgroundColor('#F1F3F5')}.width('100%')}
}

总结:

上面的逻辑介绍是提供一种思路,根据这个思路我们可以自定义很多的TabBar的样式,来满足我们的业务需求,比如可以修改间距、颜色、大小、宽度、添加红点等。

这篇关于鸿蒙实现自定义Tabbar样式,显示数字红点提示的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1073026

相关文章

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

Java进行日期解析与格式化的实现代码

《Java进行日期解析与格式化的实现代码》使用Java搭配ApacheCommonsLang3和Natty库,可以实现灵活高效的日期解析与格式化,本文将通过相关示例为大家讲讲具体的实践操作,需要的可以... 目录一、背景二、依赖介绍1. Apache Commons Lang32. Natty三、核心实现代

SpringBoot实现接口数据加解密的三种实战方案

《SpringBoot实现接口数据加解密的三种实战方案》在金融支付、用户隐私信息传输等场景中,接口数据若以明文传输,极易被中间人攻击窃取,SpringBoot提供了多种优雅的加解密实现方案,本文将从原... 目录一、为什么需要接口数据加解密?二、核心加解密算法选择1. 对称加密(AES)2. 非对称加密(R

基于Go语言实现Base62编码的三种方式以及对比分析

《基于Go语言实现Base62编码的三种方式以及对比分析》Base62编码是一种在字符编码中使用62个字符的编码方式,在计算机科学中,,Go语言是一种静态类型、编译型语言,它由Google开发并开源,... 目录一、标准库现状与解决方案1. 标准库对比表2. 解决方案完整实现代码(含边界处理)二、关键实现细

python通过curl实现访问deepseek的API

《python通过curl实现访问deepseek的API》这篇文章主要为大家详细介绍了python如何通过curl实现访问deepseek的API,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编... API申请和充值下面是deepeek的API网站https://platform.deepsee

SpringBoot实现二维码生成的详细步骤与完整代码

《SpringBoot实现二维码生成的详细步骤与完整代码》如今,二维码的应用场景非常广泛,从支付到信息分享,二维码都扮演着重要角色,SpringBoot是一个非常流行的Java基于Spring框架的微... 目录一、环境搭建二、创建 Spring Boot 项目三、引入二维码生成依赖四、编写二维码生成代码五

MyBatisX逆向工程的实现示例

《MyBatisX逆向工程的实现示例》本文主要介绍了MyBatisX逆向工程的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录逆向工程准备好数据库、表安装MyBATisX插件项目连接数据库引入依赖pom.XML生成实体类、

C#实现查找并删除PDF中的空白页面

《C#实现查找并删除PDF中的空白页面》PDF文件中的空白页并不少见,因为它们有可能是作者有意留下的,也有可能是在处理文档时不小心添加的,下面我们来看看如何使用Spire.PDFfor.NET通过C#... 目录安装 Spire.PDF for .NETC# 查找并删除 PDF 文档中的空白页C# 添加与删

Java实现MinIO文件上传的加解密操作

《Java实现MinIO文件上传的加解密操作》在云存储场景中,数据安全是核心需求之一,MinIO作为高性能对象存储服务,支持通过客户端加密(CSE)在数据上传前完成加密,下面我们来看看如何通过Java... 目录一、背景与需求二、技术选型与原理1. 加密方案对比2. 核心算法选择三、完整代码实现1. 加密上