MAUI中CollectionView的ThresholdReachedCommand加载完成前触发问题

核心问题分析 #

1. 页面初始化时，RefreshView触发加载，数据尚未渲染到CollectionView，但剩余项阈值（设为1）已满足触发条件，导致LoadMoreDataCommand提前执行，重复加载数据。
2. 加载更多完成后，IsLoading设为false，但列表剩余项仍低于阈值，命令会被再次触发，造成重复请求。

针对性解决方案 #

1. 修复异步操作的线程安全与状态同步 #

Search方法中使用Task.Run执行异步请求，但ObservableCollection的修改必须在UI线程，状态变量（IsLoading、IsBusy）的更新也需确保线程安全，避免UI状态混乱。修改后的Search方法：

public async void Search()
{
    try
    {
        Global.searchModel.Page = page;
        SearchResult = await _restService.PostGetRquestsAndUser(Global.searchModel);                  
        
        // 确保在UI线程更新ObservableCollection
        await MainThread.InvokeOnMainThreadAsync(() =>
        {
            foreach(GetRquestsAndUser req in SearchResult.Result)
                Requests.Add(req);
            SearchCountStr = string.Format("{0} out of {1}", Requests.Count.ToString(), SearchResult.SearchCount.ToString());
        });
        
        page++;
    }
    catch (Exception ex) 
    {
        // 自定义异常处理逻辑
    }
}

2. 动态控制剩余项阈值的触发 #

在加载过程中临时禁用RemainingItemsThreshold，避免提前触发加载更多命令。修改LoadMoreData和RefreshSearch方法：

修改LoadMoreData方法

public async void LoadMoreData()
{
    // 增加总数据量校验，已加载完所有数据时不再触发
    if (IsLoading || IsBusy || Requests.Count >= SearchResult?.SearchCount)
        return;           
    try 
    {
        IsLoading = true;
        // 临时禁用阈值触发
        RequestCollection.RemainingItemsThreshold = -1;
        await Search();
    }
    catch(Exception ex) 
    {
        // 自定义异常处理逻辑
    }
    finally 
    {
        // 恢复阈值，确保列表渲染完成后再启用
        await MainThread.InvokeOnMainThreadAsync(() =>
        {
            RequestCollection.RemainingItemsThreshold = 1;
            IsLoading = false;
        });
    }
}

修改RefreshSearch方法

public async void RefreshSearch()
{
    if (IsLoading)
        return;
    page = 0;
    Requests.Clear();
    IsBusy = true;
    try
    {
        // 刷新时禁用阈值，避免数据未渲染就触发加载更多
        RequestCollection.RemainingItemsThreshold = -1;
        await Search();
    }
    catch (Exception ex) 
    {
        // 自定义异常处理逻辑
    }
    finally 
    {
        await MainThread.InvokeOnMainThreadAsync(() =>
        {
            RequestCollection.RemainingItemsThreshold = 1;
            IsBusy = false;
            IsLoading = false;
        });
    }
}

3. 优化命令实现（可选） #

改用AsyncRelayCommand（来自CommunityToolkit.Mvvm）替代普通RelayCommand，更好地处理异步操作的状态控制，避免同步方法嵌套异步导致的状态混乱：

// 声明命令
public IAsyncRelayCommand RefreshSearchCommand { get; }
public IAsyncRelayCommand LoadMoreDataCommand { get; }

// 构造函数中初始化
public YourViewModel()
{
    RefreshSearchCommand = new AsyncRelayCommand(RefreshSearchAsync);
    LoadMoreDataCommand = new AsyncRelayCommand(LoadMoreDataAsync);
}

// 异步刷新方法示例
private async Task RefreshSearchAsync()
{
    if (IsLoading)
        return;
    page = 0;
    Requests.Clear();
    IsBusy = true;
    try
    {
        RequestCollection.RemainingItemsThreshold = -1;
        Global.searchModel.Page = page;
        SearchResult = await _restService.PostGetRquestsAndUser(Global.searchModel);                  
        
        await MainThread.InvokeOnMainThreadAsync(() =>
        {
            foreach(GetRquestsAndUser req in SearchResult.Result)
                Requests.Add(req);
            SearchCountStr = string.Format("{0} out of {1}", Requests.Count.ToString(), SearchResult.SearchCount.ToString());
            RequestCollection.RemainingItemsThreshold = 1;
        });
        
        page++;
    }
    catch (Exception ex) 
    {
        // 自定义异常处理逻辑
    }
    finally 
    {
        IsBusy = false;
        IsLoading = false;
    }
}

替代方案说明 #

• 仅用CollectionView实现下拉刷新：可监听CollectionView的滚动事件，判断是否到达顶部触发刷新逻辑，但需自行处理刷新动画，不如RefreshView封装完善。
• 仅用RefreshView实现动态加载：监听RefreshView内部CollectionView的滚动事件，判断是否到达底部触发加载更多，本质与阈值逻辑类似，不如直接使用CollectionView的阈值功能便捷。

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