HarmonyOS 鸿蒙Next中NavDestination的标题如何设置居中

HarmonyOS 鸿蒙Next中用了 NavDestination(){ }.title('设置') 现在的标题是在左边，如果想让标题居中要怎么设置？

3 回复

默认情况下，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)
  }
}

效果如下：

0030086000697657393.20250513163245.32782630822681226208703534615340.png

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中NavDestination的标题如何设置居中的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，要使NavDestination的标题居中，可以通过在NavDestination的布局文件中设置Text组件的textAlignment属性为center。例如，在XML布局文件中，可以这样定义：

<Text
    ohos:id="$+id:title"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:text="标题"
    ohos:textAlignment="center"/>

这样，标题文本将在NavDestination中居中显示。

在HarmonyOS Next中，要使NavDestination的标题居中显示，可以通过自定义导航栏样式来实现。以下是实现方法：

  1. 使用Navigation的titleMode属性设置为NavigationTitleMode.Center：
Navigation(this.pageStack) {
  NavDestination() {
    // 页面内容
  }
  .title('设置')
}
.titleMode(NavigationTitleMode.Center)
  1. 如果需要更精细的控制，可以使用自定义导航栏：
Navigation(this.pageStack) {
  NavDestination() {
    // 页面内容
  }
  .title('设置')
  .navBar(this.customNavBar)
}

@Builder customNavBar() {
  Row() {
    Text('设置')
      .fontSize(20)
      .fontWeight(FontWeight.Medium)
      .layoutWeight(1)
      .textAlign(TextAlign.Center)
  }
  .width('100%')
}

第一种方法更简单直接，第二种方法提供了更大的灵活性。根据你的具体需求选择合适的方式即可。

回到顶部