项目中每个页面都会用到导航栏，大部份的页面导航栏样式都是差不多的，这样就没必要每个页面都写一遍，可以在common中定义一个导航栏的公共组件，这样在需要使用的页面直接调用就行了。
如果是特殊样式的导航栏，再做单独处理。
效果图:（四种: 无标题、有标题、无分割线、显示右侧按钮）
一、实现代码
（主要涉及：数据传递、事件传递）
// 自定义公共导航栏
@Component
export struct CommonNavBar {
@State title: string = '' //标题
@State showDivider: boolean = true //是否显示分割线 (默认显示)
//返回按钮
@State getBackEvent: boolean = false //是否接管返回事件（默认不接管，直接返回上一个页面）
public backClick: () => void = () => { //点击返回按钮事件
}
//右侧按钮
@State showRightBt: boolean = false //是否显示右侧按钮 (默认隐藏)
@State rightImage: Resource = $r('app.media.ic_share_s') //右侧按钮图片
public rightBtBlock: () => void = () => { //点击右侧按钮事件
}
//路由栈 (获取导航栏堆栈中的页面信息)
@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(() => {
//父组件接管了返回事件就由父组件控制，否则默认返回上一级页面
if (this.getBackEvent) {
this.backClick()
} else {
this.stack.pop()
}
})
Blank()
.layoutWeight(1)
//标题
Text(this.title)
.fontSize(16)
.lineHeight(22)
.fontWeight(500)
Blank()
.layoutWeight(1)
//右侧按钮
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, })
}
}
二、调用
CommonNavBar() //不显示标题
CommonNavBar({ title: '详情' }) //显示标题
CommonNavBar({ title: '详情', showDivider: false }) //显示标题、隐藏分割线
CommonNavBar({ title: '详情', showRightBt: true }) //显示标题和分享按钮
// 自定义公共导航栏（显示标题和分享按钮、处理返回事件和分享事件）
CommonNavBar({
title: '详情', //标题
showDivider: true, //是否显示分割线 (默认显示)
getBackEvent: true, //是否接管返回事件（默认不接管，直接返回上一个页面）
backClick: (() => { //点击返回按钮事件
this.stack.pop();
}),
showRightBt: true, //是否显示右侧按钮 (默认隐藏)
rightImage: $r('app.media.ic_share_s'), //右侧按钮图片
rightBtBlock: (() => { //点击右侧按钮事件
//处理自定义事件
})
})
三、拓展：用 @Builder + function 实现
// 自定义公共导航栏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)
//标题
Text(title)
.fontSize(16)
.lineHeight(22)
.fontWeight(500)
Blank()
.layoutWeight(1)
//右侧按钮
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, })
}
直接调用：
// 自定义公共导航栏2
CommonNavBar2()
CommonNavBar2(this.message)
