三、分类模块，通用组件顶部导航栏Navbar

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

不同效果

@Component
export struct MkNavbar {@Prop title: string = ''@Prop leftIcon: ResourceStr = $r("app.media.ic_public_left")@ProprightIcon: ResourceStr = $r("app.media.ic_public_more")@PropshowLeftIcon: boolean = true@PropshowRightIcon: boolean = false@Propcolor: ResourceColor = $r("app.color.black")@Propbg: ResourceColor = $r("app.color.white")// 点击左侧事件onLeftClick: () => void = () => {}onRightClick: () => void = () => {}@BuilderdefaultBuilder() {}// 接收参数是Builder类型@BuilderParamcustomTitle: () => 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)}
}