`
龙儿筝
  • 浏览: 9556 次
社区版块
存档分类
最新评论

鸿蒙Navigation入门使用

阅读更多

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

根页面设置

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

@Entry
@ComponentV2
struct 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

@Builder
function dialogBuilder() {
  DialogPage()
}
@ComponentV2
export 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可以省略不设置

@Builder
function loginBuilder() {
  LoginPage()
}
@ComponentV2
export 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方法直接回到首页,使用起来还是非常方便的。

0
0
分享到:
评论

相关推荐

    ZRouter是基于鸿蒙Navigation系统路由表和Hvigor插件实现的动态路由方案,以解决模块间的耦合问题

    ZRouter是基于鸿蒙Navigation系统路由表和Hvigor插件实现的动态路由方案,以解决模块间的耦合问题

    基于鸿蒙Navigation系统路由表和Hvigor插件的动态路由方案(源码+说明文档).zip

    一款轻量级的动态路由框架,基于鸿蒙Navigation系统路由表和Hvigor插件实现的方案,可以解决多个业务模块(HAR/HSP)之间解耦和通信问题,从而实现业务复用和功能扩展。 Main Function Points 对Navigation简化使用...

    ZRouter是基于鸿蒙Navigation系统路由表和Hvigor插件实现的动态路由方案,以解决模块间的耦合与通信问题

    ZRouter是基于鸿蒙Navigation系统路由表和Hvigor插件实现的动态路由方案,以解决模块间的耦合与通信问题

    react-native 配合react-navigation 入门demo

    react-native 配合react-navigation 入门demo,使用api包括, createMaterialTopTabNavigator, createAppContainer, createBottomTabNavigator, createAppContainer,以及使用了图标react-native-vector-icons。

    HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试

    这个初级认证主要涉及HarmonyOS的基础架构、组件使用、页面跳转、权限管理、应用结构以及开发工具的使用。 1. 页面跳转分为页面内跳转和页面间跳转。页面内跳转发生在同一个Ability内部,可以通过Router或...

    Android Material Bottom Navigation使用教程

    本教程将详细介绍如何在Android项目中使用Material Design的Bottom Navigation。 Bottom Navigation是一种位于屏幕底部的导航模式,通常包含3到5个图标,每个图标对应一个主要功能区。用户可以通过点击图标在这些...

    HarmonyOS应用开发框架HarmonyOS应用开发-实现底部导航栏功能

    在 HarmonyOS 应用开发中,底部导航栏(Bottom Navigation)是用户界面设计的重要组成部分,它为用户提供了一种直观、便捷的方式,以便在多个主功能之间进行切换。本教程将深入探讨如何在 HarmonyOS 应用中实现底部...

    Android Material Design之TabLayout + NavigationView联合使用

    当TabLayout和NavigationView结合使用时,通常会在主Activity中设置一个DrawerLayout,将NavigationView和主要内容区域包含其中。内容区域可以是一个包含TabLayout和ViewPager的布局。通过这种方式,用户可以从侧滑...

    Kotlin中使用BottomNavigationView实现底部导航

    在Android应用开发中,BottomNavigationView是一个非常常用的组件,它用于在底部展示多个可选的页面,使得用户可以方便地在各个功能之间切换。Kotlin作为Google推荐的Android开发语言,其简洁的语法使得与Bottom...

    [个人实战]React Native项目中Navigation的使用

    本实战教程将详细介绍如何在React Native项目中使用Navigation。参考文档来源于https://blog.csdn.net/weixin_41044949/article/details/80017164,以下是对React Navigation的详细解读。 React Navigation是React ...

    notification 、tabbar和navigation综合使用

    在iOS应用开发中,`Notification`(通知)、`TabBar`(标签栏)和`Navigation`(导航)是三个至关重要的组件,它们共同构建了用户界面的基础架构,提供了优秀的用户体验。下面将详细介绍这三个组件以及它们在实际...

    android NavigationView的使用

    在本文中,我们将深入探讨`NavigationView`的使用方法、功能特性以及如何在实际项目中有效地集成它。 一、`NavigationView`的基本结构 `NavigationView`在XML布局中定义,它包含一个`headerLayout`(头部布局)和...

    Harmonyos博客文章.zip

    HarmonyOS,全称为鸿蒙操作系统,是华为公司自主研发的一款面向未来、全场景的分布式操作系统,旨在为各种智能设备提供统一的操作平台。HarmonyOS的核心设计理念是打破设备间的壁垒,实现跨平台、跨设备的无缝协同...

    用Fragment+Viewpager+BottomNavigationView实现界面切换

    在Activity中,使用`BottomNavigationView.OnNavigationItemSelectedListener`监听菜单项的点击事件,并在`onNavigationItemSelected`方法中根据选中的菜单项更新`ViewPager`当前显示的`Fragment`。 6. **连接...

    底部导航栏控件BottomNavigationView的使用和修改样式

    本文将详细介绍如何使用和自定义BottomNavigationView的样式。 首先,添加依赖项是使用BottomNavigationView的基础。在`build.gradle`模块文件中,我们需要引入Design Support Library: ```gradle dependencies {...

    Unity Navigation2D

    "Unity Navigation2D"着重于在2D环境中实现这一目标。 在Unity中,Navigation2D系统允许开发者为2D游戏对象设置路径规划,使它们能够自动避开障碍物找到目的地。这个系统包括几个关键组件,如NavMesh(导航网格)、...

    Andorid平台上导航栏的使用Navigation

    总结来说,Android平台上的导航栏使用Navigation组件提供了强大的功能,包括集中管理导航图、支持多种导航模式、动态导航以及深度链接和向上导航。掌握Navigation的使用不仅能提高开发效率,还能帮助构建更加健壮、...

    ROS与navigation教程.pdf

     ROS 与 navigation 教程-设置机器人使用 TF  ROS 与 navigation 教程-基本导航调试指南  ROS 与 navigation 教程-安装和配置导航包  ROS 与 navigation 教程-结合 RVIZ 与导航包  ROS 与 navigation 教程...

    BottomNavigationView去除菜单项动画效果代码

    但需要注意的是,Material Design 指南建议在 BottomNavigationView 中只使用最多三个可见项,如果确实需要展示更多,可能需要考虑其他布局策略。 如果你需要完整的代码示例或者有其他疑问,可以留下你的邮箱地址,...

    Android BottomNavigationView 的使用

    Android BottomNavigationView 的使用 Android BottomNavigationView 的使用 Android BottomNavigationView 的使用 https://blog.csdn.net/nicepainkiller/article/details/85053870 ...

Global site tag (gtag.js) - Google Analytics