鸿蒙Next(三) 自定义公共导航栏

    项目中每个页面都会用到导航栏，大部份的页面导航栏样式都是差不多的，这样就没必要每个页面都写一遍，可以在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)