HarmonyOS NEXT - Navigation组件封装BaseNavigation
demo 地址: https://github.com/iotjin/JhHarmonyDemo
代码不定时更新,请前往github查看最新代码
在demo中这些组件和工具类都通过module实现了,具体可以参考HarmonyOS NEXT - 通过 module 模块化引用公共组件和utils
官方介绍
组件导航 (Navigation)(推荐)
Navigation是路由容器组件,一般作为首页的根容器,包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。Navigation组件适用于模块内和跨模块的路由切换,一次开发,多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验,并提供多种标题栏样式来呈现更好的标题和内容联动效果。在不同尺寸的设备上,Navigation组件能够自适应显示大小,自动切换分栏展示效果。
Navigation组件主要包含导航页(NavBar)和子页(NavDestination)。导航页由标题栏(Titlebar,包含菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成,其中导航页可以通过hideNavBar属性进行隐藏,导航页不存在页面栈中,导航页和子页,以及子页之间可以通过路由操作进行切换。
在API Version 9上,需要配合NavRouter组件实现页面路由,从API Version 10开始,推荐使用NavPathStack实现页面路由。
这里里封装的只是组件,路由跳转通过 Router切换Navigation 或者 @ohos.route 跳转
demo中都是通过@ohos.router实现的跳转,因为Router需要Navigation 包着页面的内容,多一层嵌套
页面路由 (@ohos.router)(不推荐)
Router切换Navigation
Navigation官方效果图
BaseNavigation效果图
Navigation使用
@Entry
@Component
struct TestNav {// menus(value: Array<NavigationMenuItem> | CustomBuilder): NavigationAttributeaboutToAppear() {console.log('CustomComponent: aboutToAppear called. Component is about to appear.')// 在这里执行初始化数据的操作}build() {Column() {this.NavigationTest()}}TooTmp: NavigationMenuItem = {'value': "1",'action': () => {},'icon': "resources/rawfile/tab/nav_tab_1.png",}TooBar: ToolbarItem[] = [this.TooTmp, this.TooTmp, this.TooTmp]@BuilderNavigationTest() {Navigation() {RelativeContainer() {Text('Content').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})}.height('100%').width('100%')}.titleMode(NavigationTitleMode.Mini).title("标题栏") // 设置title,此时不支持修改文字大小,颜色等样式.hideBackButton(false).menus([this.TooTmp, this.TooTmp, this.TooTmp]).toolbarConfiguration(this.TooBar)// .size({ width: '100%', height: '100%' })// .backgroundColor(Color.Orange)// .toolbarConfiguration(this.TooBar)}
}
BaseNavigation使用
demo里的弹框在这里 HarmonyOS NEXT - Toast和Loading使用
- 左侧返回,右侧文字
BaseNavigation({title: '标题标题标题标题标题标题标题标题标题标题',rightText: '设置',rightItemCallBack: () => {console.log("点击了设置")JhProgressHUD.showText("点击了设置")}})
- 左侧返回(拦截点击事件),右侧图片
BaseNavigation({title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',titleTextAlign: TextAlign.Start,// rightImgPath: 'resources/rawfile/images/ic_more_white.png',rightImgPath: $rawfile("images/ic_nav_add.png"),rightItemCallBack: () => {JhProgressHUD.showText("点击了右侧图标")},leftItemCallBack: () => {JhProgressHUD.showText("点击左侧")}})
- 左侧自定义右侧文字
BaseNavigation({title: '标题',titleTextAlign: TextAlign.Start,leftItem: {text: '设置1',icon: $rawfile("images/ic_nav_add.png"),itemCallBack: () => {JhProgressHUD.showText("点击了左侧")}},rightText: '发布',rightItemCallBack: () => {console.log("点击了设置")JhProgressHUD.showText("点击了发布")}})
- 渐变导航条
BaseNavigation({isGradient: true,title: '标题',// rightImgPath: 'resources/rawfile/images/ic_more_white.png',rightImgPath: $rawfile("images/ic_nav_add.png"),rightItemCallBack: () => {JhProgressHUD.showText("点击了右侧图标")}})
- 右侧自定义1
BaseNavigation({title: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',titleTextAlign: TextAlign.Start,rightItems: [{text: '设置1',itemCallBack: () => {JhProgressHUD.showText("点击了设置1")}},{text: '设置2',itemCallBack: () => {JhProgressHUD.showText("点击了设置2")}}]})
- 内部包裹child内容
BaseNavigation({title: '自定义child',child: () => {this.childBuilder()}})@BuilderchildBuilder() {Scroll() {Column() {Text('111111111').width('100%').height(600).backgroundColor(Color.Orange)Text('222222222').width('100%').height(500).backgroundColor(Color.Yellow)}}}
JhProgressHud.ets 完整代码
/// BaseNavigation.ets
///
/// Created by iotjin on 2024/08/01.
/// description: 导航条import { router } from '@kit.ArkUI';
import { KColors } from '../configs/Colors';type imageType = string | Resource | PixelMapinterface ItemType {icon?: imageType // icon优先级高于texttext?: stringitemCallBack?: () => void
}const _titleFontSize = 18.0
const _textFontSize = 16.0
const _itemSpace = 15.0 // 右侧item内间距
const _imgWH = 22.0 // 右侧图片宽高
const _rate = 16 // 左右item占比const _bgColor: ResourceColor = KColors.kThemeColor
const _bgDarkColor: ResourceColor = KColors.kNavBgDarkColor
const _titleColor: ResourceColor = KColors.kNavTitleColorconst _appbarStartColor = KColors.kGradientStartColor // 默认appBar 渐变开始色
const _appbarEndColor = KColors.kGradientEndColor // 默认appBar 渐变结束色@Preview
@Component
export struct BaseNavigation {@Prop public title: string = '' // 标题文字private isCenterTitle: boolean = true@Prop public titleFontSize: number = _titleFontSize@Prop public titleTextAlign: TextAlign = this.isCenterTitle ? TextAlign.Center : TextAlign.Start@Prop public bgColor: ResourceColor = _bgColor@Prop public leftItem?: ItemType | null = null // 左侧Widget,为空显示返回按钮public leftItemCallBack?: () => void@Prop public rightText: string = '' // 右侧按钮文字@Prop public rightImgPath: imageType = '' // 右侧按钮图片路径,优先级高于text ,eg: $rawfile("images/ic_nav_add.png") | 'resources/rawfile/images/ic_nav_add.png'public rightItemCallBack?: () => void@Prop public rightItems: [] | [ItemType] | [ItemType, ItemType] = [] // 优先级高于rightText和rightImgPath@Prop public isGradient: boolean = false // 是否渐变背景色@Prop public navHeight: number = 56 // 传入child为100%,否则为navHeight@BuilderParam child?: () => void // 子组件//private backImage: imageType = $rawfile("common/ic_nav_back_white.png")private titleAndIconColor: ResourceColor = _titleColoraboutToAppear() {// 如果背景透明或者是白色,设置字体和图标、状态栏字体为黑色let isTransparent = this.bgColor == Color.Transparent || this.bgColor == Color.White || this.bgColor == KColors.kNavWhiteBgColorif (isTransparent) {this.titleAndIconColor = Color.Blackthis.backImage = $rawfile("common/ic_nav_back_black.png")}}build() {Navigation() {if (this.child) {this.child()}}.titleMode(NavigationTitleMode.Mini).title(this.NavigationTitle()).hideBackButton(true).height(this.child ? '100%' : this.navHeight)}@BuilderNavigationTitle() {Row() {this.navBuilder()}.width('100%').height('100%').backgroundColor(this.bgColor).linearGradient(this.isGradient ? {direction: GradientDirection.Right, // 从左向右colors: [[_appbarStartColor, 0.0], [_appbarEndColor, 1.0]]} : null)}@BuildernavBuilder() {Row() {if (this.leftItem) {Row() {this.itemBuilder({ icon: this.leftItem.icon, text: this.leftItem.text })}.onClick(this.leftItem.itemCallBack)} else {this.backBuilder()}}.layoutWeight(_rate).width('100%')Row() {this.titleBuilder()}.layoutWeight(this.rightItems.length ? (100 - _rate - this.rightItems.length * _rate) : (100 - _rate * 2)).width('100%')if (this.rightItems.length) {Row() {ForEach(this.rightItems, (item: ItemType) => {Row() {this.itemBuilder({ icon: item.icon, text: item.text })}.onClick(item.itemCallBack).layoutWeight(1).width('100%')})}.margin({ left: this.rightItems.length == 2 ? 15 : 0, right: this.rightItems.length == 2 ? 5 : 0 }).layoutWeight(_rate * this.rightItems.length).width('100%')} else {Row() {this.itemBuilder({ icon: this.rightImgPath, text: this.rightText })}.onClick(this.rightItemCallBack).layoutWeight(_rate).width('100%')}}@BuilderbackBuilder() {Row() {Image(this.backImage).width(18).height(18).margin({ left: 15 })}.size({ width: '100%', height: '100%' }).onClick(() => {if (this.leftItemCallBack) {this.leftItemCallBack()} else {this.goBack()}})}@BuildertitleBuilder() {Row() {Text(this.title).padding({left: 10,top: 5,right: 10,bottom: 5}).fontSize(this.titleFontSize).fontColor(this.titleAndIconColor).textAlign(this.titleTextAlign).maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis })// 文本超长显示省略号.wordBreak(WordBreak.BREAK_WORD)}.justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center).size({ width: '100%', height: '100%' })}@BuilderitemBuilder(item: ItemType) {Row() {if (item.icon) {Image(item.icon).width(_imgWH).height(_imgWH).margin({ left: _itemSpace, right: _itemSpace })} else if (item.text) {Text(item.text).fontSize(_textFontSize).fontColor(this.titleAndIconColor)}}.size({ width: '100%', height: '100%' }).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)}goBack() {router.back()}
}
里面用到的颜色
export class KColors {// 主题色(导航条背景、提交按钮背景、弹框确认文字、表单图标录入光标)// 暗黑模式高亮显示颜色按kThemeColor设置,如tabBar选中文字图标、提交按钮背景色、指示器选中下划线、光标等static readonly kThemeColor: ResourceColor = '#3BB815'static readonly kThemeDarkColor: ResourceColor = '#0A0A0A' // (10, 10, 10)static readonly kThemeBlueColor: ResourceColor = '#4688FA'static readonly kThemePurpleColor: ResourceColor = '#9C27B0'// 渐变色(appBar和按钮)static readonly kGradientStartColor: ResourceColor = '#2683BE' // 渐变开始色static readonly kGradientEndColor: ResourceColor = '#34CABE' // 渐变结束色static readonly kNavTitleColor: Color = Color.White
}
相关文章:

HarmonyOS NEXT - Navigation组件封装BaseNavigation
demo 地址: https://github.com/iotjin/JhHarmonyDemo 代码不定时更新,请前往github查看最新代码 在demo中这些组件和工具类都通过module实现了,具体可以参考HarmonyOS NEXT - 通过 module 模块化引用公共组件和utils 官方介绍 组件导航 (Navigation)(推…...

浅看MySQL数据库
有这么一句话:“一个不会数据库的程序员不是合格的程序员”。有点夸张,但是确是如此。透彻学习数据库是要学习好多知识,需要学的东西也是偏难的。我们今天来看数据库MySQL的一些简单基础东西,跟着小编一起来看一下吧。 什么是数据…...
Pytorch常用训练套路框架(CPU)
文章目录 1. 数据准备示例:加载 CIFAR-10 数据集 2. 模型定义示例:定义一个简单的卷积神经网络 3. 损失函数和优化器示例:定义损失函数和优化器 4. 训练循环示例:训练循环 5. 评估和测试示例:评估模型 6. 保存和加载模…...

C++ | Leetcode C++题解之第338题比特位计数
题目: 题解: class Solution { public:vector<int> countBits(int n) {vector<int> bits(n 1);for (int i 1; i < n; i) {bits[i] bits[i & (i - 1)] 1;}return bits;} };...

智慧校园云平台电子班牌系统源码,智慧教育一体化云解决方案
智慧校园云平台电子班牌系统,利用先进的云计算技术,将教育信息化资源和教学管理系统进行有效整合,实现生态基础数据共享、应用生态统一管理,为智慧教育建设的统一性,稳定性,可扩展性,互通性提供…...
数据库系统 第17节 数据仓库 案例赏析
下面我将通过几个具体的案例来说明数据仓库如何在不同的行业中发挥作用,并解决实际业务问题。 案例 1: 零售业 背景: 一家大型零售商希望改进其库存管理和市场营销策略,以提高销售额和顾客满意度。 解决方案: 数据仓库: 构建一个数据仓库࿰…...
硬件面试经典 100 题(71~90 题)
71、请问下图电路的作用是什么? 该电路实现 IIC 信号的电平转换(3.3V 和 5V 电平转换),并且是双向通信的。 上下两路是一样的,只分析 SDA 一路: 1) 从左到右通信(SDA2 为输入状态&…...
【git】代理相关
问题: 开启了翻墙代理工具,拉取代码时报错:fatal: 无法访问 xxxx : Failed to connect to github.com port 443: 连接超时 解决: 0,取消代理仍然无法拉取 1,查看控制面板-网络与Internet-代理ÿ…...
golang gin框架中创建自定义中间件的2种方式总结 - func(*gin.Context)方式和闭包函数方式定义gin中间件
在gin框架中,我们可以通过2种方式创建自定义中间件: 1. 直接定义一个类型为 func(*gin.Context)的函数或者方法 这种方式是我们常用的方式,也就是定义一个参数为*gin.Context的函数或者方法。定义的方法就是创建一个 参数类型为 gin.Handler…...
Linux高级编程 8.13 文件IO
一、文件IO 操作系统为了方便用户使用系统功能而对外提供的一组系统函数。称之为 系统调用(unistd.h) 其中有个 文件IO,一般都是对设备文件操作,当然也可以对普通文件进行操作。 这是一个基于Linux内核的没有缓存的IO机制 文件IO特性&…...
【k8s】ubuntu18.04 containerd 手动从1.7.15 换为1.7.20
ubutnu18.04之前手动安装了1.7.15现在下载1.7.20containerd-1.7.20-linux-amd64.tar.gz root@k8s-worker-i58265u:/home/zhangbin# root@k8s-worker-i58265u:/home/zhangbin# https://github.com/containerd/containerd/releases/download/v1.7.20/containerd-1.7.20-linux-am…...
常用浮动方式
目录 一、标准流 二、float浮动 三、 flex浮动 3.1flex组成 3.2 主轴对齐方式 3.3侧轴对齐方式 3.4修改主轴方向 3.5弹性盒子换行 3.6行对齐方式 一、标准流 标签在网页中的默认排布规则 例如: 块元素独占一行、行内元素可以一行显示多个 二、float浮动 让块…...
设计模式反模式:UML常见误用案例分析
文章目录 设计模式反模式:UML常见误用案例分析1. 反模式概述2. 反模式的 UML 图示误用2.1 God Object 反模式2.2 Spaghetti Code 反模式2.3 Golden Hammer 反模式2.4 Poltergeist 反模式 3. 总结 设计模式反模式:UML常见误用案例分析 在软件工程领域&am…...

Python编码系列—Python SQL与NoSQL数据库交互:深入探索与实战应用
🌟🌟 欢迎来到我的技术小筑,一个专为技术探索者打造的交流空间。在这里,我们不仅分享代码的智慧,还探讨技术的深度与广度。无论您是资深开发者还是技术新手,这里都有一片属于您的天空。让我们在知识的海洋中…...
贪心算法---跳跃游戏
题目: 给你一个非负整数数组 nums ,你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标,如果可以,返回 true ;否则,返回 false 。 思路…...

利用EditPlus进行Json数据格式化
利用EditPlus进行Json数据格式化 git下载地址:https://github.com/michael-deve/CommonData-EditPlusTools.git (安装过editplus的直接将里面的json.js文件复制走就行) 命令:Cscript.exe /nologo “D:\Program Files (x86)\EditPlus 3\json.js” D:\P…...

xss.function靶场(easy)
文章目录 第一关Ma Spaghet!第二关Jefff第三关Ugandan Knuckles第四关Ricardo Milos第五关Ah Thats Hawt第六关Ligma第七关Mafia第八关Ok, Boomer 网址:https://xss.pwnfunction.com/ 第一关Ma Spaghet! 源码 <!-- Challenge --> <h2 id"spaghet&qu…...

【LLM入门】Let‘s reproduce GPT-2 (124M)【完结,重新回顾一下,伟大!】
文章目录 03:43:05 SECTION 4: results in the morning! GPT-2, GPT-3 repro03:56:21 shoutout to llm.c, equivalent but faster code in raw C/CUDA【太牛了ba】03:59:39 summary, phew, build-nanogpt github repo 03:43:05 SECTION 4: results in the morning! GPT-2, GPT-…...
c语言----取反用什么符号
目录 前言 一、逻辑取反 二、按位取反 三、应用场景 前言 在C编程语言中,取反使用符号!表示逻辑取反,而使用~表示按位取反。 其中,逻辑取反!是将表达式的真值(非0值)转换为假(0),…...

【html+css 绚丽Loading】 - 000003 乾坤阴阳轮
前言:哈喽,大家好,今天给大家分享htmlcss 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...

ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...

python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...

Golang——7、包与接口详解
包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题, 因为搜索范围是有界的,上界最大木板长度补充的全部木料长度,下界最小木板长度; 即left0,right10^6; 我们可以设置一个候选值x(mid),将木板的长度全部都补充到x,如果成功…...
书籍“之“字形打印矩阵(8)0609
题目 给定一个矩阵matrix,按照"之"字形的方式打印这个矩阵,例如: 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为:1,…...
前端工具库lodash与lodash-es区别详解
lodash 和 lodash-es 是同一工具库的两个不同版本,核心功能完全一致,主要区别在于模块化格式和优化方式,适合不同的开发环境。以下是详细对比: 1. 模块化格式 lodash 使用 CommonJS 模块格式(require/module.exports&a…...