鸿蒙Next点击toolbaritem如何切换页面

在鸿蒙Next开发中，点击ToolbarItem后如何实现页面切换？我尝试了常规的导航方法但没成功，求具体实现代码或思路。

2 回复

鸿蒙Next里切换页面？简单！在onClick事件里调用router.pushUrl()就行，像这样：

toolbarItem.setClickedListener(component -> {
    router.pushUrl("pages/目标页面");
});

记得在module.json5里配好路由。一触即发，页面秒切！🚀

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


在鸿蒙Next（HarmonyOS NEXT）中，点击ToolbarItem切换页面通常使用Navigation组件实现。以下是具体步骤和示例代码：

实现步骤：

  1. 定义页面结构：使用@Entry和@Component装饰器创建主页面和子页面。
  2. 添加Navigation组件：在主页面中包裹内容，并设置初始页面。
  3. 创建ToolbarItem：在Navigation的toolbar属性中添加按钮。
  4. 处理点击事件：通过onClick事件调用NavDestinationStack的方法切换页面。

示例代码：

import { Navigation, ToolbarItem, NavDestinationStack } from '@kit.ArkUI';

@Entry
@Component
struct MainPage {
  private navStack: NavDestinationStack = new NavDestinationStack();

  build() {
    Navigation(this.navStack) {
      // 初始页面
      HomePage({ navStack: this.navStack })
    }
    .title('主页')
    .toolbar({
      items: [
        {
          value: '跳转到详情页',
          icon: $r('app.media.icon'), // 可选图标资源
          action: () => {
            // 点击后推入新页面
            this.navStack.push({
              component: DetailPage,
              title: '详情页'
            });
          }
        } as ToolbarItem
      ]
    })
  }
}

// 主页组件
@Component
struct HomePage {
  private navStack: NavDestinationStack;

  build() {
    Column() {
      Text('这是主页')
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
  }
}

// 详情页组件
@Component
struct DetailPage {
  build() {
    Column() {
      Text('这是详情页')
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
  }
}

关键点说明：

  • NavDestinationStack：管理页面栈，通过push()方法添加新页面，pop()返回上一页。
  • ToolbarItem配置：在action属性中定义点击逻辑，使用navStack.push()跳转。
  • 页面传参：若需传递参数，可在push()方法的参数中添加params字段。

通过以上代码，点击ToolbarItem即可从主页切换到详情页。返回操作由系统导航栏自动处理。

回到顶部