CustomTitleAndEditUI.ets
1.87 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import router from '@ohos.router'
@Component
export struct CustomTitleAndEditUI {
imgBack:boolean = true
titleName:string = "默认标题"
@Link isDisplayButton:boolean
@Consume isEditState:boolean
editCallback: () => void = () => {
}
build() {
RelativeContainer() {
//标题栏目
if(this.imgBack){
Image($r('app.media.back_icon'))
.width(24)
.height(24)
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
.id("back_icon")
.alignRules({
center: {anchor: "__container__", align: VerticalAlign.Center},
left: {anchor: "__container__", align: HorizontalAlign.Start}
})
.margin({left: 16})
.onClick(()=>{
router.back()
})
}
Text(this.titleName)
.maxLines(1)
.id("title")
.fontSize(18)
.fontWeight(500)
.fontColor($r('app.color.color_222222'))
.lineHeight(26)
.alignRules({
center: {anchor: "__container__", align: VerticalAlign.Center},
middle: {anchor: "__container__", align: HorizontalAlign.Center}
})
if (this.isDisplayButton){
Button(this.isEditState === true?'取消':'编辑')
.type(ButtonType.Normal)
.fontColor($r('app.color.color_222222'))
.fontSize(16)
.height(20)
.backgroundColor(Color.White)
.id("edit_Button")
.alignRules({
center: {anchor: "__container__", align: VerticalAlign.Center},
right: {anchor: "__container__", align: HorizontalAlign.End}
})
.margin({right: 16})
.onClick(()=>{
this.isEditState = !this.isEditState
this.editCallback()
})
}
}
.height(44)
.width('100%')
.backgroundColor($r('app.color.white'))
}
}