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

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