揭秘Grayskull的高效算法：嵌入式设备上的ORB特征提取与匹配-三亩地-编程学习日记

终极 .NET MAUI 导航指南：8种导航模式实战详解

【免费下载链接】maui-samplesSamples for .NET Multi-Platform App UI (.NET MAUI)项目地址: https://gitcode.com/gh_mirrors/ma/maui-samples

.NET MAUI（多平台应用 UI）是微软推出的跨平台应用开发框架，允许开发者使用 C# 和 XAML 构建在 iOS、Android、Windows 和 macOS 上运行的原生应用。导航系统是 MAUI 应用的核心组成部分，决定了用户如何在不同页面间切换和交互。本文将详细介绍 8 种常用的 .NET MAUI 导航模式，帮助开发者为应用选择最合适的导航结构。

1. 层级导航（Hierarchical Navigation）

层级导航是最基础的导航模式，通过NavigationPage实现页面的栈式管理，用户可以不断推入新页面并返回上一级。这种模式适用于需要线性流程的场景，如设置页面、详情页面等。

在 MAUI 中，通过Navigation.PushAsync(new DetailPage())导航到新页面，使用Navigation.PopAsync()返回上一页。层级导航支持页面转场动画，并自动管理导航历史。

2. 标签页导航（Tabbed Navigation）

标签页导航通过TabbedPage或 Shell 的TabBar实现，允许用户在多个同级页面间快速切换。每个标签通常对应一个功能模块，如首页、消息、个人中心等。

以下是使用 Shell 实现标签页导航的示例：

<TabBar> <Tab Title="首页" Icon="home.png"> <ShellContent ContentTemplate="{DataTemplate local:HomePage}" /> </Tab> <Tab Title="消息" Icon="message.png"> <ShellContent ContentTemplate="{DataTemplate local:MessagePage}" /> </Tab> <Tab Title="我的" Icon="profile.png"> <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}" /> </Tab> </TabBar>

标签页导航适合功能模块清晰分离的应用，用户可以通过点击底部或顶部的标签快速切换不同功能。

3. 抽屉式导航（Flyout Navigation）

抽屉式导航（也称为侧边栏导航）通过FlyoutPage或 Shell 的 Flyout 实现，用户可以通过滑动或点击按钮打开侧边菜单，选择不同的导航项。这种模式适合包含多个功能模块且需要节省屏幕空间的应用。

以下是FlyoutPage的基本结构：

<FlyoutPage> <FlyoutPage.Flyout> <local:FlyoutMenuPage /> </FlyoutPage.Flyout> <FlyoutPage.Detail> <NavigationPage> <x:Arguments> <local:HomePage /> </x:Arguments> </NavigationPage> </FlyoutPage.Detail> </FlyoutPage>

抽屉式导航可以展示更多的导航选项，同时保持主界面的简洁。

4. Shell 导航

Shell 是 .NET MAUI 引入的全新导航系统，整合了标签页、抽屉式导航和层级导航的功能，提供了更简洁的导航管理方式。Shell 通过 URI 路由实现页面导航，支持深层链接和模块化导航。

使用 Shell 导航，首先需要在AppShell.xaml中定义路由：

<Shell> <ShellContent Route="home" ContentTemplate="{DataTemplate local:HomePage}" /> <ShellContent Route="detail" ContentTemplate="{DataTemplate local:DetailPage}" /> </Shell>

然后通过Shell.Current.GoToAsync("detail")进行导航。Shell 导航简化了导航代码，提高了应用的可维护性。

5. 模态导航（Modal Navigation）

模态导航用于展示临时页面，如登录窗口、编辑表单等，用户必须完成操作或关闭模态页面才能返回上一级。通过Navigation.PushModalAsync(new LoginPage())显示模态页面，使用Navigation.PopModalAsync()关闭。

模态页面通常覆盖整个屏幕，并提供明确的关闭按钮，确保用户专注于当前任务。

6. 弹出窗口导航（Pop-up Navigation）

弹出窗口导航通过DisplayAlert、DisplayActionSheet或自定义弹窗实现，用于展示简短信息或获取用户简单输入。例如：

var result = await DisplayAlert("确认", "是否删除此项目？", "是", "否"); if (result) { // 执行删除操作 }

弹出窗口导航适合需要用户快速确认或选择的场景，不会完全中断应用流程。

7. 标题栏导航（TitleView Navigation）

标题栏导航通过自定义NavigationPage的标题栏实现，在标题栏中添加按钮、搜索框等交互元素。例如：

<NavigationPage.TitleView> <StackLayout Orientation="Horizontal"> <Label Text="我的应用" FontSize="Large" /> <Button Text="搜索" Clicked="OnSearchClicked" /> </StackLayout> </NavigationPage.TitleView>

标题栏导航可以在不占用额外屏幕空间的情况下，提供常用功能的快速访问。

8. 混合导航（Mixed Navigation）

混合导航结合了多种导航模式，以满足复杂应用的需求。例如，使用 Shell 实现标签页和抽屉式导航，在每个标签页中使用层级导航，必要时弹出模态页面。

混合导航需要合理设计导航结构，确保用户体验的一致性和直观性。

导航模式选择指南

选择合适的导航模式需要考虑应用的功能需求、用户习惯和平台特性：

层级导航：适合线性流程，如设置、详情查看
标签页导航：适合功能模块清晰分离的应用，如社交、电商
抽屉式导航：适合功能较多的应用，如工具类、企业应用
Shell 导航：推荐用于大多数 MAUI 应用，简化导航管理
模态导航：适合临时任务，如登录、编辑
弹出窗口导航：适合简短交互，如确认、选择
标题栏导航：适合添加常用功能入口
混合导航：适合复杂应用，结合多种模式

总结

.NET MAUI 提供了丰富的导航模式，开发者可以根据应用需求选择合适的导航方式。通过合理的导航设计，可以提升应用的可用性和用户体验。建议优先考虑使用 Shell 导航，它整合了多种导航功能，简化了导航代码，同时提供了良好的跨平台一致性。

要开始使用这些导航模式，可以克隆 MAUI 示例项目：

git clone https://gitcode.com/gh_mirrors/ma/maui-samples

在项目中，你可以找到各种导航模式的具体实现示例，帮助你快速掌握 .NET MAUI 导航技巧。