MAUI CollectionView增量加载异常：RemainingItemsCommand持续触发且滚动卡顿

一、命令持续触发的原因与修复 #

1. 缺少加载状态控制 #

当前代码未限制命令的并发执行，每次触发RemainingItemsCommand都会调用LoadMessages，添加新数据后可能再次触发阈值检测，形成循环触发的死循环。

修复：添加加载状态锁
在ViewModel中增加IsLoading属性，执行命令前先校验状态：

public partial class MessagesPageViewModel : ObservableObject
{
    public ObservableCollection<MessagesMessages> Messages { get; set; } = new();
    [ObservableProperty]
    private bool _isLoading;

    [RelayCommand]
    private async Task RemainingItems()
    {
        if (IsLoading) return;
        IsLoading = true;
        try
        {
            await LoadMessages();
        }
        finally
        {
            IsLoading = false;
        }
    }
    
    public MessagesPageViewModel(IApiService apiService)
    {
        ApiService = apiService;
        _ = LoadMessages();
    }

    private IApiService ApiService { get; }

    private async Task LoadMessages()
    {
        var newMessages = await ApiService.GetNextMessagesAsync();
        foreach (var msg in newMessages)
        {
            Messages.Add(msg);
        }
    }
}

2. 阈值设置不合理 #

RemainingItemsThreshold="0"意味着当最后一个项进入可见区域时就触发命令。如果首次加载后最后一个项刚好处于可见范围内，会立即触发命令；添加新数据后，新的最后一项可能仍处于可见状态，导致重复触发。

修复：调整阈值为提前触发的数值
根据Item高度和屏幕尺寸，设置一个提前触发的阈值（比如5），避免频繁触发：

<CollectionView Grid.Row="1" 
                Grid.Column="0" 
                Grid.ColumnSpan="2" 
                ItemsSource="{Binding Messages}" 
                SelectionMode="None" 
                BackgroundColor="{AppThemeBinding Dark=Black,Light=White}" 
                RemainingItemsThreshold="5" 
                RemainingItemsThresholdReachedCommand="{Binding RemainingItemsCommand}">

二、滚动卡顿的原因与修复 #

1. 嵌套滚动容器冲突 #

你的ItemTemplate中嵌套了ScrollView，而CollectionView本身是滚动容器，嵌套滚动会导致MAUI布局系统频繁计算布局，引发卡顿。

修复：移除Item内的ScrollView
如果Item内容不需要内部滚动，直接移除ScrollView；如果必须保留内部滚动，需设置ScrollView.IsEnabled="False"或调整布局逻辑，避免滚动冲突。

2. 异步加载与UI更新优化 #

原代码中LoadMessages使用async void，会导致异常无法捕获且可能阻塞UI线程；同时逐个添加数据到ObservableCollection会频繁触发UI更新，加剧卡顿。

修复1：替换async void为async Task
确保异步方法的规范性，避免潜在的线程问题。

修复2：批量添加数据减少UI通知
为ObservableCollection添加AddRange扩展方法，批量添加数据以减少UI更新次数：

public static class ObservableCollectionExtensions
{
    public static void AddRange<T>(this ObservableCollection<T> collection, IEnumerable<T> items)
    {
        foreach (var item in items)
        {
            collection.Add(item);
        }
        // 可选：一次性触发集合变更通知，进一步优化性能
        var args = new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Add, items.ToList());
        typeof(ObservableCollection<T>).GetMethod("OnCollectionChanged", BindingFlags.Instance | BindingFlags.NonPublic)?
            .Invoke(collection, new object[] { args });
    }
}

在LoadMessages中调用批量添加：

private async Task LoadMessages()
{
    var newMessages = await ApiService.GetNextMessagesAsync();
    Messages.AddRange(newMessages);
}

3. 启用虚拟化布局优化滚动 #

为CollectionView设置虚拟化布局，减少内存占用并提升滚动流畅度：

<CollectionView.ItemsLayout>
    <LinearItemsLayout Orientation="Vertical" ItemSpacing="8" />
</CollectionView.ItemsLayout>

三、额外注意事项 #

• 确保CollectionView没有嵌套在外部的ScrollView中，否则CollectionView的滚动检测会失效，导致阈值命令异常触发。
• 如果API请求耗时较长，可添加加载指示器，提升用户体验。

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