HarmonyOS鸿蒙Next中Navigation和NavDestination的标题设置为居中

默认情况下，HarmonyOS鸿蒙Next中Navigation和NavDestination的标题都在左侧，并且没有原生接口直接设置标题居中。

在Navigation中，要设置居中，那么title属性要使用CustomBuilder，示例如下：

@Entry
@Component
struct Index {
  ...

  @Builder
  navigationTitle() {
    Row() {
      Text('主页面').fontSize(22).fontWeight(2)
      // x设置为0，width设置为100%，这样Row的宽度就是Navigation的TitleBar的宽度
    }.position({ x: 0 }).width('100%').justifyContent(FlexAlign.Center)
  }

  build() {
    Navigation() {
      ...
      // title属性使用CustomBuilder
    }.title(this.navigationTitle)
    .titleMode(this.navigationTitleMode)
  }
}

效果如下：

image

NavDestination的设置方法相同。

完整示例如下：

@Component
struct Page01 {
  pathStack: NavPathStack | undefined = undefined;

  @Builder
  navDestinationTitle() {
    Row() {
      Text('主页面').fontSize(22).fontWeight(2)
      // x设置为0，width设置为100%，这样Row的宽度就是Navigation的TitleBar的宽度
    }.position({ x: 0 }).width('100%').justifyContent(FlexAlign.Center)
  }

  build() {
    NavDestination() {
      Button(`pop`).width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack?.pop();
        })
      // title属性使用CustomBuilder
    }.title(this.navDestinationTitle)
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack();
  @State navigationTitleMode: NavigationTitleMode = NavigationTitleMode.Free;

  @Builder
  navigationTitle() {
    Row() {
      Text('主页面').fontSize(22).fontWeight(2)
      // x设置为0，width设置为100%，这样Row的宽度就是Navigation的TitleBar的宽度
    }.position({ x: 0 }).width('100%').justifyContent(FlexAlign.Center)
  }

  @Builder
  pagesMap(name: string) {
    if (name == 'Page01') {
      Page01()
    }
  }

  build() {
    Navigation(this.pathStack) {
      Column() {
        Button('切换导航标题模式').width('80%').margin({ top: 10, bottom: 10 })
          .onClick(() => {
            if (this.navigationTitleMode == NavigationTitleMode.Free) {
              this.navigationTitleMode = NavigationTitleMode.Full;
            } else if (this.navigationTitleMode == NavigationTitleMode.Full) {
              this.navigationTitleMode = NavigationTitleMode.Mini;
            } else if (this.navigationTitleMode == NavigationTitleMode.Mini) {
              this.navigationTitleMode = NavigationTitleMode.Free;
            }
          })
        Button('push Page01').width('80%').margin({ top: 10, bottom: 10 })
          .onClick(() => {
            this.pathStack.pushPath({ name: 'Page01' });
          })
      }.width('100%').height('100%')
      // title属性使用CustomBuilder
    }.title(this.navigationTitle)
    .titleMode(this.navigationTitleMode)
    .navDestination(this.pagesMap)
  }
}

更多关于HarmonyOS鸿蒙Next中Navigation和NavDestination的标题设置为居中的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

主要是这个返回按钮不符合我们的设计样式。居中不居中无所谓了。 我们都是直接hidden它然后自己画个导航栏，想要啥样式都行。

更多关于HarmonyOS鸿蒙Next中Navigation和NavDestination的标题设置为居中的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，将Navigation和NavDestination的标题设置为居中，可以通过在XML布局文件中设置app:titleAlignment属性为center来实现。例如：

<NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:titleAlignment="center">
    
    <NavDestination
        android:id="@+id/nav_destination"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:titleAlignment="center"/>
</NavigationView>

这样，标题将自动居中显示。

在HarmonyOS Next中，Navigation和NavDestination的标题默认左对齐，确实没有直接设置居中的原生接口。您的解决方案非常正确，通过CustomBuilder自定义标题布局是实现居中的有效方式。

关键点说明：

  1. 使用@Builder创建自定义标题组件
  2. 通过Row容器包裹Text组件
  3. 设置Row的position为x:0和width为100%使其充满标题栏
  4. 使用justifyContent(FlexAlign.Center)实现居中

这种方法既保持了组件化开发的特性，又实现了UI定制的需求。对于NavDestination的标题居中，采用相同的思路即可。

您的示例代码完整展示了两种场景下的实现方式，是标准的HarmonyOS开发实践。这种方案的优势在于：

  • 不依赖未公开API
  • 保持代码可维护性
  • 兼容不同的titleMode

这种实现方式在HarmonyOS应用开发中是推荐的做法。

回到顶部