.NET Maui - 点击TabBar项后重置导航

Question

我目前在尝试使用.NET Maui，并想知道选项卡内导航的工作原理。我在文档中没有找到我要找的内容，但如果我错过了，也许有人可以指出来。

所以，我目前有一个带有两个底部选项卡的选项卡栏。第二个选项卡显示项目列表，当我点击其中一项时，我希望显示有关所选列表项的详细信息的新页面。这按预期工作，但是如果我点击第一个选项卡，然后再次点击第二个选项卡（即列表），它不会显示列表，而是显示先前单击的项目的详细信息页面。

这是我的选项卡栏导航设置方式。

<Shell
    x:Class="AthleticAlliance.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AthleticAlliance.Views"
    Shell.FlyoutBehavior="Disabled"
    Shell.NavBarIsVisible="False">

    <TabBar>
        <Tab Title="Dashboard" Icon="home_black_24dp.svg" Route="MainPage">
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
        </Tab>
        <Tab Title="Workouts" Icon="list_black_24dp.svg" Route="workouts">
            <ShellContent ContentTemplate="{DataTemplate local:WorkoutListPage}"/>
        </Tab>
    </TabBar>
</Shell>

AppShell.xaml.cs文件中包含到详细页面的路由：

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();

        Routing.RegisterRoute(nameof(WorkoutDetailsPage), typeof(WorkoutDetailsPage));
    }
}

文档中是否有我错过的提示，或者我需要在详细页面的 OnDisappearing 方法中自行清除导航堆栈（如果可能的话，但这似乎是不正确的方式，应该更容易做到）。

提前致谢

// 更新： 根据 Jason 的评论，我找到了解决我的问题的方法。

我正在使用导航通过以下方式回到当前选项卡中的根页面

private void ImageButton_Clicked(object sender, EventArgs e)
{
    Navigation.PopToRootAsync();
}

我不知道为什么，但我试图在viewModel中完成它，但这并不起作用，因为我在那里无法访问导航。

- jhen

---

这是标准的用户体验行为 - 如果您在两个选项卡之间切换，用户期望每个选项卡的上下文保持不变，直到他们明确执行某些操作。 - Jason

当我打开详细页面时，不会显示选项卡栏（这很容易实现），并且让用户关闭页面后，他应该返回到“列表页面”，因为他是从那个页面导航到详细信息页面的，对吧？ - jhen

您可以通过Shell.Current.Navigation在视图模型中访问导航。但这会使单元测试变得困难（除非您创建包装器或某些类型来模拟Shell.Current）。 - Koji

Answer 1

这个怎么样？

protected override void OnNavigating(ShellNavigatingEventArgs args)
{
    base.OnNavigating(args);

    if (args.Source == ShellNavigationSource.ShellSectionChanged)
    {
        var navigation = Shell.Current.Navigation;
        var pages = navigation.NavigationStack;
        for (var i = pages.Count - 1; i >= 1; i--)
        {
            navigation.RemovePage(pages[i]);
        }
    }
}

- wonderboy

---

只针对有相同问题的人，将上述代码放到AppShell.xaml.cs中。此片段将从堆栈中删除所有页面，因此每次您点击选项卡都会回到初始视图。 - Isidoros Moulas