2025-07-10 09:27:17 +08:00

115 lines
2.8 KiB
Plaintext

import { router } from '@kit.ArkUI'
@Builder
function defaultBuilder(): void {
}
@Component
export struct HdNav {
@StorageProp('topHeight')
topHeight: number = 0
@Prop
title: string = ''
@Prop
textColor: ResourceStr = $r('app.color.top_title')
@Prop
bgColor: ResourceStr = $r('app.color.top_bg')
@Prop
hasBorder: boolean = false
@Prop
leftIcon: ResourceStr = $r('app.media.top_back')
@Prop
rightIcon: ResourceStr = $r('sys.media.ohos_ic_public_more')
@Prop
showRightIcon: boolean = true
@Prop
showLeftIcon: boolean = true
@Prop
showRightText: boolean = false
@Prop
rightText: string = ''
@Prop
rightBackColor:ResourceColor = this.bgColor
@Prop
rightTextColor:ResourceColor = this.textColor
@BuilderParam
titleBuilder: () => void = defaultBuilder
@BuilderParam
menuBuilder: () => void = defaultBuilder
@Prop
isLeftAction: boolean = false
// 添加右侧点击函数
private rightItemAction:()=> void = () => {};
// 添加左侧点击函数
private leftItemAction:()=> void = () => {};
build() {
Row() {
if (this.showLeftIcon) {
Row()
{
Image(this.leftIcon)
.size({ width: 24, height: 24 })
.onClick(() => this.isLeftAction? this.leftItemAction():router.back())
.fillColor($r('app.color.black'))
}
.size({ width: 50, height: 50 })
} else {
Blank()
.width(50)
}
Row() {
if (this.title) {
Text(this.title)
.layoutWeight(1)
.textAlign(TextAlign.Center)
.fontSize(20)
.fontColor(this.textColor)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
} else if (this.titleBuilder) {
this.titleBuilder()
}
}
.height(56)
.width(150)
.layoutWeight(1)
if (this.showRightIcon) {
Row()
{
Image(this.rightIcon)
.size({ width: 24, height: 24 })
.objectFit(ImageFit.Contain)
.bindMenu(this.menuBuilder)
.onClick(()=>this.rightItemAction())
}
.size({ width: 50, height: 50 }).justifyContent(FlexAlign.End)
} else if (this.showRightText) {
Text(this.rightText)
.maxFontSize(16)
.minFontSize(6)
.maxLines(1)
.fontColor(this.rightTextColor)
.onClick(()=>this.rightItemAction())
.width(50)
.textAlign(TextAlign.Center)
.borderRadius(5)
.backgroundColor(this.rightBackColor)
.height(35)
// .margin({right:10})
} else {
Blank()
.width(50)
}
}
.padding({ left: 16, right: 16, top: this.topHeight })
.height(56 + this.topHeight)
.width('100%')
.backgroundColor(this.bgColor)
}
}