如何在Xamarin CollectionView中检测滚动到底部？

问题核心 #

Xamarin CollectionView本身没有原生支持“滚动到底部”的判定能力，主要存在以下痛点：

• 虽能监听Scrolled事件、获取垂直偏移量，但无法直接获取内容的总滚动高度，没法准确判断是否到达底部
• 代码触发ScrollTo滚动到底部时，无法获取有效位置反馈；多次滚动请求仅响应最后一次，在滚动事件内发起滚动请求还会被系统忽略
• 现有公开方案多以“最后一项首个像素可见”作为触发条件，和用户感知的“真正滚到底部”体验不符（比如聊天APP的加载逻辑），且不想重构为ScrollView手动搭建列表UI

可行实现方案 #

1. 通过自定义渲染器获取内容总高度，结合滚动事件判断 #

利用平台原生控件的API获取CollectionView的内容总高度，在Scrolled事件中计算滚动偏移量 + 控件可视高度是否接近内容总高度（可加小阈值避免精度误差）。

Xamarin.Forms 端逻辑代码

private void CollectionView_Scrolled(object sender, ItemsViewScrolledEventArgs e)
{
    var cv = sender as CollectionView;
    if (cv == null) return;

    // 获取内容总高度（通过自定义渲染器实现跨平台逻辑）
    var totalContentHeight = CustomCollectionViewHelper.GetTotalContentHeight(cv);
    var visibleHeight = cv.Height;
    var scrollOffset = e.VerticalOffset;

    // 设置20的阈值，避免滚动动画或边距导致的误判
    if (scrollOffset + visibleHeight >= totalContentHeight - 20)
    {
        // 触发滚动到底部的业务逻辑，比如加载更多消息
        LoadMoreContent();
    }
}

Android 端自定义渲染器

[assembly: ExportRenderer(typeof(CollectionView), typeof(CustomCollectionViewRenderer))]
namespace YourApp.Droid.Renderers
{
    public class CustomCollectionViewRenderer : CollectionViewRenderer
    {
        public CustomCollectionViewRenderer(Context context) : base(context)
        {
        }

        public static int GetTotalContentHeight(CollectionView collectionView)
        {
            var renderer = Platform.GetRenderer(collectionView) as CustomCollectionViewRenderer;
            return renderer?.RecyclerView?.ComputeVerticalScrollRange() ?? 0;
        }
    }
}

iOS 端自定义渲染器

[assembly: ExportRenderer(typeof(CollectionView), typeof(CustomCollectionViewRenderer))]
namespace YourApp.iOS.Renderers
{
    public class CustomCollectionViewRenderer : CollectionViewRenderer
    {
        public static nfloat GetTotalContentHeight(CollectionView collectionView)
        {
            var renderer = Platform.GetRenderer(collectionView) as CustomCollectionViewRenderer;
            return renderer?.CollectionView?.ContentSize.Height ?? 0;
        }
    }
}

辅助类统一调用

public static class CustomCollectionViewHelper
{
    public static double GetTotalContentHeight(CollectionView cv)
    {
        if (DeviceInfo.Platform == DevicePlatform.Android)
        {
            return CustomCollectionViewRenderer.GetTotalContentHeight(cv);
        }
        else if (DeviceInfo.Platform == DevicePlatform.iOS)
        {
            return CustomCollectionViewRenderer.GetTotalContentHeight(cv);
        }
        return 0;
    }
}

2. 处理代码滚动后的检测问题 #

如果需要通过代码滚动到底部后准确触发逻辑，可添加延迟等待滚动动画完成，再执行检测：

private async void ScrollToBottomAndCheck()
{
    var lastItem = cv.ItemsSource.Cast<object>().LastOrDefault();
    if (lastItem == null) return;

    cv.ScrollTo(lastItem, ScrollToPosition.End, animate: true);
    // 等待滚动动画结束（时间可根据实际调整）
    await Task.Delay(200);
    // 手动触发一次底部检测
    CheckIfScrolledToBottom();
}

private void CheckIfScrolledToBottom()
{
    var totalHeight = CustomCollectionViewHelper.GetTotalContentHeight(cv);
    var visibleHeight = cv.Height;
    var scrollOffset = cv.ScrollY;

    if (scrollOffset + visibleHeight >= totalHeight - 20)
    {
        LoadMoreContent();
    }
}

注意事项 #

• 不同平台的渲染器API存在差异，需分别实现
• 阈值大小可根据UI布局调整，避免因控件内边距、滚动惯性导致误判
• 当ItemsSource更新时，需重新计算内容总高度，保证检测准确性

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