.NET Maui - 单击当前显示的同一选项卡时重置导航堆栈

Question

我想在我的 maui shell 应用程序中为 TabBar 实现非常具体的东西。从技术上讲，用户现在可以进入该选项卡上的详细信息页面的无限循环。

RootTabPage->DetailsPage->DetailsPage->DetailsPage....我希望能够一键返回到根目录，所以..RootTabPage->DetailsPage->DetailsPage->DetailsPage->ClickOnTheSameTab->RootTabPage .

我在 stackoverflow 上找到了这段代码：.NET Maui - Reset Navigation on TabBar Item Click

但是当转到“不同”选项卡时它会删除堆栈，这不是我想要的，这是用户体验问题。 我还尝试在 TabBar 中绑定 CurrentItem，但当转到我所在的同一选项卡时它不会触发。

所以我想实现所描述的行为，即：如果我位于正在单击的同一个选项卡上，请删除此选项卡上的整个堆栈。后退按钮必须正常运行，即仅从堆栈中删除一页。

Answer 1

不幸的是，单击活动选项卡不会触发选项卡更改事件。

• 我添加了一个描述所需功能的开放提案。您是最近第二个想要实现此目的的人。未知这是否会被实施。也许有人会在这里或在毛伊岛问题/提案上提出解决方法。

• 目前，考虑在每个详细信息页面上添加一个按钮，这样
  

  Navigation.PopToRootAsync();

Answer 2

我遇到了同样的问题，我想出了一个解决方法（也可以在 ToolmakerSteve 创建的 github 问题中找到）。

1. 在平台 -> Android -> 资源中添加 MyShellRenderer.cs

using Android.Content.Res;
using Google.Android.Material.BottomNavigation;
using Microsoft.Maui.Controls.Compatibility.Platform.Android;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;

namespace YOUR_PROJECT_NAME.Platforms.Android
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }
        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new MyShellBottomNavViewAppearanceTracker();
        }
    }
    public class MyShellBottomNavViewAppearanceTracker : IShellBottomNavViewAppearanceTracker
    {
        public void Dispose()
        {
        }

        public void ResetAppearance(BottomNavigationView bottomView)
        {
        }

        public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            //example of how to change how TabBar is looking using native properties
            bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
            bottomView.BackgroundTintList = ColorStateList.ValueOf(Colors.Gray.ToAndroid());
            bottomView.ItemActiveIndicatorColor = ColorStateList.ValueOf(Colors.White.ToAndroid());
            bottomView.ItemIconTintList = ColorStateList.ValueOf(Colors.White.ToAndroid());
            bottomView.SetPadding(100, 0, 100, 0);
            
            //clear NavigationStack when the same TabBar page is selected again
            bottomView.ItemReselected += ItemReselected ;
        }

        private void ItemReselected (object sender, EventArgs e)
        {
             var navigation = Shell.Current.Navigation;
             var pages = navigation.NavigationStack;
             for (var i = pages.Count - 1; i >= 1; i--)
             {
                 navigation.RemovePage(pages[i]);
             }
        }
    }
}

2. 在 MauiProgram.cs 中添加构建器扩展的末尾

 .ConfigureMauiHandlers(handlers =>
                {
#if ANDROID
                    handlers.AddHandler(typeof(Shell), typeof(Platforms.Android.MyShellRenderer));
#endif
                });