1.封装通用组件顶部导航栏Navbar

不同效果

@Component
export struct MkNavbar {
  @Prop title: string = ''
  @Prop leftIcon: ResourceStr = $r("app.media.ic_public_left")
  @Prop
  rightIcon: ResourceStr = $r("app.media.ic_public_more")
  @Prop
  showLeftIcon: boolean = true
  @Prop
  showRightIcon: boolean = false
  @Prop
  color: ResourceColor = $r("app.color.black")
  @Prop
  bg: ResourceColor = $r("app.color.white")
  // 点击左侧事件
  onLeftClick: () => void = () => {
  }
  onRightClick: () => void = () => {
  }

  @Builder
  defaultBuilder() {
  }

  // 接收参数是Builder类型
  @BuilderParam
  customTitle: () => void = this.defaultBuilder // 可以给也可以不给 不给的话预览器会有报错（编辑器的bug）

  build() {
    RelativeContainer() {
      if (this.showLeftIcon) {
        Image(this.leftIcon)
          .fillColor(this.color)
          .width(30)
          .aspectRatio(1)
          .alignRules({
            center:{
              anchor:'__container__',
              align:VerticalAlign.Center
            },


          })
          .onClick(()=>{
            this.onLeftClick()
          })
      }
      if(this.showRightIcon){
        Image(this.rightIcon)
          .fillColor(this.color)
        .width(30)
          .aspectRatio(1)
          .alignRules({
            center:{
              anchor:'__container__',
              align:VerticalAlign.Center
            },
            right:{

              anchor:'__container__',
              align:HorizontalAlign.End
            }
          })
          .onClick(() => {
            this.onRightClick()
          })
      }
      if(this.title){
        Text(this.title)
          .fontWeight(600)
        .fontColor(this.color)
          .alignRules({
            center:{
              anchor:'__container__',
              align:VerticalAlign.Center
            },
            middle:{
              anchor:'__container__',
              align:HorizontalAlign.Center
            }
          })

      }
      if (this.customTitle) {
        this.customTitle() // 传入的builder被调用了
      }
    }.padding({
      left: 10,
      right: 10
    })
    .width("100%")
    .height(50)
    .backgroundColor(this.bg)
  }
}