.NET MAUI 实战教程：Part 3 - 导航系统深度解析-CSDN博客

.NET MAUI 实战教程：Part 3 - 导航系统深度解析

前言

在移动应用开发中，导航系统是连接不同页面的重要桥梁。本文将深入探讨 .NET MAUI 中的 Shell 导航系统，通过构建一个猴子详情页的案例，带你全面掌握 MAUI 应用的页面导航技术。

Shell 导航系统概述

.NET MAUI 的 Shell 导航系统基于 URI 模式，提供了强大的页面导航能力。它不仅支持简单的字符串参数传递，还能自动处理复杂对象的序列化和反序列化。

基本导航语法

await Shell.Current.GoToAsync("DetailsPage?name=james");

参数传递方式

简单参数传递：

await Shell.Current.GoToAsync("DetailsPage?name=james");

复杂对象传递：

var person = new Person { Name="James" };
await Shell.Current.GoToAsync("DetailsPage", new Dictionary<string, object>
{
    { "person", person }
});

实战：构建猴子详情页导航

第一步：创建导航命令

在 MonkeysViewModel 中添加导航命令：

[RelayCommand]
async Task GoToDetails(Monkey monkey)
{
    if (monkey == null)
        return;

    await Shell.Current.GoToAsync(nameof(DetailsPage), true, new Dictionary<string, object>
    {
        {"Monkey", monkey}
    });
}

关键点说明：

RelayCommand 特性将方法转换为可绑定命令
使用 Shell.Current.GoToAsync 进行导航
通过字典传递猴子对象参数

第二步：设置界面交互

在 MainPage.xaml 中为猴子项添加点击事件：

<Border.GestureRecognizers>
    <TapGestureRecognizer 
        Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MonkeysViewModel}}, Path=GoToDetailsCommand}"
        CommandParameter="{Binding .}"/>
</Border.GestureRecognizers>

技术要点：

使用 RelativeSource 绑定查找上级 ViewModel
CommandParameter 绑定当前数据项
通过 TapGestureRecognizer 实现点击交互

第三步：创建详情页 ViewModel

[QueryProperty(nameof(Monkey), "Monkey")]
public partial class MonkeyDetailsViewModel : BaseViewModel
{
    [ObservableProperty]
    Monkey monkey;
}

关键注解说明：

QueryProperty：定义查询参数映射
ObservableProperty：自动生成可观察属性

路由注册与依赖注入

路由注册

在 AppShell.xaml.cs 中注册路由：

Routing.RegisterRoute(nameof(DetailsPage), typeof(DetailsPage));

依赖注入配置

在 MauiProgram.cs 中配置服务：

builder.Services.AddTransient<MonkeyDetailsViewModel>();

注意：.NET 9 及以上版本简化了页面注册流程。

详情页 UI 设计

页面结构设计

<ScrollView>
    <Grid RowDefinitions="Auto,Auto,*">
        <!-- 背景和猴子图片 -->
        <BoxView BackgroundColor="{StaticResource Primary}".../>
        <Border StrokeShape="RoundRectangle 80"...>
            <Image Source="{Binding Monkey.Image}".../>
        </Border>
        
        <!-- 猴子名称 -->
        <Label Text="{Binding Monkey.Name}".../>
        
        <!-- 详细信息 -->
        <VerticalStackLayout>
            <Label Text="{Binding Monkey.Details}"/>
            <Label Text="{Binding Monkey.Location, StringFormat='Location: {0}'}"/>
            <Label Text="{Binding Monkey.Population, StringFormat='Population: {0}'}"/>
        </VerticalStackLayout>
    </Grid>
</ScrollView>

UI 设计技巧：

使用 ScrollView 确保内容可滚动
Grid 布局实现复杂界面结构
Border 控件创建圆形图片效果
StringFormat 实现格式化文本显示

最佳实践与常见问题

导航性能优化：
- 对于频繁访问的页面，考虑使用 RegisterRoute 注册
- 复杂页面建议使用延迟加载
参数传递注意事项：
- 大型对象考虑传递 ID 而非完整对象
- 敏感数据不应通过导航参数传递
导航堆栈管理：
- 使用 GoToAsync 的 animate 参数控制过渡动画
- 适时使用 GoToAsync("..") 返回上一页