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