首页 » 技术资讯 » MAUI应用开发 - 后台代码实现导航(代码导航后台页面开发)「导航源代码」

MAUI应用开发 - 后台代码实现导航(代码导航后台页面开发)「导航源代码」

南宫静远 2024-07-24 00:47:51 技术资讯 0

扫一扫用手机浏览

文章目录 [+]

上一节已介绍了视图页面导航方式,本节将介绍系后台导航代码实现APP导航相关的知识点。

注,本项目是在上节的项目代码基础上完成。

后台代码实现APP导航,第一步:注册路由,第二步执行命令实现页面跳转,如下图:

MAUI应用开发 - 后台代码实现导航(代码导航后台页面开发) MAUI应用开发 - 后台代码实现导航(代码导航后台页面开发) 技术资讯
(图片来自网络侵删)

APP页面跳转可以看成一个后进先出的栈,下图从左到右呈现关于MAUI页面入栈和出栈的过程。

要实现后台代码导航,首先需要注册路由,然后调用Shell.Current.GoToAsync实现页面跳转。

MAUI应用开发 - 后台代码实现导航(代码导航后台页面开发) MAUI应用开发 - 后台代码实现导航(代码导航后台页面开发) 技术资讯
(图片来自网络侵删)

1、路由注册

打开MAUI项目,打开AppShell.xaml.cs,在AppShell构造函数的InitializeComponent();下增加如下路由注册代:

Routing.RegisterRoute("home01page" , typeof(Home01Page) );

第一个参数"home01page":路由名称,为每一个页名起一个名称,名称建议与对应的页名同名,可以加上路径(如:pages/home01page)

第二个参数typeof(Home01Page):定义的内容页,其中Home01Page是内容页的类

2、执行命令实现页面跳转,效果如下:

首页效果图:

链接页效果图:

2.1、打开Pages/HomePage.xaml文件,增加各页面的链接按钮及后台跳代码,修改代码如下:

分别定义了管理员页、用户页、项目设置、数据管理、工作台、数据备份按钮,每个按钮都增加相关的单击事件,如:Clicked="User01PageBtnClicked",注意事件名称必须与后台代码类定义的事件方法名一致。

2.2、打开Pages/HomePage.xaml.cs代码类文件,增加各按钮跳转代码:

关键代码:await Shell.Current.GoToAsync("user01page");

await:调用的是异步方法,需要加上await,同时方法名前面也需要加上“async”

Shell.Current.GoToAsync:调用GoToAsync方法,跳转到指定的页面

user01page:第一步注册的路由名称

2.3、打开Pages/User01Page.xaml文件,增加返回首页按钮和后台返回代码,修改代码如下:

返回到上一页首页,下面两个方法效果一样:

await Shell.Current.GoToAsync("..");await Shell.Current.Navigation.PopAsync();

如果打开了多个链接页,需要直接返回到根页面(即直接返回首页),可以使用以下这个方法

await Shell.Current.Navigation.PopToRootAsync();

3、打开新页面时,如何向新页面传递参数?

3.1、打开新页面时增加传递参数

像网址参数一样传输参数

await Shell.Current.GoToAsync("Xm01Page?userid=u001&name=cici");

如果有多个参数,可以使用&符号连接,跟网址参数类似。

3.2、通过包管理引入包:CommunityToolkit.Mvvm

3.3、打开Xm01Page.xaml,将代码修改为:

3.4、打开Xm01Page.xaml.cs,将代码修改为:

3.5、点击链接的运行效果:

标签:

相关文章