鸿蒙Next navigation中如何通过toolbarconfiguration切换页面

在鸿蒙Next开发中，使用Navigation组件时遇到一个问题：如何通过ToolbarConfiguration实现页面切换？目前按照官方文档配置Toolbar后，点击按钮无法正确跳转到目标页面，控制台也没有报错信息。请问正确的实现方式是什么？是否需要额外绑定路由事件或修改NavigationStack？求具体代码示例和实现思路。

2 回复

在鸿蒙Next中，通过ToolbarConfiguration设置onNavigate回调，在回调里调用router.pushUrl()切换页面。比如：点击工具栏按钮，跳转到新页面。简单粗暴，代码一写，页面就蹦过去了！

更多关于鸿蒙Next navigation中如何通过toolbarconfiguration切换页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next的Navigation组件中，可以通过ToolbarConfiguration来配置导航栏，但直接切换页面通常通过NavController实现。以下是结合ToolbarConfiguration和页面切换的步骤：

1. 配置Toolbar

在Navigation的构造函数中设置ToolbarConfiguration，定义导航栏标题、按钮等：

import { Navigation, ToolbarConfiguration } from '@ohos/navigation';

// 定义Toolbar配置
const toolbarConfig: ToolbarConfiguration = {
  title: "首页",
  menus: [
    {
      value: "设置",
      action: () => {
        // 点击菜单时切换到设置页面
        navController.pushPathByName("SettingsPage");
      }
    }
  ]
};

// 创建Navigation实例
const navController = new Navigation();
const navigation = new Navigation({
  toolbarConfiguration: toolbarConfig,
  navController: navController
});

2. 切换页面

使用NavController的方法（如pushPathByName）切换页面：

// 在按钮事件或菜单action中调用
navController.pushPathByName("TargetPage"); // 跳转到目标页面

3. 完整示例

import { Navigation, ToolbarConfiguration, NavController } from '@ohos/navigation';

@Entry
@Component
struct MainPage {
  private navController: NavController = new NavController();

  build() {
    Navigation(this.navController) {
      // 页面内容
      Text("首页")
        .onClick(() => {
          // 点击切换到详情页
          this.navController.pushPathByName("DetailPage");
        })
    }
    .toolbarConfiguration({
      title: "主页",
      menus: [{
        value: "跳转",
        action: () => {
          this.navController.pushPathByName("DetailPage");
        }
      }]
    } as ToolbarConfiguration)
  }
}

关键点：

  • ToolbarConfiguration：用于配置导航栏外观和菜单行为。
  • NavController：实际处理页面导航（如pushPathByName、pop）。
  • 通过菜单事件或页面内交互触发NavController方法实现切换。

确保在Navigation组件中正确注入NavController实例，并在需要切换页面的地方调用其方法。

回到顶部