# custom_navtion **Repository Path**: mrwang0515/custom_navtion ## Basic Information - **Project Name**: custom_navtion - **Description**: No description available - **Primary Language**: 其他 - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 6 - **Forks**: 1 - **Created**: 2024-06-25 - **Last Updated**: 2025-12-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 📚基本简介 `ohpm_king_custom_navtion`是一个自定义导航栏的组件 功能丰富且易用的`兼容最新API12` 执行安装命令（安装插件方法） ``` ohpm install ohpm_king_custom_navtion ``` ``` 1.如果编译报类似错误 ERROR: The compatibleSdkVersion 11 cannot be smaller than version 12 declared in library 2.请设置项目buile-profile.json5 -> compatibleSdkVersion 为 "5.0.0(12)",然后点击右上角Sync Now ``` ## 📦使用说明 ### 1.在项目中引入插件 ### 2.在需要使用自定义导航栏的页面导入新增一个组件 ``` //自定义弹窗使用说明 alertCustomView(){ let customPar : Map = new Map() customPar.set('testKey','更新自定义弹窗') PCAlertUtil.alertCustomView(wrapBuilder(CustomBuildText),{backgroundDismissEnable:true,customPar:customPar}) } @Builder export function CustomBuildText(params: AlertCustomParams) { Column() { Column(){ Row(){ Text('Image') .fontColor(Color.White) .fontSize(20) .fontWeight(FontWeight.Medium) } .justifyContent(FlexAlign.Center) .backgroundColor(Color.Blue) .width('100%') .height(100) Column(){ Text('系统升级中，预计需要30-60分钟') .width('100%') .margin({top:24}) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor('#E65157') Text('本次更新内容:') .margin({top:16}) .width('100%') .fontColor('#121212') .fontSize(14) .fontWeight(FontWeight.Medium) Text(params.custom?.get('testKey')) .margin({top:12}) .width('100%') .fontColor('#121212') .fontSize(14) .fontWeight(FontWeight.Regular) Row(){ Button('确定') .width('100%') .height(40) .backgroundColor(Color.Blue) .borderRadius(20) .onClick(()=>{ params.promptAction?.closeDialog() }) }.width('100%') .height(44) .margin({top:60}) .padding({left:20,right:20,bottom:30}) } .width('100%') .padding({left:24,right:24}) } .clip(true) .width('100%') .backgroundColor(Color.White) .borderRadius(16) } .width('100%') .padding({left:30,right:30}) .backgroundColor(Color.Transparent) } import { ApplicationTitle } from 'ohpm_king_custom_navtion' @Entry @Component struct SecondPage { @State message: string = '我是标题'; @State message1: string = '应用开发文档用于指导开发者通过HarmonyOS SDK提供的开放能力完成应用开发'; @State titleTextAlign: TextAlign = TextAlign.Center @State isEdit: boolean = false @State hiddenBottomLine: boolean = false build() { Column({space:20}){ ApplicationTitle({ tStateHeight:0, tHeight:60, hiddeBackButton:true, hiddenBottomLine:this.hiddenBottomLine, bottomLineColor: Color.Green, tBgColor:'#f5f5f5', title: this.message, titleTextAlign:this.titleTextAlign, titleOverflow:TextOverflow.Ellipsis, rightFirstButtonWidth:50, rightFirstButtonStr: this.isEdit?'保存':'编辑', rightFirstAction:()=>{ this.isEdit = !this.isEdit Prompt.showToast({message:!this.isEdit?'保存':'编辑'}) } }) ApplicationTitle({ tStateHeight:0, tHeight:60, hiddeBackButton:true, hiddenBottomLine:this.hiddenBottomLine, bottomLineColor: Color.Green, tBgColor:'#f5f5f5', title: this.message, titleTextAlign:this.titleTextAlign, titleOverflow:TextOverflow.Ellipsis, rightFirstButtonWidth:50, rightFirstButtonStr:'保存', rightSecondButtonWidth:50, rightSecondButtonStr:'编辑', rightFirstAction:()=>{ Prompt.showToast({message:'点击保存'}) }, rightSecondAction:()=>{ Prompt.showToast({message:'点击编辑'}) } }) ApplicationTitle({ tStateHeight:0, tHeight:60, hiddenBottomLine:this.hiddenBottomLine, bottomLineColor: Color.Green, tBgColor:'#f5f5f5', title: this.message, titleTextAlign:this.titleTextAlign, titleOverflow:TextOverflow.Ellipsis, rightFirstButtonWidth:50, rightFirstButtonStr:'保存', rightFirstAction:()=>{ Prompt.showToast({message:'点击保存'}) }, }) ApplicationTitle({ tStateHeight:0, tHeight:60, hiddenBottomLine:this.hiddenBottomLine, bottomLineColor: Color.Green, tBgColor:'#f5f5f5', title: this.message, titleTextAlign:this.titleTextAlign, titleOverflow:TextOverflow.Ellipsis, rightFirstButtonWidth:50, rightFirstButtonStr:'保存', rightSecondButtonWidth:50, rightSecondButtonStr:'编辑', rightFirstAction:()=>{ Prompt.showToast({message:'点击保存'}) }, rightSecondAction:()=>{ Prompt.showToast({message:'点击编辑'}) } }) ApplicationTitle({ tStateHeight:0, tHeight:60, hiddenBottomLine:this.hiddenBottomLine, bottomLineColor: Color.Green, tBgColor:'#f5f5f5', title: this.message1, titleMaxLines:2, titleTextAlign:this.titleTextAlign, titleOverflow:TextOverflow.Clip, rightFirstButtonWidth:50, rightFirstButtonImage:$r('sys.media.ohos_ic_public_ok'), rightFirstButtonPadding:13, rightFirstAction:()=>{ Prompt.showToast({message:'点击保存'}) } }) ApplicationTitle({ tStateHeight:0, tHeight:60, hiddenBottomLine:this.hiddenBottomLine, bottomLineColor: Color.Green, tBgColor:'#f5f5f5', title: this.message1, titleMaxLines:2, titleTextAlign:this.titleTextAlign, titleOverflow:TextOverflow.Ellipsis, rightFirstButtonWidth:50, rightFirstButtonImage:$r('sys.media.ohos_ic_public_ok'), rightFirstButtonPadding:13, rightSecondButtonWidth:50, rightSecondButtonImage:$r('sys.media.ohos_ic_public_ok'), rightSecondButtonPadding:13, rightFirstAction:()=>{ Prompt.showToast({message:'点击保存'}) }, rightSecondAction:()=>{ Prompt.showToast({message:'点击编辑'}) } }) Row(){ Button('标题居左') .onClick(()=>{ this.titleTextAlign = TextAlign.Start }) Button('标题居中') .onClick(()=>{ this.titleTextAlign = TextAlign.Center }) Button('标题居右') .onClick(()=>{ this.titleTextAlign = TextAlign.End }) } .width('100%') .justifyContent(FlexAlign.SpaceEvenly) Row(){ Button('显示或者隐藏横线') .onClick(()=>{ this.hiddenBottomLine = !this.hiddenBottomLine }) } .width('100%') .justifyContent(FlexAlign.SpaceEvenly) } } } ``` ## web页面使用导航栏 ``` import { ApplicationTitle } from 'ohpm_king_custom_navtion' import { webview } from '@kit.ArkWeb'; import router from '@ohos.router'; @Entry @Component struct WebPage { private webController : webview.WebviewController = new webview.WebviewController url_str: string = 'https://www.baidu.com' @State message: string = '百度一下'; build() { Column(){ ApplicationTitle({ tStateHeight:0, tHeight:60, hiddenLightBackButton:false, hiddenBottomLine:true, lightBackButtonPadding:10, title: this.message, titleTextAlign:TextAlign.Center, titleOverflow:TextOverflow.Ellipsis, rightFirstButtonWidth:50, rightFirstButtonStr:'刷新', rightFirstAction:()=>{ this.webController.refresh() }, backAction:()=>{ if (this.webController.accessBackward()) { this.webController.backward() }else { router.back() } }, lightBackAction:()=>{ router.back() } }) Web({src: this.url_str, controller: this.webController}) .backgroundColor('#f5f5f5') .width('100%') } .backgroundColor('#f5f5f5') .width('100%') .height('100%') } } ``` ## 导航中间区域自定义 ``` import { ApplicationTitle } from 'HarLibrary'; import { router } from '@kit.ArkUI'; @Entry @Component struct ThirdPage { @State searchStr : string = '' placeholder : string = '请输入搜索内容' searchController1 : SearchController = new SearchController() searchController2 : SearchController = new SearchController() searchController3 : SearchController = new SearchController() @Builder CustomTitleView(controller: SearchController){ Search({placeholder:this.placeholder,controller:controller}) .width('100%') .height('44') .borderRadius(22) } build() { Column({space:20}){ ApplicationTitle({ tStateHeight:0, tHeight:60, hiddeBackButton:false, hiddenBottomLine:true, tBgColor:'#ffffff', titleTextAlign:TextAlign.End, titleOverflow:TextOverflow.Ellipsis, centerCustomViewPadding: { left:0,right:20 }, centerCustomView:()=>{ this.CustomTitleView(this.searchController1) } }) ApplicationTitle({ tStateHeight:0, tHeight:60, hiddeBackButton:true, hiddenBottomLine:true, tBgColor:'#ffffff', titleTextAlign:TextAlign.Start, // centerCustomViewPadding: { left:12,right:12 }, titleOverflow:TextOverflow.Ellipsis, rightFirstButtonWidth:50, rightFirstButtonStr: '取消', centerCustomView:()=>{ this.CustomTitleView(this.searchController2) }, rightFirstAction:()=>{ router.back() } }) ApplicationTitle({ tStateHeight:0, tHeight:60, hiddeBackButton:true, hiddenBottomLine:true, tBgColor:'#ffffff', bgColorGradient:{ angle:90, direction:GradientDirection.Left, colors: [[0xc2f8e7, 0.0], [0xebfbd8, 1.0]] }, titleTextAlign:TextAlign.Start, // centerCustomViewPadding: { left:12,right:12 }, titleOverflow:TextOverflow.Ellipsis, rightFirstButtonWidth:50, rightFirstButtonStr: '取消', centerCustomView:()=>{ this.CustomTitleView(this.searchController3) }, rightFirstAction:()=>{ router.back() } }) } .width('100%') .height('100%') .onClick(()=>{ this.searchController1.stopEditing() this.searchController2.stopEditing() this.searchController3.stopEditing() }) } } ``` ### 1.ApplicationTitle 接口字段解释 | 模块 | 介绍 | |-----------------------------|--------------------| | tStateHeight | 顶部安全区域 默认0 | | tHeight | 导航区域 默认 50 | | tBgColor | 导航栏背景颜色 | | bgColorGradient | 导航栏背景颜色渐变 | | hiddenBottomLine | 是否显示导航栏底部横线 | | bottomLineHeight | 导航栏底部横线大小 | | bottomLineColor | 导航栏底部横线颜色 | | hiddeBackButton | 是否隐藏左边返回按钮 | | backButtonImage | 设置返回按钮图标 | | backButtonStr | 设置返回按钮文字 | | backButtonStrColor | 设置返回按钮文字颜色 | | backButtonFontWeight | 设置返回按钮文字字体 | | backButtonStrFontSize | 设置返回按钮文字大小 | | backButtonPadding | 返回按钮内边距(只针对图片按钮有效) | | backAction | 返回按钮事件 | | backButtonWidth | 返回按钮的宽度，默认为44 | | 返回键右侧按钮，多数用于web页面 | | hiddenLightBackButton | 是否隐藏返回键旁边的按钮 | | lightBackButtonWidth | 关闭按钮大小 | | lightBackButtonImage | 关闭按钮图标 | | lightBackButtonStr | 关闭按钮文字 | | lightBackButtonStrColor | 关闭按钮文字颜色 | | lightBackButtonFontWeight | 关闭按钮文字字体 | | lightBackButtonStrFontSize | 关闭按钮文字大小 | | lightBackButtonPadding | 关闭按钮内边距（针对图片按钮有效） | | lightBackAction | 关闭按钮事件 | | titleBgImg | 导航栏背景图片设置 | | titleBgImgFit | 导航栏背景图片填充方式 | | title | 标题 | | titleColor | 标题颜色 | | titleFontWeight | 标题文字字体 | | titleFontSize | 标题文字大小 | | titleOverflow | 标题文字过长省略模式 | | titleTextAlign | 标题文字位置（居左，中，右） | | titleMaxLines | 标题最多显示几行，默认1行 | | titlePadding | 标题内边距设置 | | rightFirstButtonWidth | 右侧第一个按钮宽度 | | rightFirstButtonStr | 右侧第一个按钮文字 | | rightFirstButtonFontWeight | 右侧第一个按钮的文字样式 | | rightFirstButtonFontSize | 右侧第一个按钮的文字大小 | | rightFirstButtonFontColor | 右侧第一个按钮的文字颜色 | | rightFirstButtonImage | 右侧第一个按钮的图片设置 | | rightFirstButtonPadding | 右侧第一个按钮的内边距设置 | | rightFirstAction | 右侧第一个按钮的点击事件 | | rightSecondButtonWidth | 右侧第二个按钮宽度 | | rightSecondButtonStr | 右侧第二个按钮文字 | | rightSecondButtonFontWeight | 右侧第二个按钮的文字样式 | | rightSecondButtonFontSize | 右侧第二个按钮的文字大小 | | rightSecondButtonFontColor | 右侧第二个按钮的文字颜色 | | rightSecondButtonImage | 右侧第二个按钮的图片设置 | | rightSecondButtonPadding | 右侧第二个按钮的内边距设置 | | rightSecondAction | 右侧第二个按钮的点击事件 | | _**进度条使用**_ | | | hiddenProgressLine | 底部进度条 默认隐藏 | | progressLineColor | 进度条前景颜色 | | progressBackgroundColor | 进度条背景颜色 | | progressLineHeight | 进度条高度 | | progress | 进度条默认值为0 | | progressBorderRadius | 进度条圆角设置默认：0 | > 开发效果见->https://gitee.com/mrwang0515/custom_navtion >标题区域可以传自定义组件 > 希望您能获得您小小的一个赞👍🏻👍🏻👍🏻 Start ⭐️⭐️⭐️ > 也欢迎随时提出问题：https://gitee.com/mrwang0515/custom_navtion/issues `` ## 支持打赏作者,您的支持是作者最大的动力 `` `` ## 加入群聊 ``