.NET MAUI中实现Swipe手势且不屏蔽Map原有手势的方案咨询

针对你的场景，以下是几种可行的实现方案，无需用透明BoxView遮挡Map原有手势：

方案1：直接给Map控件附加Swipe手势识别器 #

Map本身是VisualElement，支持直接添加手势识别器，.NET MAUI的手势系统会自动区分不同手势类型（Swipe、Pan、Pinch等），不会出现冲突。

XAML代码示例 #

<Map>
    <Map.GestureRecognizers>
        <!-- 保留已有的Pan、Pinch、Tap手势 -->
        <PanGestureRecognizer PanUpdated="OnMapPanUpdated" />
        <PinchGestureRecognizer PinchUpdated="OnMapPinchUpdated" />
        <TapGestureRecognizer Tapped="OnMapTapped" />
        <!-- 添加左滑切换页面的手势 -->
        <SwipeGestureRecognizer Direction="Left" Swiped="OnMapLeftSwiped" />
    </Map.GestureRecognizers>
</Map>

后台逻辑代码 #

private void OnMapLeftSwiped(object sender, SwipedEventArgs e)
{
    // 触发Shell导航切换主页面，示例为切换到指定Tab
    Shell.Current.GoToAsync("//MainTab2");
}

方案2：自定义穿透式Swipe容器 #

如果必须用叠加控件的方式，可自定义一个ContentView，重写触摸检测逻辑，只处理Swipe手势，其余触摸事件自动传递给下层Map。

自定义控件代码 #

public class PassThroughSwipeView : ContentView
{
    public static readonly BindableProperty SwipeCommandProperty =
        BindableProperty.Create(nameof(SwipeCommand), typeof(ICommand), typeof(PassThroughSwipeView));

    public ICommand SwipeCommand
    {
        get => (ICommand)GetValue(SwipeCommandProperty);
        set => SetValue(SwipeCommandProperty, value);
    }

    public PassThroughSwipeView()
    {
        var leftSwipe = new SwipeGestureRecognizer { Direction = SwipeDirection.Left };
        leftSwipe.Swiped += (s, e) => SwipeCommand?.Execute(null);
        GestureRecognizers.Add(leftSwipe);
        BackgroundColor = Colors.Transparent;
    }

    protected override HitTestResult HitTest(Point point)
    {
        // 让非Swipe的触摸事件穿透到下层控件
        return HitTestResult.Transparent;
    }
}

XAML使用示例 #

<Grid>
    <Map>
        <!-- 原有手势定义 -->
    </Map>
    <!-- 叠加自定义Swipe容器，不遮挡Map交互 -->
    <local:PassThroughSwipeView SwipeCommand="{Binding SwitchMainPageCommand}" />
</Grid>

方案3：平台原生渲染器添加Swipe手势 #

通过自定义Map的平台渲染器，直接在iOS/Android原生Map控件上添加Swipe手势，完全不影响原有Map交互逻辑。

iOS渲染器示例 #

[assembly: ExportRenderer(typeof(Map), typeof(CustomMapRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class CustomMapRenderer : MapRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Map> e)
        {
            base.OnElementChanged(e);
            if (Control == null || e.NewElement == null) return;

            var leftSwipe = new UISwipeGestureRecognizer(() =>
            {
                ((YourMapPage)Element).TriggerLeftSwipe();
            })
            {
                Direction = UISwipeGestureRecognizerDirection.Left
            };
            Control.AddGestureRecognizer(leftSwipe);
        }
    }
}

Android渲染器示例 #

[assembly: ExportRenderer(typeof(Map), typeof(CustomMapRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class CustomMapRenderer : MapRenderer
    {
        private GestureDetector _gestureDetector;
        private const int SwipeThreshold = 100;
        private const int SwipeVelocityThreshold = 100;

        public CustomMapRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<Map> e)
        {
            base.OnElementChanged(e);
            if (Control == null || e.NewElement == null) return;

            _gestureDetector = new GestureDetector(Context, new SwipeListener(this));
            Control.Touch += Control_Touch;
        }

        private void Control_Touch(object sender, View.TouchEventArgs e)
        {
            _gestureDetector.OnTouchEvent(e.Event);
            // 不标记事件已处理，让Map继续接收触摸事件
        }

        private class SwipeListener : GestureDetector.SimpleOnGestureListener
        {
            private readonly CustomMapRenderer _renderer;

            public SwipeListener(CustomMapRenderer renderer) => _renderer = renderer;

            public override bool OnFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
            {
                var diffX = e2.GetX() - e1.GetX();
                if (Math.Abs(diffX) > SwipeThreshold && Math.Abs(velocityX) > SwipeVelocityThreshold && diffX < 0)
                {
                    ((YourMapPage)_renderer.Element).TriggerLeftSwipe();
                    return true;
                }
                return false;
            }
        }
    }
}

页面触发逻辑 #

public void TriggerLeftSwipe()
{
    Shell.Current.GoToAsync("//MainTab2");
}

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