如何在MAUI中实现垂直ScrollView的左右滑动功能？

问题本质 #

ScrollView自身会处理触摸事件以实现滚动功能，这会导致两种冲突情况：

• 父控件添加SwipeGestureRecognizer时，ScrollView会拦截触摸事件，父控件的滑动事件无法触发
• 直接给ScrollView添加SwipeGestureRecognizer时，手势识别器会抢占滚动事件，导致ScrollView无法正常滚动

解决方案1：自定义ScrollView，同时处理滚动与滑动事件 #

通过自定义ScrollView类，手动判断滑动手势并触发事件，同时保留原生滚动功能。

1. 创建自定义ScrollView类 #

using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;

namespace YourAppNamespace
{
    public class CustomScrollView : ScrollView
    {
        // 定义滑动事件
        public event EventHandler<SwipeEventArgs> SwipeLeft;
        public event EventHandler<SwipeEventArgs> SwipeRight;

        private float _startTouchX;
        // 滑动阈值，可根据需求调整
        private const float SwipeThreshold = 50f;

        protected override void OnTouchDown(MauiTouchEventArgs e)
        {
            // 记录触摸起始点X坐标
            _startTouchX = e.GetPosition(this).X;
            base.OnTouchDown(e);
        }

        protected override void OnTouchUp(MauiTouchEventArgs e)
        {
            var endTouchX = e.GetPosition(this).X;
            var deltaX = endTouchX - _startTouchX;

            // 判断是否达到滑动阈值
            if (Math.Abs(deltaX) > SwipeThreshold)
            {
                if (deltaX > 0)
                {
                    SwipeRight?.Invoke(this, new SwipeEventArgs(SwipeDirection.Right));
                }
                else
                {
                    SwipeLeft?.Invoke(this, new SwipeEventArgs(SwipeDirection.Left));
                }
            }

            base.OnTouchUp(e);
        }
    }
}

2. 在XAML中使用并绑定事件 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">
    <local:CustomScrollView SwipeLeft="CustomScrollView_SwipeLeft" SwipeRight="CustomScrollView_SwipeRight">
        <!-- ScrollView的内容 -->
        <VerticalStackLayout>
            <!-- 示例内容 -->
            <Label Text="测试内容" FontSize="Large" Margin="20"/>
            <!-- 更多内容... -->
        </VerticalStackLayout>
    </local:CustomScrollView>
</ContentPage>

3. 后台代码处理事件 #

private void CustomScrollView_SwipeLeft(object sender, SwipeEventArgs e)
{
    // 处理左滑逻辑
}

private void CustomScrollView_SwipeRight(object sender, SwipeEventArgs e)
{
    // 处理右滑逻辑
}

解决方案2：通过自定义Renderer让父控件接收触摸事件 #

针对Android平台，自定义ScrollView的Renderer，让ScrollView将触摸事件传递给父控件，这样父控件的SwipeGestureRecognizer可以正常触发，同时ScrollView保持滚动功能。

1. 创建Android平台的Renderer #

using Android.Content;
using Microsoft.Maui.Controls.Platform;
using YourAppNamespace;
using YourAppNamespace.Platforms.Android;
using View = Android.Views.View;

[assembly: ExportRenderer(typeof(CustomScrollView), typeof(CustomScrollViewRenderer))]
namespace YourAppNamespace.Platforms.Android
{
    public class CustomScrollViewRenderer : ScrollViewRenderer
    {
        public CustomScrollViewRenderer(Context context) : base(context)
        {
        }

        public override bool OnInterceptTouchEvent(Android.Views.MotionEvent e)
        {
            // 将触摸事件传递给父控件
            var parent = Parent;
            while (parent != null)
            {
                if (parent is View view)
                {
                    view.OnTouchEvent(e);
                }
                parent = parent.Parent;
            }
            // 保留ScrollView的原生滚动逻辑
            return base.OnInterceptTouchEvent(e);
        }
    }
}

2. 父控件添加SwipeGestureRecognizer #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">
    <Grid>
        <Grid.GestureRecognizers>
            <SwipeGestureRecognizer Direction="Left" Swiped="SwipeGestureRecognizer_Swiped"/>
            <SwipeGestureRecognizer Direction="Right" Swiped="SwipeGestureRecognizer_Swiped"/>
        </Grid.GestureRecognizers>

        <local:CustomScrollView>
            <!-- ScrollView内容 -->
        </local:CustomScrollView>
    </Grid>
</ContentPage>

3. 后台处理滑动事件 #

private void SwipeGestureRecognizer_Swiped(object sender, SwipedEventArgs e)
{
    switch (e.Direction)
    {
        case SwipeDirection.Left:
            // 左滑逻辑
            break;
        case SwipeDirection.Right:
            // 右滑逻辑
            break;
    }
}

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