Xamarin Forms iOS/Android：修改TabBarItem样式或取消默认导航功能

我之前做项目的时候刚好碰到过一模一样的痛点！默认的TabBar行为在有导航栈的场景下确实很伤用户体验——用户明明在某个子页面操作，点一下Tab就直接跳回首页，太突兀了。之前试过禁用TabBarItem的方法，结果样式全乱了，还改不回来，后来摸索出几个靠谱的解决方案，分享给你：

方案一：iOS端拦截Tab重复点击事件（推荐） #

通过自定义UITabBarControllerDelegate，拦截重复点击当前Tab的行为，避免默认的导航栈重置操作，同时完全保留TabBarItem的原有样式。

步骤如下：

1. 先定义一个自定义的TabbedPage（用来区分默认的TabbedPage）：

public class CustomTabbedPage : TabbedPage
{
    // 这里不需要额外逻辑，只是作为标记让Renderer识别
}

2. 编写iOS端的CustomRenderer：

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class CustomTabbedPageRenderer : TabbedRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            
            if (TabBarController != null)
            {
                // 替换默认的Delegate为自定义实现
                TabBarController.Delegate = new CustomTabBarDelegate(TabBarController);
            }
        }
    }

    public class CustomTabBarDelegate : UITabBarControllerDelegate
    {
        private readonly UITabBarController _tabBarController;

        public CustomTabBarDelegate(UITabBarController tabBarController)
        {
            _tabBarController = tabBarController;
        }

        public override bool ShouldSelectViewController(UITabBarController tabBarController, UIViewController viewController)
        {
            // 判断是否点击的是当前已选中的Tab
            if (viewController == _tabBarController.SelectedViewController)
            {
                // 这里可以添加自定义交互，比如滚动到页面顶部，或者什么都不做
                // 示例：如果当前页面是可滚动的，滚到顶部
                // var scrollView = viewController.View.Subviews.OfType<UIScrollView>().FirstOrDefault();
                // scrollView?.SetContentOffset(CGPoint.Zero, true);
                
                // 返回false，阻止默认的导航栈重置行为
                return false;
            }
            
            // 切换到其他Tab时，正常执行默认逻辑
            return true;
        }
    }
}

这个方案的核心是：当用户重复点击当前激活的Tab时，我们直接阻止系统的默认跳转，从而保留导航栈的当前状态，而且TabBarItem始终处于启用状态，样式完全不受影响。

方案二：Android端对应实现 #

如果你的项目需要兼容Android，同样可以通过自定义Renderer来实现相同逻辑：

1. 同样使用上面定义的CustomTabbedPage，然后编写Android端Renderer：

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            
            if (ViewPager != null)
            {
                // 监听Tab选中事件
                ViewPager.PageSelected += OnPageSelected;
            }
        }

        private void OnPageSelected(object sender, ViewPager.PageSelectedEventArgs e)
        {
            var customTabbedPage = Element as CustomTabbedPage;
            if (customTabbedPage == null) return;
            
            // 判断是否选中的是当前已激活的Tab
            if (e.Position == customTabbedPage.Children.IndexOf(customTabbedPage.CurrentPage))
            {
                // 这里可以添加自定义逻辑，比如滚动页面顶部
                // var currentNavPage = customTabbedPage.Children[e.Position] as NavigationPage;
                // if (currentNavPage?.CurrentPage is ScrollView scrollPage)
                // {
                //     scrollPage.ScrollToAsync(0, 0, true);
                // }
                
                // 不做导航栈重置操作，保持当前页面状态
                return;
            }
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing && ViewPager != null)
            {
                ViewPager.PageSelected -= OnPageSelected;
            }
            base.Dispose(disposing);
        }
    }
}

额外建议 #

如果你的需求是：点击其他Tab时正常切换，点击当前Tab时可以做一些友好交互（比如回到栈首，但给用户提示），可以在上述代码的判断逻辑里添加PopToRootAsync()，但加上一个延迟或者弹窗确认，这样既满足功能又不伤害体验。

内容的提问来源于stack exchange，提问作者Luiz Negrini