MAUI页面导航主要通过MAUI Shell实现,需在AppShell.xaml中定义TabBar/FlyoutItem/ShellContent结构,注册路由(如Routing.RegisterRoute("detail", typeof(DetailPage))),用Shell.Current.GoToAsync()跳转并支持参数传递与生命周期响应。

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 结构,再补跳转逻辑和生命周期处理,整体就很稳了。








