鸿蒙开发-封装一个顶部标题栏

结构式

X Text  X

/*** @FileName : CommomTitleComp* @Author : zqf* @Time : 2025/6/11 13:34* @Description : 公共标题栏3位置   为 x  字  x 设计*/
@Preview
@Component
struct CommomTitleComp {//整体背景色@StatebgColor: string = "#FFF"//中间字体@StatefontSize: number = 18//中间字体颜色@StatefontColor: string = "#000000"//字体加粗等  默认normal@StatefontWeight: number = 400//字体内容@Statetext: string = "我的"@Statepaddingx: number = 16@BuilderParamsetLeft: () => void@BuilderParamsetRight: () => voidbuild() {Row() {this.setLeft()Text(this.text).fontSize(this.fontSize).fontColor(this.fontColor).fontWeight(this.fontWeight)this.setRight()}.width('100%').justifyContent(FlexAlign.SpaceBetween).backgroundColor(this.bgColor).padding(this.paddingx)}
}export { CommomTitleComp }

测试 使用

import { CommomTitleComp } from './builders/CommomTitleComp'@Entry
@Component
struct MyTitleTest {@BuildersetLeft() {Image($r('app.media.ic_back_left')).width(16)}@BuildersetRight() {Image($r('app.media.ic_like')).width(16)}build() {Row() {CommomTitleComp({setLeft: this.setLeft,text: "爬楼",setRight: this.setRight,bgColor :'#F0F0'})}.width('100%')}
}