????項(xiàng)目中每個(gè)頁面都會用到導(dǎo)航欄，大部份的頁面導(dǎo)航欄樣式都是差不多的，這樣就沒必要每個(gè)頁面都寫一遍，可以在common中定義一個(gè)導(dǎo)航欄的公共組件，這樣在需要使用的頁面直接調(diào)用就行了。
?? ?如果是特殊樣式的導(dǎo)航欄，再做單獨(dú)處理。
效果圖:（四種: 無標(biāo)題、有標(biāo)題、無分割線、顯示右側(cè)按鈕）
一、實(shí)現(xiàn)代碼
（主要涉及：數(shù)據(jù)傳遞、事件傳遞）
// 自定義公共導(dǎo)航欄
@Component
export struct CommonNavBar {
??@State title: string = '' //標(biāo)題
??@State showDivider: boolean = true //是否顯示分割線 (默認(rèn)顯示)
??//返回按鈕
??@State getBackEvent: boolean = false //是否接管返回事件（默認(rèn)不接管，直接返回上一個(gè)頁面）
??public backClick: () => void = () => { //點(diǎn)擊返回按鈕事件
??}
??//右側(cè)按鈕
??@State showRightBt: boolean = false //是否顯示右側(cè)按鈕 (默認(rèn)隱藏)
??@State rightImage: Resource = $r('app.media.ic_share_s') //右側(cè)按鈕圖片
??public rightBtBlock: () => void = () => { //點(diǎn)擊右側(cè)按鈕事件
??}
??//路由棧 (獲取導(dǎo)航欄堆棧中的頁面信息)
??@Consume('pageInfos') stack: NavPathStack
??build() {
????Column() {
??????Row() {
????????// 返回按鈕
????????Image($r('app.media.ic_back2'))
??????????.objectFit(ImageFit.Contain)
??????????.height(40)
??????????.width(40)
??????????.padding(12)
??????????.margin({ left: 5 })
??????????.onClick(() => {
????????????//父組件接管了返回事件就由父組件控制，否則默認(rèn)返回上一級頁面
????????????if (this.getBackEvent) {
??????????????this.backClick()
????????????} else {
??????????????this.stack.pop()
????????????}
??????????})
????????Blank()
??????????.layoutWeight(1)
????????//標(biāo)題
????????Text(this.title)
??????????.fontSize(16)
??????????.lineHeight(22)
??????????.fontWeight(500)
????????Blank()
??????????.layoutWeight(1)
????????//右側(cè)按鈕
????????Image(this.rightImage)
??????????.height(40)
??????????.width(40)
??????????.padding(8)
??????????.margin({ right: 5 })
??????????.visibility(this.showRightBt ? Visibility.Visible : Visibility.Hidden)
??????????.onClick(() => {
????????????this.rightBtBlock()
??????????})
??????}
??????.width('100%')
??????//分割線
??????Divider()
????????.color('#f4f4f4')
????????.strokeWidth(1)//分割線寬度
????????.visibility(this.showDivider ? Visibility.Visible : Visibility.Hidden)
????}
????.margin({ top: 35, })
??}
}
二、調(diào)用
CommonNavBar() //不顯示標(biāo)題
CommonNavBar({ title: '詳情' }) //顯示標(biāo)題
CommonNavBar({ title: '詳情', showDivider: false }) //顯示標(biāo)題、隱藏分割線
CommonNavBar({ title: '詳情', showRightBt: true }) //顯示標(biāo)題和分享按鈕
// 自定義公共導(dǎo)航欄（顯示標(biāo)題和分享按鈕、處理返回事件和分享事件）
CommonNavBar({
title:?'詳情', //標(biāo)題
??showDivider: true,?//是否顯示分割線 (默認(rèn)顯示)
??getBackEvent: true,?//是否接管返回事件（默認(rèn)不接管，直接返回上一個(gè)頁面）
??backClick: (() => { //點(diǎn)擊返回按鈕事件
? ? this.stack.pop();
??}),
? showRightBt: true,?//是否顯示右側(cè)按鈕 (默認(rèn)隱藏)
? rightImage: $r('app.media.ic_share_s'),?//右側(cè)按鈕圖片
??rightBtBlock: (() => {?//點(diǎn)擊右側(cè)按鈕事件
????//處理自定義事件
??})
})
三、拓展：用 @Builder + function 實(shí)現(xiàn)
// 自定義公共導(dǎo)航欄2
@Builder
export function CommonNavBar2(title?: string) {
??Column() {
????Row() {
??????// 返回按鈕
??????Image($r('app.media.ic_back2'))
????????.objectFit(ImageFit.Contain)
????????.height(40)
????????.width(40)
????????.padding(12)
????????.margin({ left: 5 })
????????.onClick(() => {
????????})
??????Blank()
????????.layoutWeight(1)
??????//標(biāo)題
??????Text(title)
????????.fontSize(16)
????????.lineHeight(22)
????????.fontWeight(500)
??????Blank()
????????.layoutWeight(1)
??????//右側(cè)按鈕
??????Image($r('app.media.ic_share_s'))
????????.height(40)
????????.width(40)
????????.padding(8)
????????.margin({ right: 5 })
????????.onClick(() => {
????????})
????}
????.width('100%')
????//分割線
????Divider()
??????.color('#f4f4f4')
??????.strokeWidth(1) //分割線寬度
? }
??.margin({ top: 35, })
}
直接調(diào)用：
// 自定義公共導(dǎo)航欄2
CommonNavBar2()
CommonNavBar2(this.message)
