鸿蒙Next自定义NavDestination标题栏

系统导航Navigation、NavDestination组件为我们提供了便捷的标题栏、工具栏、返回键设置方法。只需要关心标题内容和工具栏按键样式和点击回调即可，不需要过多的关心布局。
但是，如果有些页面的标题栏使用系统默认样式不能满足产品UI需求，因此就需要我们去自定义一下样式。

一、简单粗暴的方法就是隐藏掉系统标题栏，在布局中加一个标题栏的自定义组件。但是这样不能使用NavDestination组件和嵌套的可滚动容器组件绑定关联滑动，需要自己实现。

二、可以使用NavDestination自带的title自定义方法，修改导航栏的样式。

先看一下title属性可以接收的参数类型:

string： 设置默认主标题内容
NavDestinationCommonTitle：设置主标题main,副标题sub
NavDestinationCustomTitle 看一下这个类型的构造参数，支持传入自定义布局。

NavDestinationCustomTitle类型包括了CustomBuilder，支持设置自定义标题栏高度。只有主标题时，标题栏的推荐高度（56vp），同时有主标题和副标题时，标题栏的推荐高度（82vp）。

1.只修改标题字体样式
title可以接收CustomBuilder形式的Build布局，我们可以自定义一个Build，作为标题的显示内容。

@Builder
  Mytitle(){
    Row(){
      Text(this.title).fontSize(30).fontColor(Color.Green)
        .textShadow({
          radius: 10,
          color: Color.Black,
          offsetX: 0,
          offsetY: 0
        })
    }.height('100%').alignItems(VerticalAlign.Center)
  }

ScreenShot_2025-10-14_170401_507.png

这样我们就可以自定义标题的字体样式了！！！

2.修改返回键
NavDestination子页面自带返回按键，也可以设置返回键的icon，但是会有一个默认的灰色背景，如果不喜欢这个背景，只需要隐藏掉返回键，自定义标题里再加一个返回键按钮。

使用hideBackButton隐藏系统返回按键时，运行闪退

[main_thread.cpp:1602]
      com.hmos.study is about to exit due to RuntimeError
      Error type:TypeError
      Error name:TypeError
      Error message:is not callable
      Stacktrace:
          at anonymous (entry/src/main/ets/pages/CodeDisplayPage.ets:69:22)
          at updateFunc (/usr1/hmos_for_system/src/increment/sourcecode/foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/stateMgmt.js:9153:1)
          at observeComponentCreation2 (/usr1/hmos_for_system/src/increment/sourcecode/foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/stateMgmt.js:9173:1)
          at initialRender (entry/src/main/ets/pages/CodeDisplayPage.ets:30:3)
          at initialRenderView (/usr1/hmos_for_system/src/increment/sourcecode/foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/stateMgmt.js:9138:1)

刚开始遇到这个错我也一脸懵，社区搜了一下，也有一个同学遇到类似问题，下面的评论都是没遇到过，查了半天源码看着也有这个方法啊，为什么一加上就闪退呢？其实原因很简单！
点进去看一下hideBackButton方法的介绍

 /**
     * Hide navDestination back button
     *
     * @param { Optional<boolean> } hide
     * @returns { NavDestinationAttribute }
     * @syscap SystemCapability.ArkUI.ArkUI.Full
     * @crossplatform
     * @atomicservice
     * @since 15
     */

since15如果自己的项目compatibleSdkVersion兼容版本低于15，不持支这个写法，只需要将compatibleSdkVersion改为15及以上就可以了。

重新自定义标题

@Builder
  customTitle(){
    Row(){
      Row({space:10}){
        Image($r('app.media.ic_back')).width(30).height(30).objectFit(ImageFit.Contain).margin({left:20})
          .onClick(()=>{
            this.pageInfos.pop()
          })
        Text(this.title).fontSize(30).fontColor(Color.Green)
          .textShadow({
            radius: 10,
            color: Color.Black,
            offsetX: 0,
            offsetY: 0
          })
      }.alignItems(VerticalAlign.Center).height('100%')

      Row({space:10}){
        Image($r('app.media.icon_h5_refresh')).width(25).height(25)
        Image($r('app.media.icon_h5_copy')).width(25).height(25)
        Image($r('app.media.icon_h5_complaint')).width(25).height(25)
      }
    }.justifyContent(FlexAlign.SpaceBetween).height('100%').width('100%')
    .onAreaChange((oldValue: Area, newValue: Area)=>{
        console.log('标题栏高:'+newValue.height)
    })
  }

ScreenShot_2025-10-14_171700_570.png

这样我们就实现看自定义导航标题栏，可以自定义返回键、标题、工具栏图标样式和大小。

使用：
标题栏默认高度56，根据产品需要选择合适的构造参数。

NavDestination(){}
.title({builder:this.customTitle(),height:56})
// .title(this.customTitle())
.hideBackButton(true)

注意：

自定义标题栏的字体样式需要我们处理，比如内容过长是否换行，字体大小是否跟随内容自适应。