鸿蒙开发实战:灵活定制Tabs组件,实现个性化页签布局

 闪客 沉默的闪客 2024-06-16 20:01 陕西

图片

大家好,又一个项目已经基本完成 是一个元服务英语单词卡片项目,后面一步一步的进行分析拆解,今天来实现一个Tabs组件自定义界面开发。

鸿蒙ArkUI 开发的时候,Tabs 组件很常用,例如可以用来做底部菜单或者页签切换,但是如果做页签切换使用,在页签比较少的情况下不能实现居左对齐或者自定义其他对齐方式这样的布局效果,目前的 api 也没有支持,我们可以自定义实现。

图片

这时候就可以借助堆叠组件覆盖默认 title 的方式实现。

实现步骤
 

1,外层使用Stack组件包裹 Tabs 组件和自定义对齐方式的 title 结构

Stack({ alignContent: Alignment.Top }) {// tab 分类Tabs({ index: this.activeType, controller: this.controller }) {  ForEach(this.msgTypes, (item: MsgItem, i: number) => {   TabContent() {   // 消息类型: 0 老人报警| 1 任务提醒   MsgStatusComp({ type: i })   }  })}.barPosition(BarPosition.Start).barBackgroundColor(ResManager.EC_MID_WHITE).onChange((index: number) => {this.activeType = index})// 消息分类bar title自定义Row({ space: 5 }) {ForEach(this.msgTypes, (item: MsgItem, i: number) => {Badge({  count: i === 0 ? this.messageCount?.elderAlertMsgCount! : this.messageCount?.nursingTaskMsgCount!,  position: BadgePosition.RightTop,  style: { badgeColor: '#FF6363', borderColor: '#fff', borderWidth: 2 }}) {Button({ stateEffect: true }) {Row() {   Image(this.activeType === i ? item.selectIcon : item.defaultIcon)   .width(20)   .aspectRatio(1)   Text(item.type)   .fontSize(ResManager.EC_NORMAL_FS)   .fontColor(this.activeType === i ? '#fff' : ResManager.EC_MID_19)}.padding({left: 15,right: 15,top: 8,bottom: 8})// .alignItems(VerticalAlign.Bottom)}.backgroundColor(this.activeType === i ? ResManager.EC_MAIN_COLOR : '#fff').animation({ duration: 200 }).onClick(() => {   this.controller.changeIndex(i)})}})}.width('100%').padding({left: 15,right: 15,top: 10,bottom: 10})// .height(48).alignItems(VerticalAlign.Center).backgroundColor('#fff')}.width('100%').height('100%').backgroundColor(ResManager.EC_MID_BG)


2,定义 controller点击切换 tabs 关键代码示例:​​​​​​​

private controller: TabsController = new TabsController()Tabs({ index: this.activeType, controller: this.controller }).onClick(() => {   this.controller.changeIndex(i)})

写在最后欢迎大家关注公众号

鸿蒙开发还是比较容易上手的,大家如果对鸿蒙开发感兴趣,闪客以后可以分享更多相关教程实战案例,欢迎关注!

纯血鸿蒙越来越火,鸿蒙开发者越来越多,招聘需求也越来越多,创建了一个鸿蒙应用开发 知识星球社群:
 

加入鸿蒙大军--->>:如何快速学习纯血鸿蒙开发
 

加入鸿蒙群获取资料

图片

关注一下,扫描添加好友邀你进群,加我时注明【鸿蒙

 


简单说下这个星球能给大家提供什么:
 

1、不断分享如何开发鸿蒙应用,实战项目,上架应用。

2、分享鸿蒙开发的入门开发方法、项目经验。

3、探讨未来关于鸿蒙的机遇和发展方向,共同成长。

4、帮助大家解决鸿蒙开发中遇到的问题。

星球福利:

1、加入星球,就送入门到实战的已有课程。

2、邀请你加入会员交流群。

3、支持零基础一对一辅导。

图片

图片

图片

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

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

相关文章

CDA二级(Level II)数据分析师——考试内容梳理三(简单重点案例)

PR曲线是基于召回率的准确性来进行判断的; 混淆矩阵: ROC曲线以真阳性率(敏感性、召回率)为纵坐标,假阳性率(1-特异性)为横坐标 假阳性率:负样本中被误认为正样本的概率 FP/FPTN 真…

什么是作用域?作用域有哪几种?

**作用域(Scope)**是一个程序设计中的重要概念,它指的是变量、函数和对象在程序中可访问和引用的区域。作用域决定了代码块中声明的变量、函数和对象的可见性和生命周期。不同的编程语言提供了不同的作用域类型,以下是几种常见的作…

基于B/S版java语言+SpringBoot技术开发的云HIS系统源码 HIS系统住院业务模块常见问题及解决方案

基于B/S版java语言SpringBoot技术开发的云HIS系统源码 HIS系统住院业务模块常见问题及解决方案 随着医疗技术的不断提高,住院治疗已成为许多病人的常规选择。但是,住院治疗不仅需要医护人员的精心照顾,也需要个高效的信息系统来保证整个治疗过…

C语言程序设计-8 函 数

8.1 概述 在前面已经介绍过,C源程序是由函数组成的。虽然在前面各章的程序中大都只有一个 主函数 main(),但实用程序往往由多个函数组成。函数是C源程序的基本模块,通过对函 数模块的调用实现特定的功能。&#xff23…

HBase学习之HBaseAPI

HBase学习之HBaseAPI: package com.shujia.base;import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.*; import org.apache.hadoop.hbase.client.*; import org.apache.hadoop.hbase.util.Bytes; import org.junit.After; import org.junit.Before…

Unity制作透明材质直接方法——6.15山大软院项目实训

之前没有在unity里面接触过材质的问题,一般都是在maya或这是其他建模软件里面直接得到编辑好材质的模型,然后将他导入Unity里面,然后现在碰到了需要自己在Unity制作透明材质的情况,所以先搜索了一下有没有现成的方法,很…

删除名为 `XXXX` 的 conda 环境的命令

要删除名为 musetalk 的 conda 环境,您可以使用以下命令: conda remove --name musetalk --all这个命令会删除 musetalk 环境及其中安装的所有包。 执行上述命令后,您可以使用 conda env list 命令验证该环境是否已被成功删除。 如果您想要保留该环境中安装的某些包,可以先使…

C++迈向精通:当我尝试修改虚函数表

尝试修改虚函数表 本期纯整活儿好吧!!!! 初衷 有一天我突然开始好奇虚函数表是否真的存在,于是我开始想是否能够从C中查看或者调用虚函数表中的内容。,于是有了下面的操作。 操作过程 起初我并没有思路…

使用net.sf.mpxj读取project的.mpp文件

1、导入.mpp文件 public void importMppFile(String updateType, MultipartFile multipartFile) {try (InputStream inputStream multipartFile.getInputStream()) {// 读取文件的组件MPPReader mppReader new MPPReader();// 注意,如果在这一步出现了读取异常&a…

神经网络模型---AlexNet

一、AlexNet 1.导入tensorflow库,这里给简称为tf库 import tensorflow as tf from tensorflow.keras import datasets, layers, modelsdatasets:是用于训练和测试机器学习模型的数据集合 layers:是构建神经网络模型的关键组成部分 models&a…

Golang并发控制的三种方案

Channel Channel是Go在语言层面提供的一种协程间的通信方式&#xff0c;我们可以通过在协程中向管道写入数据和在待等待的协程中读取对应协程的次数来实现并发控制。 func main() {intChan : make(chan int, 5)waitCount : 5for i : 0; i < waitCount; i {go func() {intC…

上海SNEC光伏展参展总结--安科瑞

安科瑞戴婷 Acrel-Fanny 今年的snec上海光伏展吸引了来自全球各地的光伏行业专业人士及爱好者&#xff0c;本次展会共有来自30多个国家和地区的超过2000家企业参展&#xff0c;展出的光伏产品涵盖了太阳能电池、太阳能组件、逆变器、太阳能辅助设备等众多领域。 随着近年来光…

Oracle中常用特殊字符chr值

在Oracle数据库中&#xff0c;特殊字符的chr值&#xff08;即字符与ASCII码之间的对应关系&#xff09;对于数据的处理和查询非常重要。以下是一些常见的特殊字符及其对应的chr值&#xff1a; 换行符&#xff08;LF&#xff09;&#xff1a; chr值&#xff1a;10 示例&#…

《收获,不止oracle》读书笔记一:oracle体系结构

从图中可以看出,oracle数据库是由实例和一组数据库文件组成。实例是由oracle开辟的内存区和一组后台进程组成的。

2024.6.18

Python的网络编程 网络四层 在开始前,我们需要先了解一下我们在网络通信过程中的四个层次 我们上网产生的数据都是经过协议栈一层一层的封装然后经网卡发送到网络&#xff0c;经网络发送到服务端&#xff0c;然后服务端又是一层一层的解封装拿到自己想要的数据。 我们学习的…

YOLOv8目标检测算法在地平线Bernoulli2架构BPU上高效部署参考(PTQ方案)30fps!

—— 以RDK X3为例&#xff0c;修改Head部分&#xff0c;8ms疾速Python后处理程序&#xff0c;30fps稳稳当当 本文在地平线对YOLOv8s的Backbone修改的基础上&#xff0c;提出一种在地平线Bernoulli2架构BPU上部署YOLOv8的后处理思路。使用640640分辨率&#xff0c;80类别基于C…

香橙派AIPro开机测试

资料准备&#xff1a; 香橙派官网资料下载链接&#xff1a;http://www.orangepi.cn/html/hardWare/computerAndMicrocontrollers/service-and-support/Orange-Pi-AIpro.html 硬件准备 香橙派ai pro一个 32G sd卡&#xff0c;带出厂镜像 电源 鼠标 键盘 hdmi显示屏 测试介绍 由…

4418 android4.4 + 6818 android5.1 移植gps

网上已经有的移植的资料 目前 3399 的板子上 对已有的可运行的GPS 进行测试。 我这里的 rk3399 的板卡 , Android7 Android8 都是 可以运行 GPS 应用程序的。 使用的是 ttyS4 的节点。 问题: 我发现, 开机就删掉 ttyS4 节点,也是可以 打开应用的。并且可以正常运行。不…

【机器学习】使用Perceiver模型解决Transformer效率低下问题

1.引言 1.1.技术背景 Transformer在高维度输入上计算效率低下&#xff0c;制约了Transformer框架的应用和迭代&#xff1a; 内存消耗大&#xff1a; 当处理高维度输入&#xff0c;如长文本或高分辨率图像时&#xff0c;Transformer需要将模型参数和中间状态都保存到内存中。这…

MQTT协议与tcp/ip协议的区别

MQTT协议与TCP/IP协议在多个方面存在显著的区别。以下是对这些区别的清晰归纳和解释&#xff1a; 1.协议层次与定位&#xff1a; ① TCP/IP&#xff1a;是一个协议族&#xff0c;是互联网的基础协议套件&#xff0c;它定义了电子设备如何在网络上进行通信。TCP/IP协议由多个层…