CustomTitleUI.ets 1.2 KB
import router from '@ohos.router'

@Component
export struct CustomTitleUI {
  imgBack:boolean = true
  titleName:string = "默认标题"

  build() {
    RelativeContainer() {
      //标题栏目
      if(this.imgBack){
        Image($r('app.media.back_icon'))
          .width('46lpx')
          .height('46lpx')
          .objectFit(ImageFit.Auto)
          .interpolation(ImageInterpolation.High)
          .id("back_icon")
          .alignRules({
            center: {anchor: "__container__", align: VerticalAlign.Center},
            left: {anchor: "__container__", align: HorizontalAlign.Start}
          })
          .margin({left:'31lpx'})
          .onClick(()=>{
            router.back()
          })
      }

      Text(this.titleName)
        .height('42lpx')
        .maxLines(1)
        .id("title")
        .fontSize('35lpx')
        .fontWeight(400)
        .fontColor($r('app.color.color_222222'))
        .lineHeight('42lpx')
        .alignRules({
          center: {anchor: "__container__", align: VerticalAlign.Center},
          middle: {anchor: "__container__", align: HorizontalAlign.Center}
        })

    }
    .height('84lpx')
    .width('100%')
    .backgroundColor($r('app.color.white'))
  }
}