学习笔记(Maui 11 带参导航)

学习笔记(Maui 11 带参导航)

DailyPoetryM 项目(对应 P20 部分 P21 P22)

本节通过 DailyPoetryM 项目讲解导航服务

在这里插入图片描述

上一节重点讲述了 PagePoetryToday(今日诗词页)到 PageTodayDetail(今日诗词详情页)的导航,导航过程中不涉及传递参数;本节通过 PageResult(搜索结果页)到 PageResultDetail(搜索结果详情页)的导航学习导航过程中的参数传递。带参导航可以通过不同的技术手段实现,本节采用 QueryProperty 属性实现带参导航。

带参导航需要四个步骤:

  • 新页面接收参数
  • 旧页面发起导航并传递参数
  • 注册导航页面
  • 注册导航路径

1 新页面接收参数

1.1 ViewModelResultDetail 实现

接收参数是由 ViewModel 完成的。在中间库项目 DailyPoetryM.Library 的 ViewModels 文件夹中的添加类 ViewModelResultDetail,用来作为页面 PageResultDetail 的后台类。

public class ViewModelResultDetail : ObservableObject
{
    private Poetry _Poetry;
    public Poetry Poetry
    {
        get => _Poetry;
        set => SetProperty(ref _Poetry, value);
    }
}

属性 Poetry 用来接收传递过来的参数。QueryProperty 属性只能在 Maui 项目中使用,不能在 Library 项目上使用。所以在 Maui 主项目的文件夹 ViewModels 中添加代理类 ViewModelResultDetailProxy,实现 QueryProperty 传参。

[QueryProperty(nameof(Poetry), "parameter")]
public class ViewModelResultDetailProxy : ViewModelResultDetail
{
}

该类仅用来解决 QueryProperty 传参问题࿰

<think>好的,用户的问题是关于在.NET MAUI中实现首页导航的最佳实践。我需要先理解首页导航的具体需求,可能是指从启动页跳转到主页面,或者是应用内的页面导航结构。根据用户提供的引用资料,特别是引用[2]和[4],里面提到了创建应用和社区工具包的使用,可能需要结合这些资源。 首先,我应该回顾.NET MAUI的基本导航方式,比如Shell导航,因为Shell提供了基于URI的导航,比较适合作为首页导航的结构。然后,考虑是否需要使用导航容器,如FlyoutItem或TabBar来组织首页的不同部分。另外,引用[3]和[4]提到的社区工具包可能有辅助导航的控件或方法,需要检查是否有相关组件,比如自定义的导航栏或过渡动画。 接下来,最佳实践可能包括使用Shell来统一管理导航路由,确保页面注册正确,处理导航参数,以及优化导航性能。同时,启动画面(Splash Screen)的实现也可能相关,确保从启动到首页的过渡流畅。需要确认用户是否需要启动页到首页的导航,或者仅仅是应用内首页的结构。 还要考虑代码示例的结构,确保符合用户的要求,使用正确的代码块格式,并引用相关的资料。例如,引用[2]中的手把手教学可能涉及基本的页面创建和导航设置,而引用[4]中的示例项目可能提供更具体的实现细节。 最后,生成的相关问题需要围绕导航的扩展,比如传、动画、测试等,确保覆盖用户可能感兴趣的后续主题。需要确保回答结构清晰,分步骤说明最佳实践,并引用适当的资料作为支持。</think>### 在 .NET MAUI 中实现首页导航的最佳实践 #### 1. **使用 Shell 导航框架** .NET MAUI 的 `Shell` 是推荐的导航容器,提供基于 URI 的路由机制,支持分层导航结构(如底部选项卡、侧边栏菜单)。 **实现步骤:** - **定义 Shell 导航结构**:在 `AppShell.xaml` 中通过 `FlyoutItem` 或 `TabBar` 组织页面。 ```xml <Shell FlyoutBehavior="Disabled"> <TabBar> <Tab Title="首页" Icon="home.png"> <ShellContent Route="MainPage" ContentTemplate="{DataTemplate local:MainPage}" /> </Tab> <Tab Title="设置" Icon="settings.png"> <ShellContent Route="SettingsPage" ContentTemplate="{DataTemplate local:SettingsPage}" /> </Tab> </TabBar> </Shell> ``` - **路由注册**:在 `App.xaml.cs` 中注册页面路由: ```csharp Routing.RegisterRoute("DetailsPage", typeof(DetailsPage)); ``` - **导航操作**:通过 `Shell.Current.GoToAsync("DetailsPage")` 跳转[^2][^4]。 #### 2. **优化启动页到首页的过渡** - **配置启动画面 (Splash Screen)**:在 `Resources\Splash` 文件夹中添加 `splash_screen.png`,并在 `Platforms` 各平台项目中配置启动图。 - **延迟加载初始化逻辑**:在 `App.xaml.cs` 的 `OnStart` 方法中异步加载耗时任务,避免首页卡顿[^1]。 #### 3. **使用社区工具包增强导航** 通过 `.NET MAUI Community Toolkit` 实现复杂导航需求: - **自定义过渡动画**:使用 `NavigationExtensions` 添加页面切换动画。 ```csharp using CommunityToolkit.Maui.Core; await Navigation.ShowPopupAsync(new CustomPopup()); ``` - **简化参数传递**:利用 `Shell 的 QueryProperty` 特性或依赖注入传递数据[^3][^4]。 #### 4. **导航性能优化** - **页面懒加载**:使用 `ShellContent` 的 `ContentTemplate` 避免一次性加载所有页面。 - **避免重复实例化**:通过路由缓存 (`RegisterRoute`) 复用页面实例。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sleevefisher

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值