Navigation自定义标题栏不生效问题如何修改
=========================

#### 问题现象

使用Navigation时，自定义了一个标题栏布局，使用其中的title方法无效。

问题效果预览：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2a/v3/tri6awaVTkOYHr-eEUEa2w/zh-cn_image_0000002628399758.png?HW-CC-KV=V1&HW-CC-Date=20260709T134033Z&HW-CC-Expire=86400&HW-CC-Sign=EAFDD3E83FBD0E550FF1EE16EF4C7A3E76DFFA410FB5A46811CEDA26876E08EB "点击放大")

问题代码示例参考如下：

@Entry
@Component
struct Index {
  text: string = '标题';
  customTitle: NavigationCustomTitle = {
    builder: this.customTitleBuilder(),
    height: TitleHeight.MainOnly
  };

  @Builder
  customTitleBuilder() {
    Row() {
      Text(this.text);
    };
  }

  build() {
    Navigation() {
      Column() {
        Text('首页')
          .fontSize(40);
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%');
    }
    .title(this.customTitle);
  }
}

#### 背景知识

[Navigation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation)是路由容器组件，一般作为首页的根容器。其内部默认包含了标题栏、内容区和工具栏。其中内容区默认首页显示导航内容，标题栏和工具栏均支持传入自定义样式。

#### 解决方案

使用ArkUI Inspector查看应用布局，发现TitleBar不可见，标题栏未创建。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b7/v3/Ji6AST-WSoe94WQ6chcO8Q/zh-cn_image_0000002658799027.png?HW-CC-KV=V1&HW-CC-Date=20260709T134033Z&HW-CC-Expire=86400&HW-CC-Sign=4F142BE54AAEF41F00126EC72D0D095F68454C7D836E1BEB27A06FF24FD43B22 "点击放大")

查看[title](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation#title)传入参数类型，其中NavigationCustomTitle和CustomBuilder这两种类型均支持自定义标题栏样式。

代码中使用的NavigationCustomTitle类型变量，自定义标题的方法在传入时，没有绑定当前上下文。在执行时，this指向了NavigationCustomTitle对象，找不到相应的方法，因而无法渲染绘制标题栏。

*   **方案一**：NavigationCustomTitle里builder传入方法需要bind(this)。
    
    @Entry
    @Component
    struct NavTitleSolution1 {
      text: string = '标题';
      customTitle: NavigationCustomTitle = {
        builder: this.customTitleBuilder.bind(this),
        height: TitleHeight.MainOnly
      };
    
      @Builder
      customTitleBuilder() {
        Row() {
          Text(this.text)
            .fontSize(20);
        }.margin({ left: 18, top: 28 });
      }
    
      build() {
        Navigation() {
          Column() {
            Text('首页')
              .fontSize(40);
          }
          .justifyContent(FlexAlign.Center)
          .width('100%')
          .height('100%');
        }
        .title(this.customTitle);
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4c/v3/rMk62wiUToC76vrcmLw15Q/zh-cn_image_0000002628559674.png?HW-CC-KV=V1&HW-CC-Date=20260709T134033Z&HW-CC-Expire=86400&HW-CC-Sign=591CEDE1C62162C638971358D55E142A8EB3F26024EEF395438A023C951DCB18 "点击放大")
    
*   **方案二**：在title中直接传入自定义布局的方法。
    
    @Entry
    @Component
    struct NavTitleSolution2 {
      text: string = '标题';
    
      @Builder
      customTitleBuilder() {
        Row() {
          Text(this.text)
            .fontSize(20);
        }.margin({ left: 18, top: 28 });
      }
    
      build() {
        Navigation() {
          Column() {
            Text('首页')
              .fontSize(40);
          }
          .justifyContent(FlexAlign.Center)
          .width('100%')
          .height('100%');
        }
        .hideBackButton(true)
        .titleMode(NavigationTitleMode.Mini)
        .title(this.customTitleBuilder());
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/dc/v3/2CquOetPTdOMgtO70jb4ag/zh-cn_image_0000002658918981.png?HW-CC-KV=V1&HW-CC-Date=20260709T134033Z&HW-CC-Expire=86400&HW-CC-Sign=74D2A3A1B5B45CE78F986FC177CE66922EEC6D0932AD82FEA6F8B64BF9AA0B42 "点击放大")
    

#### 常见FAQ

Q：NavDestination怎么修改单个页面标题文字颜色？

A：参考上述解决方案，在title中传入@Builder构建函数实现自定义标题栏，可以指定文字颜色。