CarouselPage滚动导致ImageButton的Released事件无法触发求助

这个问题确实挺棘手的——Android的触摸事件拦截机制会在你按住按钮滑动Carousel时，把按钮的触摸事件给截走，导致Released事件根本没法触发，哪怕页面回弹回来也一样。不过我们有两个可靠的方案来解决这个问题：

方案一：自定义ImageButton监听触摸取消事件（推荐） #

核心思路是利用Android原生的ACTION_CANCEL触摸事件——当父控件（也就是Carousel的ViewPager）拦截触摸操作时，按钮会收到这个事件，我们可以在这里手动触发停止操作的逻辑，完美覆盖滑动回弹的场景。

步骤1：在共享项目创建自定义ImageButton #

public class CustomImageButton : ImageButton
{
    // 定义一个触摸被取消的事件
    public event EventHandler TouchCancelled;

    internal void TriggerTouchCancelled()
    {
        TouchCancelled?.Invoke(this, EventArgs.Empty);
    }
}

步骤2：在Android项目添加自定义渲染器 #

[assembly: ExportRenderer(typeof(CustomImageButton), typeof(CustomImageButtonRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class CustomImageButtonRenderer : ImageButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ImageButton> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // 监听原生触摸事件
                Control.Touch += OnButtonTouch;
            }
        }

        private void OnButtonTouch(object sender, Android.Views.View.TouchEventArgs e)
        {
            // 当触摸被取消时（比如Carousel拦截了滑动）
            if (e.Event.Action == MotionEventActions.Cancel)
            {
                var customBtn = Element as CustomImageButton;
                customBtn?.TriggerTouchCancelled();
                // 也可以直接手动触发Released事件，保持逻辑一致
                customBtn?.SendReleased();
            }
        }

        protected override void Dispose(bool disposing)
        {
            if (Control != null)
            {
                Control.Touch -= OnButtonTouch;
            }
            base.Dispose(disposing);
        }
    }
}

步骤3：替换XAML中的ImageButton并处理事件 #

<!-- 记得先引入自定义控件的命名空间 -->
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.YourPage">
    <Grid>
        <local:CustomImageButton Grid.Row="0" Grid.Column="1" 
                                 Source="up.png" 
                                 Pressed="ImageButton_OnPressed" 
                                 Released="ImageButton_OnReleased"
                                 TouchCancelled="CustomImageButton_OnTouchCancelled"
                                 BackgroundColor="Transparent" 
                                 CommandParameter="U"/>
    </Grid>
</ContentPage>

步骤4：后台统一停止逻辑 #

private void ImageButton_OnPressed(object sender, EventArgs e)
{
    StartYourOperation();
}

private void ImageButton_OnReleased(object sender, EventArgs e)
{
    StopYourOperation();
}

private void CustomImageButton_OnTouchCancelled(object sender, EventArgs e)
{
    // 和Released事件用同一个停止逻辑，避免重复代码
    StopYourOperation();
}

// 封装启动和停止操作
private void StartYourOperation()
{
    // 你的启动操作代码，比如开始动画、计时等
}

private void StopYourOperation()
{
    // 你的停止操作代码，比如结束动画、清除计时等
}

方案二：监听CarouselPage的滚动状态 #

如果不想修改按钮，也可以通过监听Carousel的滚动状态来全局停止操作，当用户开始滑动Carousel时，不管最后是否切换页面，都停止当前页面的操作。

步骤1：自定义CarouselPage #

public class CustomCarouselPage : CarouselPage
{
    public event EventHandler<ScrollStateEventArgs> ScrollStateChanged;

    internal void OnScrollStateChanged(ViewPager.ScrollState state)
    {
        ScrollStateChanged?.Invoke(this, new ScrollStateEventArgs(state));
    }
}

// 自定义事件参数传递滚动状态
public class ScrollStateEventArgs : EventArgs
{
    public ViewPager.ScrollState State { get; }

    public ScrollStateEventArgs(ViewPager.ScrollState state)
    {
        State = state;
    }
}

步骤2：Android渲染器监听ViewPager滚动 #

[assembly: ExportRenderer(typeof(CustomCarouselPage), typeof(CustomCarouselPageRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class CustomCarouselPageRenderer : CarouselPageRenderer
    {
        private ViewPager _viewPager;

        protected override void OnElementChanged(ElementChangedEventArgs<CarouselPage> e)
        {
            base.OnElementChanged(e);

            _viewPager = Control as ViewPager;
            if (_viewPager != null)
            {
                _viewPager.PageScrollStateChanged += OnPageScrollStateChanged;
            }
        }

        private void OnPageScrollStateChanged(object sender, ViewPager.PageScrollStateChangedEventArgs e)
        {
            var customCarousel = Element as CustomCarouselPage;
            customCarousel?.OnScrollStateChanged(e.State);

            // 当开始拖动时，停止当前页面的操作
            if (e.State == ViewPager.ScrollStateDragging)
            {
                if (customCarousel.CurrentPage is YourContentPage currentPage)
                {
                    currentPage.StopAllOperations();
                }
            }
        }

        protected override void Dispose(bool disposing)
        {
            if (_viewPager != null)
            {
                _viewPager.PageScrollStateChanged -= OnPageScrollStateChanged;
            }
            base.Dispose(disposing);
        }
    }
}

步骤3：在子页面添加停止方法 #

public partial class YourContentPage : ContentPage
{
    public void StopAllOperations()
    {
        // 停止当前页面所有正在运行的操作
        StopYourOperation();
    }

    // 其他代码...
}

方案对比 #

• 方案一更精准，直接针对按钮的触摸被拦截场景，适合单个按钮的情况；
• 方案二更全局，适合页面上有多个需要停止的操作，或者不想修改按钮控件的场景。

两种方案都能解决你遇到的滑动回弹后没有事件触发的问题，根据你的实际需求选择就行。

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