//1.父组件调用
@Entry
@ComponentV2
struct Index {
// @Builder
// midBuilderParam() {
// Row() {
// Image($r('app.media.ic_search')).width(23).aspectRatio(1)
// }.layoutWeight(1).justifyContent(FlexAlign.Center)
// }
build() {
Column() {
MMNavBar({
title: '我的',
isShowRightIcon: true,
onLeftClick: () => {
AlertDialog.show({ message: "onLeftClick" })
},
// builderParam: this.midBuilderParam
})
}.width('100%').height('100%')
}
}
//2 .新建文件MMNavBar
@ComponentV2
export struct MMNavBar {
//1标题
@Param title: string = '设置'
//2左侧图标及是否显示
@Param LeftIcon: ResourceStr = $r('app.media.ic_right')
@Param isShowLeftIcon: boolean = true
// 3左侧的点击事件
@Event onLeftClick: () => void = () => {
}
@Param isShowRightIcon: boolean = false
@Param ShowRightIcon: ResourceStr = $r('app.media.ic_search')
@Event onRightClick: () => void = () => {
}
@BuilderParam builderParam: () => void = this.defBuilder
@Builder
defBuilder() {
Text(this.title).layoutWeight(1).textAlign(TextAlign.Center)
}
// 4右侧图标及是否显示
// 5右侧点击事件
// 6 结构插槽
build() {
Row() {
//1
Row() {
if (this.isShowLeftIcon) {
Image(this.LeftIcon).width(23).aspectRatio(1)
}
}.width(50).justifyContent(FlexAlign.Center).onClick(() => {
this.onLeftClick()
})
//2
this.builderParam()
//3
Row() {
if (this.isShowRightIcon) {
Image(this.ShowRightIcon).width(23).aspectRatio(1)
}
}.width(50)
.onClick(() => {
this.onRightClick()
})
}.width('100%').height(56).backgroundColor('#DCDCDC')
}
}
