鸿蒙自定义导航栏,基于BuilderParam
·

代码:
import { RouterModule, RouterNameConstants } from "routers"
import { CommonConstants, fpConversion, vpConversion } from "../../../../Index"
import { primaryColor } from "../resource/CommonConstants"
/**
* 箭头导航栏
*/
@ComponentV2
export struct NavigationBarView {
@Param @Require barTitle: string | Resource //标题
@Param needArrow: boolean = true // 是否需要箭头
@Param needRightText: string | Resource = '' //右侧文本
@Param rightTextCallBack: ()=> void = ()=> {} //右侧文本点击
@BuilderParam contentView: () => void = this.defaultView //内容: 其他组件
@Builder
defaultView() {
}
build() {
NavDestination() {
Flex({ direction: FlexDirection.Column }) {
RelativeContainer() {
if (this.needRightText) {
Text(this.needRightText)
.fontColor(Color.White)
.fontSize(fpConversion(16))
.alignRules({
right: { anchor: '__container__', align: HorizontalAlign.End },
center: { anchor: '__container__', align: VerticalAlign.Center }
})
.onClick(()=> {
this.rightTextCallBack();
})
}
if (this.needArrow) {
Image($r('app.media.icon_left_arrow'))
.width(vpConversion(24))
.height(vpConversion(24))
.alignRules({
left: { anchor: '__container__', align: HorizontalAlign.Start },
center: { anchor: '__container__', align: VerticalAlign.Center }
})
.id('leftArrow')
.onClick(() => {
RouterModule.pop(RouterNameConstants.RenAndMao) //回退上一页
})
}
Text(this.barTitle)
.fontSize(fpConversion(18))
.fontWeight(FontWeight.Medium)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.id('centerTitle')
}
.height(vpConversion(56))
.backgroundColor(primaryColor())
.width(CommonConstants.FULL_SCREEN)
.padding({ left: vpConversion(20), right: vpConversion(20) })
//页面内容
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
this.contentView()
}
.layoutWeight(1)
.width(CommonConstants.FULL_SCREEN)
.backgroundColor(Color.White)
}
.height(CommonConstants.FULL_SCREEN)
.width(CommonConstants.FULL_SCREEN)
}
.hideTitleBar(true)
}
}
使用
@ComponentV2
export struct MyView {
build() {
NavigationBarView({barTitle: '12345'}) {
Text('0987654321')
}
}
}
更多推荐

所有评论(0)