You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.NET MAUI Shell导航能否保留上一页状态(如NavigationPage)?

使用Shell导航保留列表页滚动位置的解决方案

可以通过Shell导航实现和NavigationPage一致的页面状态保留效果,核心是调整Shell的导航缓存策略和使用正确的导航方式,以下是具体实现步骤:

1. 启用页面导航缓存

Shell默认对Flyout/Tab的根页面启用缓存,但其他页面需要手动配置。在列表页的XAML或代码中开启导航缓存,确保页面实例不会被销毁重建:

XAML方式

在Shell的ShellContent节点中添加Shell.NavCacheMode="Enabled":

<ShellContent 
    Title="列表页" 
    ContentTemplate="{DataTemplate local:ItemsListPage}" 
    Shell.NavCacheMode="Enabled" />

代码后台方式

在列表页的构造函数中设置NavigationCacheMode:

public ItemsListPage()
{
    InitializeComponent();
    NavigationCacheMode = NavigationCacheMode.Enabled;
}

2. 使用相对导航而非绝对导航

导航到详情页时,采用相对路径的方式,避免触发页面重建:

private async void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var selectedItem = e.CurrentSelection.FirstOrDefault() as YourItemModel;
    if (selectedItem != null)
    {
        // 相对导航:推送到当前导航栈,而非重建列表页
        await Shell.Current.GoToAsync(nameof(ItemDetailPage), true, new Dictionary<string, object>
        {
            { "SelectedItem", selectedItem }
        });
    }
}

3. 详情页返回使用相对路径

从详情页返回列表页时,使用相对路径"..",确保回到缓存的列表页实例:

private async void BackButton_Clicked(object sender, EventArgs e)
{
    await Shell.Current.GoToAsync("..");
}

原理说明

Shell默认的导航行为中,未启用缓存的页面在返回时会被销毁并重新实例化,导致滚动位置和数据状态丢失。而NavigationPage默认缓存所有推入栈的页面,因此Push/Pop时状态保留。通过上述配置,让Shell缓存列表页实例,并使用相对导航维护导航栈,就能实现和NavigationPage完全一致的状态保留效果。

内容的提问来源于stack exchange,提问作者Shaher Agbarya

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.05 19:18:25