Navigation 中 title 怎么居中显示 HarmonyOS 鸿蒙Next

Navigation 中 title 怎么居中显示 HarmonyOS 鸿蒙Next Navigation中title怎么居中显示

2 回复

方法一，自定义：

---
方法二，偏门方法，不推荐：

@Entry
@Component
struct Index {
  build() {
    Navigation({
      title: '', // 清空默认标题
      content: () => {
        Row({ space: 50, justifyContent: FlexAlign.Center }) {
          Text('居中标题')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
        }
        .width('100%')
      }
    }) {
      Column({ space: 50 }) {
        // 页面内容
        Text('这是页面内容')
      }
      .width('100%')
    }
  }
}

@Entry
@Component
struct Index {
  build() {
    Navigation({
      title: '居中标题'
    }) {
      Column({ space: 50 }) {
        // 页面内容
        Text('这是页面内容')
      }
      .width('100%')
    }
    .findComponent(NavigationTitle)
    .alignItems(FlexAlign.Center)
    .width('100%')
  }
}

更多关于Navigation 中 title 怎么居中显示 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，要使Navigation的title居中显示，可以通过自定义布局实现。具体步骤如下：

  1. 创建自定义布局：在resources/base/layout目录下创建一个新的XML布局文件，例如custom_title_layout.xml。

  2. 定义居中布局：在custom_title_layout.xml中，使用Text组件并设置其textAlignment属性为center，确保文本居中显示。

<Text
    ohos:id="$+id:custom_title"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:text="Title"
    ohos:textAlignment="center"
    ohos:textSize="24fp"/>
  1. 在页面中应用自定义布局：在页面的Java或Kotlin代码中，使用Navigation的setTitleComponent方法将自定义布局设置为标题。
Component customTitle = LayoutScatter.getInstance(context)
    .parse(ResourceTable.Layout_custom_title_layout, null, false);
navigationBar.setTitleComponent(customTitle);
  1. 调整Navigation样式：如果需要进一步调整Navigation的样式，可以通过Navigation的setTitleMode方法设置标题模式，或通过setTitleText方法设置文本内容。

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现Navigation的title居中显示。

回到顶部