前言： 安卓开发的时候会封装公共的自定义控件，鸿蒙开发的时候也不例外，这不，我就自定义了自己的 TitleBar 组件，完美匹配了安卓开发时候的套路，哈哈哈。

1. TittleBar 包含左边按钮，中间文字，右边按钮，为了使布局更加灵活我使用的是 Stack 堆叠容器在最外层去包裹里面的控件。

2.按钮的交互逻辑，包含：左边/右边 按钮返回，是否显示，是否可切换图标，以及按钮点击监听回调。

import { router } from '@kit.ArkUI'

@Component
export struct NavCom {
  @StorageProp('safeTop') topPadding: number = 0
  leftButton: ResourceStr = $r('app.media.left_back')
  //是否显示图标
  isLogo: boolean = false
  title: string = ''
  //右边图标
  firstButton: ResourceStr = ''
  secondButton: ResourceStr = ''
  //右边文字按钮
  rightText: string = ''
  //右边图标业务
  firstButtonTask: () => void = () => {
  }
  secondButtonTask: () => void = () => {
  }
  //标题图标业务
  logoTask: () => void = () => {
  }
  //右边文字按钮业务
  textTask: () => void = () => {
  }
  //左侧返回图标逻辑
  backTask: () => boolean = () => {
    return false
  }

  build() {
    Stack() {
      // Row() {
      if (this.title) {
        Text(this.title)// .fontColor($r('app.color.TitleColor'))
          .width(200)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)// }
          .layoutWeight(1)
          .zIndex(1)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .textAlign(TextAlign.End)
          .margin({left:10,right:10})
          .textAlign(TextAlign.Center)
      } else {
        Blank()
      }
      // .bindMenu(this.customBuilderParam)

      Row() {
        //返回按钮
        if (this.isLogo) {
          Image($r('app.media.logo'))
            .width(73)
            .height(20.8)
            .onClick(()=>{
              this.logoTask()
            })
        } else {
          Image(this.leftButton)
            .width(24)
            .fillColor('#000000')
            .onClick(() => {
              if (this.backTask()) {
                return
              }
              router.back()
            })
        }
        //右边按钮
        Row({ space: 24 }) {
          //如果是文字
          if (this.rightText) {
            Text(this.rightText)
              .fontColor(Color.White)
              .fontSize(18)
              .fontWeight(600)
              .onClick(() => {
                this.textTask()
              })
          }
          //如果是图标
          if (this.firstButton) {
            Image(this.firstButton)
              .width(24)// .fillColor(Color.White)
              .onClick(this.firstButtonTask)
              .bindMenu(this.customRightBuilderParam)
          }
          if (this.secondButton) {
            Image(this.secondButton)
              .width(24)// .fillColor(Color.White)
              .onClick(this.secondButtonTask)
          }
        }
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .backgroundColor(Color.Transparent)
    .width('100%')
    .padding({
      top: 12,
      bottom: 11.2,
      left: 20,
      right: 20
    })
  }

  @Builder
  MyMenu() {
  }

  @BuilderParam
  customBuilderParam: () => void = this.MyMenu
  @BuilderParam
  customRightBuilderParam: () => void = this.MyMenu
}