鸿蒙Navigation入门使用

server/2024/11/19 3:18:31/

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方法直接回到首页,使用起来还是非常方便的。


http://www.ppmy.cn/server/143061.html

相关文章

Vue2+ElementUI:用计算属性实现搜索框功能

前言: 本文代码使用vue2element UI。 输入框搜索的功能,可以在前端通过计算属性过滤实现,也可以调用后端写好的接口。本文介绍的是通过计算属性对表格数据实时过滤,后附完整代码,代码中提供的是死数据,可…

【MySQL】MySQL中的函数之JSON_REPLACE

在 MySQL 中,JSON_REPLACE() 函数用于在 JSON 文档中替换现有的值。如果指定的路径不存在,则 JSON_REPLACE() 不会修改 JSON 文档。如果需要添加新的键值对,可以使用 JSON_SET() 函数。 基本语法 JSON_REPLACE(json_doc, path, val[, path,…

React--》如何高效管理前端环境变量:开发与生产环境配置详解

在前端开发中,如何让项目在不同环境下表现得更为灵活与高效,是每个开发者必须面对的挑战,从开发阶段的调试到生产环境的优化,环境变量配置无疑是其中的关键。 env配置文件:通常用于管理项目的环境变量,环境…

java 读取 有时需要sc.nextLine();读取换行符 有时不需要sc.nextLine();读取换行符 详解

在 Java 中,使用 Scanner 类读取输入时,换行符的处理行为取决于所用的读取方法。不同方法的工作原理会影响是否需要额外调用 sc.nextLine() 来清理缓冲区中的换行符。 核心问题 根本原因:Scanner 是基于输入流工作的,而换行符&am…

Python中的with语句

with语句和上下文管理器 Python提供了 with 语句的写法,既简单又安全 文件操作的时候使用with语句可以自动调用关闭文件操作,即使出现异常也会自动关闭文件操作。 # 1、以写的方式打开文件 with open(1.txt, w) as f:# 2、读取文件内容f.write(hello wor…

关于网络安全里蜜罐的详细介绍

蜜罐的定义 蜜罐的一个定义来自间谍世界,玛塔哈里 (Mata Hari) 式的间谍将恋爱关系用作窃取秘密的方式,被描述为设置“美人计”或“蜜罐”。经常会有敌方间谍中了美人计,然后被迫交待他/她所知道的一切。 在计算机安全方面,网络…

kafka可视化管理平台-kafka-console-ui

安装包 kafka可视化管理平台 一款轻量级的kafka可视化管理平台,安装配置快捷、简单易用。 为了开发的省事,没有国际化支持,页面只支持中文展示。 用过rocketmq-console吧,对,前端展示风格跟那个有点类似。 你的安装好…

Centos安装Elasticsearch教程

网上相关的安装教程有很多,基本是官网下载、解压、启动完事了,本文主要记录个人在实际安装过程终于到的问题,如果你刚好也刷到了这篇文档,希望对你有所帮助。 操作系统版本:Centos7Elasticsearch版本:7.9.3…