在鸿蒙NEXT中实现完全自定义导航栏

news/2025/3/17 9:37:53/文章来源:https://www.cnblogs.com/youlanjihua/p/18776192

在日常app开发中,导航栏扮演着重要的角色。鸿蒙提供了系统导航栏Navigation,它支持很多属性的修改,但是应用需求更加灵活多变,比如有的导航栏有背景图片,有的导航栏要求渐变色,有的导航栏需要随时隐藏和显示等等。

遇到这些需求系统的Navigation就无法实现,这时候我们就需要自定义导航栏。今天分享一下幽蓝君自己封装的导航栏,并介绍一下它的实现过程。

 

 

作为一个导航栏,首先需要标题和返回按钮:

Row() {Row(){  Image($r('app.media.back'))      .width(20)      .height(20)      .objectFit(ImageFit.Contain)  Text(this.title)      .fontColor(Color.Black)      .fontSize(23)      .fontWeight(FontWeight.Bold)      .margin({left:5})      .maxLines(1)    }
}
.alignItems(VerticalAlign.Center)
.backgroundImageSize(ImageSize.Cover)
.width('100%').constraintSize({maxWidth:'100%'})
.linearGradient({  angle: 90,  colors: [[0x00BAAD, 0.0], [0xDCF5F3, 0.6], [0xFFCCA6, 1.0]]})
.padding({left:15,right:15,top:px2vp(this.topRectHeight)})
.width('100%')
.height(70)

 

上面的代码首先定义导航栏的高度是70,然后留出了顶部的状态栏区域,并设置了背景渐变色。这时候返回按钮和标题都分布在左侧。

除了返回按钮和标题,有时候我们在导航栏右侧也需要添加一些组件:

@BuilderParam menuBuilderParam?: () => void; //右侧内容 
Row(){  this.menuBuilderParam()
}.constraintSize({  maxWidth:'50%'})

 

导航栏的标题有时候我们需要它居中,那就在中间再添加一个标题组件,并使用一个状态判断标题是在左侧还是在中间:

//枚举标题位置
export enum YLTitleMode {  Center,  Left} Row(){  Image($r('app.media.back'))      .width(20)      .height(20)      .objectFit(ImageFit.Contain)  if(this.titleModel == YLTitleMode.Left){    Text(this.title)     .fontColor(Color.Black)      .fontSize(23)      .fontWeight(FontWeight.Bold)      .margin({left:5})      .maxLines(1)  }}if(this.titleModel == YLTitleMode.Center){Text(this.title)  .maxLines(1)  .fontSize(23)  .fontColor(Color.Black)  .fontWeight(FontWeight.Bold)  .textOverflow({ overflow: TextOverflow.Ellipsis })  .textAlign(TextAlign.Center)}

 

现在有一个问题,导航栏在左、右都有内容的情况下,怎么保持标题的居中?首先想到的是使用SpaceBetween对齐方式,但是这种对齐方式是相对于两侧内容的对齐,只有左右内容长度一致的情况下标题才能居中。

所以我想计算两侧组件的长度,并使他们保持一致:

//右边布局 
Row(){  this.menuBuilderParam()
}
.justifyContent(FlexAlign.End)
.constraintSize({maxWidth:'40%'})
.width(parseInt(this.sizeValue)>parseInt(this.sizeValue2)?this.sizeValue:this.sizeValue2)
.onSizeChange((oldValue: SizeOptions, newValue: SizeOptions)=>{  this.sizeValue = JSON.stringify(newValue.width)})

 

这样的话当左侧也有自定义的内容时,计算两侧内容的长度,使用较大的值作为他俩的长度,标题就可以绝对居中了。

可能这么介绍会让很多友友摸不着头脑,我就分享代码大家直接拿过去用就行,发一个使用示例:

YLNavigation({title:'自定义导航栏',menuBuilderParam:this.menu,customBuilder:this.mainPage,hideBackButton:true,titleModel:YLTitleMode.Left})

 

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

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

相关文章

鸿蒙开发中console.log和hilog的区别

在日常开发中打印日志是调试程序非常常用的操作,在鸿蒙的官方文档中介绍了hilog这种方式,有些前端转过来的友友发现console.log也可以进行日志打印。有一段时候幽蓝君也非常喜欢使用console.log,因为它看起来好像更加简单方便。 那么今天幽蓝君就来和大家说一说console.log和…

HarmonyOS NEXT开发实战教程--招聘app

这一周忙到起飞,只能在周末发个文章。今天的内容比较简单,是一个招聘app,适合新手友友参考,大佬们可以直接忽略。 看一下效果图:这是一个比较常见的应用,大家做这类应用建议大家先分析一下应用和页面的结构,避免写完发现错了又改。 这个应用首先有4个tabbaritem,是很常…

解决vscode XHR failed

问题:主要流程: 获取自己的COMMIT_ID(就是一串数字,每个人的不一样) 下载vscode-server-linux-x64.tar.gz文件 解压vscode-server-linux-x64.tar.gz,移动解压后的所有文件到~/.vscode-server/bin/COMMIT_ID目录获取COMMIT_ID cd ~/.vscode-server/bin && ls # 那串数字…

下载神器!支持视频号、抖音等多平台资源下载!

res-downloader —— 一款基于 Go + Wails + Vue 实现的,支持下载视频、音频、图片、m3u8、直播流等常见网络资源的软件工具。大家好,我是 Java陈序员。 今天,给大家介绍一款支持视频号、抖音等多平台资源下载的开源软件,开箱即用!关注微信公众号:【Java陈序员】,获取开…

零经验选手,Compose 一天开发一款小游戏!

什么,Compose 也能做游戏?!不会 Unity 没关系!游戏开发零经验选手手把手带你飞,一天写出一个4399小游戏!是兄弟就一起来!猛男翻卡牌 猛男启动 继上一个 Compose 练习项目 SimpleTodo 之后,又尝试用 Compose 来做了一个翻牌记忆游戏【猛男翻卡牌】。这次是零经验写游戏项…

ftp替代品,如何提升数据交换的安全性与高效性?

文件传输协议(FTP)是一个跨平台的、简单且易于实现的协议,用于在网络上的服务器和客户端之间传输文件,也是企业会经常选择的一种传输方式。 业务场景一: 基于信息相关安全要求,医院会采用防火墙、网闸等将网络隔离为内网和外网,但网络隔离后,医院仍存在将报告资料等文…

【分享】常见的几种数据摆渡系统介绍

随着企业数字化转型的逐步深入,企业投入了大量资源进行信息系统建设,信息化程度日益提升。在这一过程中,企业也越来越重视核心数据资产的保护,数据资产的安全防护成为企业面临的重大挑战。 一、网络隔离实施的背景 1、互联网的广泛应用:随着互联网的飞速发展,企业与外部的…

010 Element-Plus集成

React+AntDesign+MUI Vue3+VantUI UI组件库(框架)->封装通用组件->后台管理系统=>element(UI(vue2)/Plus(vue3))=>饿了么团队(阿里)=>Vue AntDesignUI=>蚂蚁金服=>React框架 AntDesignVue=>Vue框架一、Element Plus UI组件库 Element Plus 基于Vue3、…

『Plotly实战指南』--折线图绘制基础篇

在数据分析的世界中,折线图是一种不可或缺的可视化工具。 它能够清晰地展示数据随时间或其他变量的变化趋势,帮助我们快速发现数据中的模式、趋势和异常。 无论是金融市场分析、气象数据监测,还是业务增长趋势预测,折线图都能以直观的方式呈现关键信息。 本文将从基础开始,…

Arrays工具类教你优雅地管理数组数据

数组专用工具类指的是 java.util.Arrays 类,基本上常见的数组操作,这个类都提供了静态方法可供直接调用。毕竟数组本身想完成这些操作还是挺麻烦的,有了这层封装,就方便多了。 package java.util; /*** @author Josh Bloch* @author Neal Gafter* @author John Rose* @sinc…

ROCm技术解析概述

3.2 ROCm技术解析 ROCm是第一个用于GPU计算的开源HPC/Hyperscale级平台,也是独立于编程语言的。将UNIX的选择哲学、极简主义和模块化软件开发引入GPU计算。新的ROCm基础允许为应用程序选择甚至开发工具和语言运行时。 1)[n1] ROCm是为规模而构建的;它支持通过RDMA进行服务器…

AMD GPU上对比语言图像预训练(CLIP)模型的交互

AMD GPU上对比语言图像预训练(CLIP)模型的交互 3.1.1 介绍 对比语言图像预训练(CLIP)是一种连接视觉和自然语言的多模态深度学习模型。它是在OpenAI的论文从自然语言监督中学习可转移的视觉模型(2021)中介绍的,并在大量(4亿)图像字幕对的网络抓取数据上进行了对比训练…