如何在MAUI中创建带加载更多与下拉刷新的ListView？

一、原生MAUI实现方案 #

无需第三方库即可完成，用RefreshView实现下拉刷新，配合CollectionView的滚动监听实现加载更多。

1. 下拉刷新（基于RefreshView） #

在XAML中将列表嵌套进RefreshView，绑定刷新状态和命令：

<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}">
    <CollectionView ItemsSource="{Binding DataList}"
                    Scrolled="CollectionView_Scrolled">
        <!-- 列表项模板 -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding Title}" Margin="10"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
        <!-- 底部加载器，默认隐藏 -->
        <CollectionView.Footer>
            <ActivityIndicator IsRunning="{Binding IsLoadingMore}"
                               IsVisible="{Binding IsLoadingMore}"
                               HorizontalOptions="Center"
                               Margin="10"/>
        </CollectionView.Footer>
    </CollectionView>
</RefreshView>

2. 加载更多（监听滚动事件） #

在后台代码中判断滚动位置，触发加载更多逻辑：

private void CollectionView_Scrolled(object sender, ItemsViewScrolledEventArgs e)
{
    var collectionView = sender as CollectionView;
    var itemCount = collectionView.ItemsSource.Cast<object>().Count();
    // 滚动到最后可见项时触发加载
    if (e.LastVisibleItemIndex >= itemCount - 1 && !ViewModel.IsLoadingMore)
    {
        ViewModel.LoadMoreCommand.Execute(null);
    }
}

3. ViewModel核心逻辑 #

用ObservableCollection维护数据，处理刷新和加载的异步逻辑：

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<ItemModel> DataList { get; set; } = new();
    
    private bool _isRefreshing;
    public bool IsRefreshing
    {
        get => _isRefreshing;
        set { _isRefreshing = value; OnPropertyChanged(); }
    }

    private bool _isLoadingMore;
    public bool IsLoadingMore
    {
        get => _isLoadingMore;
        set { _isLoadingMore = value; OnPropertyChanged(); }
    }

    public ICommand RefreshCommand => new Command(async () => await RefreshData());
    public ICommand LoadMoreCommand => new Command(async () => await LoadMoreData());

    private async Task RefreshData()
    {
        IsRefreshing = true;
        try
        {
            // 调用首页API，重置数据
            var newData = await ApiService.GetFirstPageData();
            DataList.Clear();
            foreach (var item in newData) DataList.Add(item);
        }
        catch (Exception)
        {
            // 异常处理，比如提示用户
        }
        finally
        {
            IsRefreshing = false;
        }
    }

    private async Task LoadMoreData()
    {
        IsLoadingMore = true;
        try
        {
            // 调用下一页API，追加数据
            var nextPageData = await ApiService.GetNextPageData(DataList.Count);
            foreach (var item in nextPageData) DataList.Add(item);
        }
        catch (Exception)
        {
            // 异常处理
        }
        finally
        {
            IsLoadingMore = false;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string name = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}

二、Syncfusion SfListView的正确用法（支持加载更多） #

你之前的认知有误，Syncfusion的SfListView同时支持下拉刷新和加载更多功能：

1. XAML配置 #

<syncfusion:SfListView x:Name="listView"
                       ItemsSource="{Binding DataList}"
                       AllowPullToRefresh="True"
                       IsPullToRefreshRunning="{Binding IsRefreshing}"
                       PullToRefreshCommand="{Binding RefreshCommand}"
                       LoadMoreCommand="{Binding LoadMoreCommand}"
                       IsLoadMoreRunning="{Binding IsLoadingMore}"
                       LoadMorePosition="Bottom">
    <!-- 列表项模板 -->
    <syncfusion:SfListView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding Title}" Margin="10"/>
        </DataTemplate>
    </syncfusion:SfListView.ItemTemplate>
    <!-- 自定义加载更多视图（可选） -->
    <syncfusion:SfListView.LoadMoreTemplate>
        <DataTemplate>
            <ActivityIndicator IsRunning="True" HorizontalOptions="Center" Margin="10"/>
        </DataTemplate>
    </syncfusion:SfListView.LoadMoreTemplate>
</syncfusion:SfListView>

2. ViewModel逻辑 #

与原生方案逻辑一致，只需确保IsRefreshing、IsLoadingMore及对应命令正确绑定即可，Syncfusion会自动处理滚动触发加载、下拉触发刷新的逻辑，无需手动监听滚动事件。

注意事项 #

• 加载更多时用IsLoadingMore做状态标记，避免重复触发请求
• 刷新操作需清空现有数据后再添加新数据
• API调用必须添加异常处理，防止加载状态一直停留

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