入门版 鸿蒙 组件导航 (Navigation)

入门版 鸿蒙 组件导航 (Navigation)

注意:使用 DevEco Studio 运行本案例,要使用模拟器,千万不要用预览器,预览器看看 Navigation 布局还是可以的

  1. 效果:点击首页(Index)跳转到页面(MainPage)
  2. 先写 Index 和 MainPage 这两个页面
  3. 路由相关配置

Index 和 MainPage 两个页面,点击这个两个页面可以互相跳转

ts 复制代码
// src/main/ets/pages/Index.ets
@Entry
@Component
struct Index {
  // 创建导航路径栈实例,用于管理页面跳转历史
  pageStack: NavPathStack = new NavPathStack()

  build() {
    // 使用Navigation组件作为导航容器,传入pageStack管理路由
    Navigation(this.pageStack) {
      Column() {
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Blue)
      .onClick(() => {
        // 击时压入名为"MainPage"的新页面到路径栈
        this.pageStack.pushPathByName("MainPage", null);
      })
    }
  }
}
ts 复制代码
// src/main/ets/pages/MainPage.ets
// 跳转页面入口函数
@Builder
export function MainPageBuilder() {
  MainPage()
}

@Component
struct MainPage {
  pageStack: NavPathStack = new NavPathStack()

  build() {
    // 定义导航目标页面的容器
    NavDestination() {
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Brown)
    .title('MainPage')
    .onClick(() => {
      // 清空导航路径栈(用于返回首页)
      this.pageStack.clear()
    })
    // 页面就绪回调onReady
    .onReady((context: NavDestinationContext) => {
      // 从上下文中获取路径栈实例(需确保与父组件共享同一个实例)
      this.pageStack = context.pathStack
    })
  }
}

路由相关的配置

在跳转目标模块的配置文件 module.json5 添加路由表配置

ts 复制代码
// src/main/module.json5
  {
    "module" : {
      "routerMap": "$profile:route_map"
    }
  }

添加完路由配置文件地址后,需要在工程 resources/base/profile 中创建 route_map.json 文件

ts 复制代码
// src/main/resources/base/profile/router_map.json
{
  "routerMap": [
    {
      "name": "MainPage",
      "pageSourceFile": "src/main/ets/pages/MainPage.ets",
      "buildFunction": "MainPageBuilder",
      "data": {
        "description": "this is MainPage"
      }
    }
  ]
}
ts 复制代码
// src/main/resources/base/profile/main_pages.json
{
  "src": [
    "pages/Index"
  ]
}
相关推荐
小白学鸿蒙41 分钟前
鸿蒙数据库表中的数据如何导出为Excel存到系统下载目录
数据库·excel·harmonyos
爱笑的眼睛111 小时前
HarmonyOS WindowExtension深度解析:构建跨窗口交互的创新体验
华为·harmonyos
爱笑的眼睛112 小时前
HarmonyOS环境光传感器自适应:实现智能UI调光的深度实践
华为·harmonyos
爱笑的眼睛113 小时前
HarmonyOS分布式文件系统深度解析:构建跨设备无缝文件访问应用
华为·harmonyos
猫林老师3 小时前
HarmonyOS应用性能调优与内存管理实战
华为·harmonyos
星释6 小时前
鸿蒙Flutter三方库适配指南: 05.使用Windows搭建开发环境
windows·flutter·harmonyos
爱笑的眼睛1111 小时前
深入探讨HarmonyOS ArkTS中的日期时间处理技巧
华为·harmonyos
CC__xy17 小时前
《解决界面交互痛点:WaterFlow 瀑布流、双层嵌套滚动、键盘避让与跨 Ability 跳转实践》
harmonyos
ifeng091820 小时前
HarmonyOS分布式任务调度——跨设备智能任务分配与迁移
分布式·华为·harmonyos
鸿蒙小白龙1 天前
OpenHarmony蓝牙技术全解析:从设备发现到数据传输的完整流程
harmonyos·鸿蒙·鸿蒙系统·open harmony