.NET MAUI TabBar如何处理双击手势实现页面内容刷新

问题 #

使用.NET MAUI Shell TabBar时，能否处理用户双击Tab的操作？我需要用户双击Tab时触发对应页面的内容刷新，目前用官方示例创建Tab，想给Tab添加双击手势识别，现有代码如下：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Cats"
            Icon="cat.png">
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
       <Tab Title="Dogs"
            Icon="dog.png">
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </TabBar>
</Shell>

解决方案 #

由于MAUI Shell的TabBar没有原生支持双击事件，我们可以通过平台自定义渲染器实现，直接处理Android和iOS的原生Tab控件事件，完整步骤如下：

1. 自定义TabBar类 #

创建继承自TabBar的自定义类，用于定义双击事件：

using System;

namespace Xaminals
{
    public class CustomTabBar : TabBar
    {
        public event EventHandler<TabDoubleTappedEventArgs> TabDoubleTapped;

        public void OnTabDoubleTapped(string tabTitle)
        {
            TabDoubleTapped?.Invoke(this, new TabDoubleTappedEventArgs { TabTitle = tabTitle });
        }
    }

    public class TabDoubleTappedEventArgs : EventArgs
    {
        public string TabTitle { get; set; }
    }
}

2. 替换Shell中的TabBar #

修改AppShell.xaml，将默认TabBar替换为自定义的CustomTabBar：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       xmlns:local="clr-namespace:Xaminals"
       x:Class="Xaminals.AppShell">
    <local:CustomTabBar>
       <Tab Title="Cats"
            Icon="cat.png">
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
       <Tab Title="Dogs"
            Icon="dog.png">
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </local:CustomTabBar>
</Shell>

3. 实现Android平台渲染器 #

在Platforms/Android/Renderers目录下创建CustomTabBarRenderer.cs，通过BottomNavigationView的重选事件检测双击：

using AndroidX.AppCompat.Widget;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Platform.Android;
using Xaminals;
using Xaminals.Platforms.Android.Renderers;

[assembly: ExportRenderer(typeof(CustomTabBar), typeof(CustomTabBarRenderer))]
namespace Xaminals.Platforms.Android.Renderers
{
    public class CustomTabBarRenderer : ShellRenderer
    {
        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new CustomBottomNavViewAppearanceTracker(this);
        }

        private class CustomBottomNavViewAppearanceTracker : ShellBottomNavViewAppearanceTracker
        {
            private readonly CustomTabBarRenderer _renderer;
            private DateTime _lastClickTime;
            private int _lastItemId;

            public CustomBottomNavViewAppearanceTracker(CustomTabBarRenderer renderer) : base(renderer)
            {
                _renderer = renderer;
            }

            public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
            {
                base.SetAppearance(bottomView, appearance);
                bottomView.ItemReselected += OnItemReselected;
            }

            private void OnItemReselected(object sender, BottomNavigationView.ItemReselectedEventArgs e)
            {
                var now = DateTime.Now;
                // 检测双击：间隔小于300ms且是同一个Tab
                if (e.Item.ItemId == _lastItemId && (now - _lastClickTime).TotalMilliseconds < 300)
                {
                    var tabTitle = e.Item.TitleFormatted.ToString();
                    if (_renderer.Element is CustomTabBar customTabBar)
                    {
                        customTabBar.OnTabDoubleTapped(tabTitle);
                    }
                }
                _lastItemId = e.Item.ItemId;
                _lastClickTime = now;
            }
        }
    }
}

4. 实现iOS平台渲染器 #

在Platforms/iOS/Renderers目录下创建CustomTabBarRenderer.cs，给UITabBarItem添加手势识别器检测双击：

using Foundation;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Platform.iOS;
using UIKit;
using Xaminals;
using Xaminals.Platforms.iOS.Renderers;

[assembly: ExportRenderer(typeof(CustomTabBar), typeof(CustomTabBarRenderer))]
namespace Xaminals.Platforms.iOS.Renderers
{
    public class CustomTabBarRenderer : ShellRenderer
    {
        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        {
            return new CustomTabBarAppearanceTracker();
        }

        private class CustomTabBarAppearanceTracker : ShellTabBarAppearanceTracker
        {
            private DateTime _lastClickTime;
            private int _lastItemIndex;

            public override void UpdateLayout(UITabBarController controller)
            {
                base.UpdateLayout(controller);
                foreach (var item in controller.TabBar.Items)
                {
                    var tabView = item.ValueForKey(new NSString("view")) as UIView;
                    var tapGesture = new UITapGestureRecognizer(OnTabTapped);
                    tabView.AddGestureRecognizer(tapGesture);
                }
            }

            private void OnTabTapped(UITapGestureRecognizer sender)
            {
                var tabView = sender.View;
                var tabBar = tabView.Superview as UITabBar;
                var tabItem = tabView.ValueForKey(new NSString("tabBarItem")) as UITabBarItem;
                var itemIndex = Array.IndexOf(tabBar.Items, tabItem);

                var now = DateTime.Now;
                if (itemIndex == _lastItemIndex && (now - _lastClickTime).TotalMilliseconds < 300)
                {
                    var tabTitle = tabBar.Items[itemIndex].Title;
                    if (Shell.Current.CurrentItem is CustomTabBar customTabBar)
                    {
                        customTabBar.OnTabDoubleTapped(tabTitle);
                    }
                }
                _lastItemIndex = itemIndex;
                _lastClickTime = now;
            }
        }
    }
}

5. 订阅双击事件并处理页面刷新 #

在AppShell.xaml.cs中订阅自定义TabBar的双击事件，根据Tab标题触发对应页面的刷新：

using Xaminals.Views;

namespace Xaminals
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
            if (MainPage is CustomTabBar customTabBar)
            {
                customTabBar.TabDoubleTapped += CustomTabBar_TabDoubleTapped;
            }
        }

        private void CustomTabBar_TabDoubleTapped(object sender, TabDoubleTappedEventArgs e)
        {
            // 根据Tab标题匹配页面
            switch (e.TabTitle)
            {
                case "Cats":
                    if (Shell.Current.CurrentItem is Tab catTab && catTab.CurrentItem?.Content is CatsPage catsPage)
                    {
                        catsPage.RefreshContent();
                    }
                    break;
                case "Dogs":
                    if (Shell.Current.CurrentItem is Tab dogTab && dogTab.CurrentItem?.Content is DogsPage dogsPage)
                    {
                        dogsPage.RefreshContent();
                    }
                    break;
            }
        }
    }
}

6. 在页面中实现刷新方法 #

以CatsPage为例，在CatsPage.xaml.cs中添加刷新逻辑：

namespace Xaminals.Views
{
    public partial class CatsPage : ContentPage
    {
        public CatsPage()
        {
            InitializeComponent();
        }

        public void RefreshContent()
        {
            // 这里编写具体的刷新逻辑，比如重新加载数据
            // 示例：
            // var viewModel = BindingContext as CatsViewModel;
            // viewModel.LoadCatsCommand.Execute(null);
        }
    }
}

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