HarmonyOS 鸿蒙Next中HMRouter如何设置默认导航栏

HarmonyOS 鸿蒙Next中HMRouter如何设置默认导航栏 【问题描述】：HMRouter如何对所有页面设置默认导航栏？目前用到的HMRouter版本是’@hadss/hmrouter":“^1.2.2”

【问题现象】：不涉及

【版本信息】：开发工具版本：DevEco Studio 6.0.2 Release、手机系统版本：mate 60 6.0.0.120、Api语言版本：6.0.0(20)

【复现代码】：不涉及

【尝试解决方案】：不涉及

7 回复

【解决方案】

  • 方案一：HMRouter支持动态修改导航栏的显示模式，可参考：HMRouter动态修改导航栏的显示模式。如何自定义导航栏样式，可参考HMNavigation容器组件的HMNavigationOption属性。
  • 方案二：通过动态注册页面路由的方式，使用Navigation默认的导航栏。示例代码如下：
    import { HMRouter, HMRouterMgr } from '@hadss/hmrouter';

@HMRouter({ pageUrl: 'MainPage', lifecycle: 'ExitAppLifecycle' })
@Component
export default struct MainPage {
  aboutToAppear(): void {
    // 动态注册页面
    const success = HMRouterMgr.registerPageBuilder({
      builder: wrapBuilder(PageOneBuilder),
      pageUrl: 'DynamicPage',
      singleton: true
    });
    console.log('注册结果:', success);
  }

  build() {
    NavDestination() {
      Column() {
        Button("DynamicPage").onClick(() => {

          HMRouterMgr.push({
            pageUrl: "DynamicPage"
          })

        }).margin(20)
      }
    }
  }
}

@Builder
export function PageOneBuilder(name: string, param: Object) {
  DynamicPage()
}

@Component
export struct DynamicPage {
  build() {
    NavDestination() {
      Column() {
        Button('动态路由页面', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)

      }.width('100%').height('100%')
    }
    .title('动态路由页面')
  }
}

更多关于HarmonyOS 鸿蒙Next中HMRouter如何设置默认导航栏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


【解决方案】

开发者您好，关于HMRouter设置导航栏的问题，您可以参考官网的示例代码：基于HMRouter的页面跳转。 其中导航栏的实现逻辑，具体位置在src/main/ets/pages/MainPage.ets#TabBarBuilder方法中。如您有其他疑问欢迎再反馈！

类似Navigation中顶部带返回按钮的默认导航栏怎么设置？

设置方法

1. 使用 navigationBarBackButtonTitle 属性

在页面配置中设置 navigationBarBackButtonTitle 属性，可以自定义返回按钮的标题。

示例代码：

Page({
  onLoad: function(options) {
    wx.setNavigationBarTitle({
      title: '当前页面标题'
    });
    wx.setNavigationBarBackButtonTitle({
      title: '返回'
    });
  }
})

2. 使用 wx.setNavigationBarTitle 和 wx.setNavigationBarBackButtonTitle API

通过调用微信小程序的 API，动态设置导航栏标题和返回按钮标题。

示例代码：

wx.setNavigationBarTitle({
  title: '详情页'
});
wx.setNavigationBarBackButtonTitle({
  title: '首页'
});

3. 在 app.json 中全局配置

在 app.json 的 window 对象中设置 navigationBarBackButtonTitle，可以全局生效。

示例配置：

{
  "window": {
    "navigationBarTitleText": "默认标题",
    "navigationBarBackButtonTitle": "返回"
  }
}

4. 在页面配置中单独设置

在每个页面的 .json 配置文件中，可以单独设置该页面的返回按钮标题。

示例配置：

{
  "navigationBarTitleText": "页面标题",
  "navigationBarBackButtonTitle": "返回"
}

注意事项

  • 返回按钮标题长度建议不超过4个汉字，避免显示不全。
  • 如果未设置 navigationBarBackButtonTitle，则默认显示前一页的标题。
  • 当页面栈中只有一个页面时，返回按钮不会显示。

兼容性

  • 微信小程序基础库版本 1.4.0 开始支持。
  • 低版本基础库会自动忽略该设置，显示默认返回按钮。

开发者你好，参考新楼层回复。

好像Navigation的有，router的没有吧

在HarmonyOS Next中，HMRouter设置默认导航栏主要通过路由配置实现。在router目录下的JSON配置文件中，为对应页面设置"hideNavigationBar": false。若需全局默认显示，可在main_pages.json中统一配置。导航栏样式（如标题、颜色）可在页面的aboutToAppear生命周期或build函数中，通过window模块的API（如setWindowSystemBarProperties）动态设置。

在HarmonyOS Next中，使用HMRouter（版本1.2.2）为所有页面设置默认导航栏，可以通过以下方式实现：

核心方案：自定义路由栈并统一配置

HMRouter本身不直接提供全局设置默认导航栏的API，但可以通过自定义路由栈（PageStack）或页面容器，并在其中统一封装导航栏组件来实现。

具体步骤：

  1. 创建自定义页面容器组件（例如 DefaultNavPage.ets）：

    • 在该组件中，固定顶部导航栏的布局和样式。
    • 使用<Stack>布局，将导航栏和页面内容（通过@Builder动态加载）叠加。
    • 示例结构：
    // DefaultNavPage.ets
[@Component](/user/Component)
export struct DefaultNavPage {
  @BuilderParam content: Builder

  build() {
    Column() {
      // 默认导航栏
      Row() {
        // 返回按钮（可绑定路由返回逻辑）
        // 标题区域
        // 其他操作按钮
      }
      .height(50)
      .width('100%')

      // 页面内容区域
      this.content()
    }
  }
}

  2. 在路由配置中统一应用容器：

    • 修改各页面的路由配置，将目标页面用DefaultNavPage包装。
    • 示例（在路由配置文件中）：
    const routes: Array<HMRouter.Route> = [
  {
    name: 'HomePage',
    component: (): any => {
      // 返回包装后的页面
      return () => DefaultNavPage({
        content: () => HomePage()
      })
    }
  },
  // 其他页面类似配置
]

  3. 动态导航栏内容调整：

    • 在DefaultNavPage中，可通过@Prop或路由参数传递标题、按钮等动态内容。
    • 结合HMRouter的路由钩子（如beforeEnter），在跳转时传递参数。

注意事项：

  • 版本兼容性：确保HMRouter 1.2.2与HarmonyOS Next API 6.0.0兼容。
  • 性能影响：统一包装组件可能轻微增加页面渲染层级，但通常可忽略。
  • 灵活覆盖：若个别页面需隐藏或自定义导航栏，可在该页面路由配置中跳过包装，或通过条件渲染控制。

替代方案（如需）：

  • 若项目已使用自定义PageStack，可直接在栈容器中集成导航栏。
  • 对于简单场景，也可考虑在每个页面单独添加导航栏组件（但维护成本较高）。

以上方案通过组件封装实现默认导航栏的全局控制，兼顾统一性和灵活性。

回到顶部