MAUI页面导航怎么做 MAUI Shell导航使用方法

来源:这里教程网 时间:2026-02-21 17:34:28 作者:

MAUI 页面导航主要靠 MAUI Shell 实现,它提供统一、可配置的导航结构(如底部标签栏、抽屉菜单、路由系统),比手动管理页面堆栈更简洁稳定。

Shell 基础结构怎么搭

AppShell.xaml 中定义导航层级:顶部是

Shell
根节点,内部用
TabBar
(底部标签)、
FlyoutItem
(侧边栏)或直接嵌套
ShellContent
指向页面。每个
ShellContent
ContentTemplate
绑定一个
Page
,比如
HomePage
AboutPage

给页面设置路由名(推荐在 AppShell 构造函数里注册):
Routing.RegisterRoute("detail", typeof(DetailPage));
Shell 自动为每个
ShellContent
生成默认路由,也可用
Route
属性自定义,如
Route="home"
确保 App.xaml.cs 中设置主页面为
new AppShell()

页面跳转怎么写代码

Shell.Current.GoToAsync()
触发导航,支持绝对路径(如
"//home"
回首页)和相对路径(如
"detail?id=123"
)。带参数时 URL 遵循 URI 查询格式,参数会自动注入目标页的
OnNavigatedTo()
方法或绑定到页面属性(需标记
[QueryProperty]
)。

跳转到已注册路由:
await Shell.Current.GoToAsync("detail?id=42");
返回上一页:
await Shell.Current.GoToAsync("..");
清空导航栈并跳转:
await Shell.Current.GoToAsync("//home");
(双斜杠表示重置)
在 ViewModel 中调用?推荐通过服务注入
IAsyncNavigationService
或直接访问
Shell.Current
(注意线程安全)

如何响应导航生命周期

MAUI Shell 页面可通过重写

OnNavigatedTo()
/
OnNavigatedFrom()
获取导航事件。若需接收查询参数,添加
[QueryProperty]
特性到 public 属性上,框架会自动赋值。

示例:在 DetailPage.xaml.cs 中定义
[QueryProperty("ItemId", "id")] public string ItemId { get; set; }
OnNavigatedTo()
在页面即将显示时触发,适合刷新数据;
OnNavigatedFrom()
适合保存状态或取消任务
注意:Shell 导航不会每次都新建页面实例,默认复用,所以别依赖构造函数初始化业务逻辑

自定义导航栏和标签栏样式

Shell 提供多个静态绑定属性控制外观,比如

Shell.BackgroundColor
Shell.ForegroundColor
Shell.TitleColor
,可直接写在 AppShell.xaml 的 Shell 标签上,也支持绑定到资源或动态修改。

隐藏某个页面的导航栏:
Shell.NavBarIsVisible="False"
写在对应 ShellContent 上
隐藏标签栏(如登录页不需要 tab):
Shell.TabBarIsVisible="False"
修改图标:用
Icon
属性指定 FontImageSource,支持字体图标(如 Material Icons)
文字颜色、背景色等都支持深色模式自动适配,前提是系统资源已正确定义

基本上就这些。Shell 导航不复杂但容易忽略路由注册和参数绑定细节,写之前先搭好 AppShell 结构,再补跳转逻辑和生命周期处理,整体就很稳了。

相关推荐