如何获取MAUI CollectionView首尾可见项？现有实现是否合理？

针对你在MAUI.Controls 9.0.40（适配iOS 17.5/18.3）中获取CollectionView可见项范围的需求，现有通过两次ScrollTo触发Scrolled事件的方式存在视觉抖动问题，以下是两种更合理的实现方案：

方案一：Loaded事件+无动画滚动（轻量跨平台） #

利用CollectionView的Loaded事件，在控件渲染完成后执行一次无动画滚动，既触发Scrolled事件获取初始可见范围，又不会产生视觉跳动。

代码实现 #

1. XAML绑定事件：

<CollectionView
    ...
    Scrolled="myCollectionView_Scrolled"
    Loaded="myCollectionView_Loaded"
    />

2. 后台逻辑：

private void myCollectionView_Loaded(object sender, EventArgs e)
{
    // 无动画滚动到第一项，触发Scrolled事件获取初始可见范围
    myCollectionView.ScrollTo(0, animate: false);
}

private void myCollectionView_Scrolled(object sender, ItemsViewScrolledEventArgs e)
{
    firstVisItem = e.FirstVisibleItemIndex;
    lastVisItem = e.LastVisibleItemIndex;
}

方案二：iOS原生自定义渲染器（精准可控） #

针对iOS平台直接调用原生UICollectionView的API获取可见单元格，无需依赖Scrolled事件的触发时机，初始化时自动获取可见范围，结果更精准。

代码实现 #

1. 创建自定义CollectionView：

public class CustomCollectionView : CollectionView
{
    public event EventHandler<VisibleItemsRangeEventArgs>? VisibleItemsRangeChanged;

    public void OnVisibleItemsRangeChanged(int firstIndex, int lastIndex)
    {
        VisibleItemsRangeChanged?.Invoke(this, new VisibleItemsRangeEventArgs(firstIndex, lastIndex));
    }
}

public class VisibleItemsRangeEventArgs : EventArgs
{
    public int FirstVisibleIndex { get; }
    public int LastVisibleIndex { get; }

    public VisibleItemsRangeEventArgs(int first, int last)
    {
        FirstVisibleIndex = first;
        LastVisibleIndex = last;
    }
}

2. iOS平台自定义渲染器：

[assembly: ExportRenderer(typeof(CustomCollectionView), typeof(CustomCollectionViewRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class CustomCollectionViewRenderer : CollectionViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ItemsView> e)
        {
            base.OnElementChanged(e);

            if (Control != null && e.NewElement is CustomCollectionView customCV)
            {
                // 监听原生滚动事件，实时更新可见范围
                Control.ScrollViewDidScroll += (sender, args) => UpdateVisibleRange(customCV);
                // 初始化时立即获取一次可见范围
                UpdateVisibleRange(customCV);
            }
        }

        private void UpdateVisibleRange(CustomCollectionView customCV)
        {
            if (Control == null) return;

            var visibleCells = Control.VisibleCells;
            if (visibleCells.Length == 0) return;

            var firstIndex = Control.IndexPathForCell(visibleCells[0]).Row;
            var lastIndex = Control.IndexPathForCell(visibleCells.Last()).Row;

            customCV.OnVisibleItemsRangeChanged(firstIndex, lastIndex);
        }
    }
}

3. XAML使用自定义控件：

<local:CustomCollectionView
    ...
    VisibleItemsRangeChanged="CustomCollectionView_VisibleItemsRangeChanged"
    />

4. 后台处理事件：

private void CustomCollectionView_VisibleItemsRangeChanged(object sender, VisibleItemsRangeEventArgs e)
{
    firstVisItem = e.FirstVisibleIndex;
    lastVisItem = e.LastVisibleIndex;
}

方案对比 #

• 方案一：实现简单，跨平台通用，适合基础场景
• 方案二：iOS专属，原生API获取结果更精准，无事件触发时机问题，适合对精度要求高的场景

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