鸿蒙harmonynext Navigation组件中title标题自定义居中

所见及所得 复制可用  有不一样的自己可修改 跳转返回使用的Navigator

看效果的话 可以把 aboutToAppear 里的代码给删掉跑

Navigation title自定义居中

import { statusClass } from '../../store'
@Entry
@Component
struct Ticket_reservation {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  TopAvoidAreaHeight: number = 0

  aboutToAppear(): void {
    // 设置了全局沉浸式界面 获取了顶部状态栏高度  下面进行了适配
    this.TopAvoidAreaHeight = Number(JSON.parse(statusClass.getSystemStatus('AvoidAreaHeight') as string))
  }

  @Builder
  NavigationTitle() {
    Row() {
      Navigator({ type: NavigationType.Back, target: "" }) {
        Image($r("app.media.back4"))
          .width(32)
          .aspectRatio(1)
      }
      .layoutWeight(1)

      Text('TitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitle')
        .fontColor('#182431')
        .fontSize(30)
        .fontWeight(700)
        .width("70%")
        .textAlign(TextAlign.Center)
        .layoutWeight(6)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
      Blank()
        .layoutWeight(1)

    }.alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .width("100%")

  }

  build() {
    Column() {
      Navigation() {
        Text("列表")
        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(72)
                .backgroundColor('#FFFFFF')
                .borderRadius(24)
                .fontSize(16)
                .fontWeight(500)
                .textAlign(TextAlign.Center)
            }
          }, (item: number) => item.toString())
          ListItem(){}.height(100)
        }
        .height('100%')
        .width('100%')
        .margin({ top: 12 })
        .padding({ left: '5%',right:'5%'})

      }
      .title(this.NavigationTitle)
      .titleMode(NavigationTitleMode.Mini)
      .hideBackButton(true)
      .hideTitleBar(false)
      .hideToolBar(false)
      .onTitleModeChange((titleModel: NavigationTitleMode) => {
        console.info('titleMode' + titleModel)
      })
    }.width('100%').height('100%').backgroundColor('#f8f8f8').padding({ top: this.TopAvoidAreaHeight })
  }
}

EntryAbility.ets中 onWindowStageCreate 里 关于全局沉浸式界面 顶部状态栏高度的获取

 // 沉浸式界面
    windowStage.getMainWindow().then(res=>{
      res.setWindowLayoutFullScreen(true)
    })
    //获取顶部和底部安全区域
    window.getLastWindow(this.context).then(res=>{
      let AvoidAreaHeight =  px2vp ( res.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height).toFixed(2)
      let BottomAvoidAreaHeight =  px2vp ( res.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height).toFixed(2)
      statusClass.addSystemStatus('AvoidAreaHeight',JSON.stringify( AvoidAreaHeight))
      statusClass.addSystemStatus('BottomAvoidAreaHeight',JSON.stringify( BottomAvoidAreaHeight))
  })