📚基本简介

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 alertModel : AlertParModel = new AlertParModel()
    alertModel.name = '王五'
    alertModel.age = 20
    alertModel.sex = '男'
    let array = ['测试1','测试2','测试3','测试4','测试5']
    let arrayStr : string = json.stringify(array)
    let par : Map<string,string> = new Map()
    par.set('testKey','自定义内容参数内容CustomStr')
    par.set('testKey1',arrayStr)
    par.set('personModel',json.stringify(alertModel))
    PCAlertUtil.alertCustomView(wrapBuilder(CustomBuildText),{backgroundDismissEnable:true,customPar:par,callBack:(type:number,obj:object)=>{
       let personModel : AlertParModel = obj as AlertParModel
       console.log('callBack.type===',type)
       console.log('callBack.personModel===',personModel)
       console.log('callBack.personModel.name',personModel.name)
       console.log('callBack.personModel.age',personModel.age)
       console.log('callBack.personModel.sex',personModel.sex)
    }})
}

import { AlertCustomParams } from 'HarLibrary/src/main/ets/alertComponents/PCAlertUtil'
import { AlertParModel } from '../DialogTestPage'
import json from '@ohos.util.json'

@Builder
export function CustomBuildText(params: AlertCustomParams) {
  SubCustomView({params:params})
}

@Component
struct SubCustomView{
  private params : AlertCustomParams = {}
  private params1 : Map<string,string> | undefined = new Map()
  personModel : AlertParModel = new AlertParModel()
  private content : string | undefined = ''
  aboutToAppear(): void {
    this.params1 = this.params.customPar
    let arrayStr : string | undefined = this.params1?.get('testKey1')
    let array : [] = json.parse(arrayStr) as []
    console.log('testKey====',array.length)
    console.log('testKey====array',array)
    let personStr = this.params1?.get('personModel')
    this.personModel = json.parse(personStr) as AlertParModel
    console.log('personModel.name',this.personModel.name)
    console.log('personModel.age',this.personModel.age)
    console.log('personModel.sex',this.personModel.sex)
    this.content = this.params1?.get('testKey')
  }
  build() {
    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分钟')
            .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(this.content)
            .margin({top:12})
            .width('100%')
            .fontColor('#121212')
            .fontSize(14)
            .fontWeight(FontWeight.Regular)

          Row(){
            Button('确定')
              .width('100%')
              .height(40)
              .backgroundColor(Color.Blue)
              .borderRadius(20)
              .onClick(()=>{
                this.params.promptAction?.closeDialog()
                if (this.params.callBack) {
                  let personModel : AlertParModel = new AlertParModel()
                  personModel.name = '小红'
                  personModel.age = 20
                  personModel.sex = '男'
                  this.params.callBack(1,personModel)
                }
              })
          }.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 接口字段解释

开发效果见->https://gitee.com/mrwang0515/custom_navtion

标题区域可以传自定义组件

希望您能获得您小小的一个赞👍🏻👍🏻👍🏻 Start ⭐️⭐️⭐️ 也欢迎随时提出问题：https://gitee.com/mrwang0515/custom_navtion/issues

``

支持打赏作者,您的支持是作者最大的动力

加入群聊

``

推荐内容