CustomTitleUI.ets
1.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import router from '@ohos.router'
@Component
export struct CustomTitleUI {
imgBack:boolean = true
titleName:ResourceStr = "默认标题"
@Prop percent:number = 1
build() {
RelativeContainer() {
//标题栏目
if(this.imgBack){
Image($r('app.media.back_icon'))
.width(`${this.calcHeight(46)}lpx`)
.height(`${this.calcHeight(46)}lpx`)
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
.id("back_icon")
.alignRules({
center: {anchor: "__container__", align: VerticalAlign.Center},
left: {anchor: "__container__", align: HorizontalAlign.Start}
})
.margin({left:`${this.calcHeight(31)}lpx`})
.onClick(()=>{
router.back()
})
}
Text(this.titleName)
.maxLines(1)
.id("title")
.fontSize(`${this.calcHeight(35)}lpx`)
.fontWeight(400)
.fontColor($r('app.color.color_222222'))
.lineHeight(`${this.calcHeight(50)}lpx`)
.alignRules({
center: {anchor: "__container__", align: VerticalAlign.Center},
middle: {anchor: "__container__", align: HorizontalAlign.Center}
})
}
.height(`${this.calcHeight(84)}lpx`)
.width('100%')
.backgroundColor($r('app.color.white'))
}
calcHeight(value:number): number{
return value * this.percent
}
}