鸿蒙 Navigation 入门使用

2024-11-14
上海
本文字数：1646 字
阅读完需：约 5 分钟

Navigation 组件适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation 组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。

根页面设置

我们在 Entry 的入口处 Index.ets 使用 Navigation 当作根页面，这里会面临一个问题，怎么从启动页跳转到首页，并关闭启动页，使用首页一直留在页面栈中，不允许销毁，在前面的文章《鸿蒙 Navigation 处理启动页跳转到首页问题》中有介绍处理方法，在此不展开。在使用 Navigation 时，由于默认带有 TitleBar 和 Toolbar，样式不好自定义，我们直接隐藏 TitleBar 和 Toolbar，实际需要的话，可以自己实现。由于默认是 Auto 模式，以便于适配大屏设备，若我们在大屏设备上不使用分栏效果，可以强制设置单页面模式。

@Entry@ComponentV2struct Index {  nav: NavPathStack = new NavPathStack()
  build() {    Navigation(this.nav)    .mode(NavigationMode.Stack)    .hideToolBar(true)    .hideTitleBar(true)    .height('100%')    .width('100%')  }}

复制代码

系统路由表配置

接下来我们需要配置系统路由表，在 resources/base/profile 目录下新建一个 json 文件，例如 router_map.json，并在里面配置相关的路由页面，例如我们配置一个弹窗页面和一个登录页面。

{  "routerMap": [    {      "name": "dialog",      "pageSourceFile": "src/main/ets/pages/dialog/DialogPage.ets",      "buildFunction": "dialogBuilder"    },    {      "name": "login",      "pageSourceFile": "src/main/ets/pages/login/LoginPage.ets",      "buildFunction": "loginBuilder"    }  ]}

复制代码

在 routerMap 里面配置具体的页面，name 为页面名称，使用 push 打开新页面时，传的 name 名称就是这里定义的。pageSourceFile 为页面源文件，buildFunction 为页面入口 builder，通过源文件找到这个入口 builder。在 module.json5 文件中有一个 routerMap 字段，值为我们前面定义的 router_map.json

实现子页面

路由表字义好了后，我们需要实现具体的页面，这里分别实现一个弹窗页面和标准页面。弹窗示例如下，页面模式需要设置为 NavDestinationMode.DIALOG

@Builderfunction dialogBuilder() {  DialogPage()}@ComponentV2export struct DialogPage {  build() {    NavDestination() {      Stack() {        Column() {          Text('弹窗标题')          Text('弹窗内容')
          Row() {            Text('取消').layoutWeight(1)            Text('确定').layoutWeight(1)          }        }        .width('80%')        .borderRadius(16)        .backgroundColor($r('app.color.start_window_background'))      }.width('100%').height('100%')    }.hideTitleBar(true).mode(NavDestinationMode.DIALOG)  }}

复制代码

标准登录页面如下，默认为标准模式，mode 可以省略不设置

@Builderfunction loginBuilder() {  LoginPage()}@ComponentV2export struct LoginPage {  build() {    NavDestination() {      Column() {        Text('账号')        Text('密码')        Text('登录')      }    }    .width('100%')    .height('100%')    .hideTitleBar(true)  }}

复制代码

页面跳转操作

打开新页面

使用 NavPathStack 的 pushPath 或 pushPathByName 可以打开一个新页面，例如打开登录页面则是 navPathStack.pushPathByName('login', undefined)，显示一个弹窗则是 navPathStack.pushPathByName('dialog', undefined)。可以发现使用 Navigation 来实现弹窗还是非常简单的，而且可以全局显示，不依赖于具体页面以及 Context，而且弹窗还有显示隐藏等回调。

返回页面

使用 NavPathStack 的 pop 方法关闭当前页面，回到上一个页面，我们还可以使用 popToName 返回到指定的页面，也可以使用 popToIndex 返回到第几个页面，甚至还可以使用 clear 方法直接回到首页，使用起来还是非常方便的。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/bb10d3fa4502a9633becb7e2a】。文章转载请联系作者。

龙儿筝

关注

还未添加个人签名 2024-10-27 加入

还未添加个人简介

发布

暂无评论

创作场景

鸿蒙 Navigation 入门使用

根页面设置

系统路由表配置

实现子页面

页面跳转操作

打开新页面

返回页面

龙儿筝

评论