在MAUI中如何找到并使用InfiniteScrollCollection?
解决MAUI中替代Xamarin.Forms.Extended InfiniteScrollCollection的方案
方案一:手动实现无限滚动逻辑
这是最稳妥可控的方式,核心是监听CollectionView的滚动事件,判断触发加载更多的时机,配合自定义集合类管理加载状态:
- 自定义无限滚动集合类
创建继承自ObservableCollection<T>的类,封装加载状态与加载方法:
using System.Collections.ObjectModel; using System.Linq; using System.Threading.Tasks; namespace YourMauiProject; public class InfiniteScrollCollection<T> : ObservableCollection<T> { public bool IsBusy { get; set; } public bool HasMoreItems { get; set; } = true; public Func<int, Task<IEnumerable<T>>> LoadMoreFunc { get; set; } public async Task LoadMoreAsync(int pageIndex) { if (IsBusy || !HasMoreItems) return; IsBusy = true; var newItems = await LoadMoreFunc(pageIndex); if (newItems?.Any() != true) { HasMoreItems = false; } else { foreach (var item in newItems) Add(item); } IsBusy = false; } }
- 在ViewModel中配置加载逻辑
绑定集合并定义数据加载委托:
using System.Threading.Tasks; namespace YourMauiProject.ViewModels; public class YourViewModel { public InfiniteScrollCollection<YourModel> Items { get; } = new(); private readonly int _pageSize = 20; public YourViewModel() { // 替换为你的实际数据请求逻辑 Items.LoadMoreFunc = async page => { var response = await YourDataService.GetItemsAsync(page, _pageSize); return response.Data; }; } // 初始化加载第一页数据 public async Task InitializeAsync() { await Items.LoadMoreAsync(1); } }
- 页面中绑定并监听滚动事件
在XAML中配置CollectionView并添加滚动事件处理:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="YourMauiProject.Views.YourPage" BindingContext="{StaticResource YourViewModel}"> <CollectionView ItemsSource="{Binding Items}" Scrolled="CollectionView_Scrolled"> <CollectionView.ItemTemplate> <DataTemplate> <!-- 自定义列表项布局 --> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </ContentPage>
后台代码处理滚动触发逻辑:
using Microsoft.Maui.Controls; namespace YourMauiProject.Views; public partial class YourPage : ContentPage { private int _currentPage = 1; private readonly YourViewModel _viewModel; public YourPage(YourViewModel viewModel) { InitializeComponent(); _viewModel = viewModel; Loaded += async (s, e) => await _viewModel.InitializeAsync(); } private async void CollectionView_Scrolled(object sender, ItemsViewScrolledEventArgs e) { if (_viewModel.Items.IsBusy || !_viewModel.Items.HasMoreItems) return; // 设置触发加载的阈值(剩余10条时触发) var threshold = 10; var totalItems = _viewModel.Items.Count; var lastVisibleIndex = e.LastVisibleItemIndex; if (lastVisibleIndex >= totalItems - threshold) { _currentPage++; await _viewModel.Items.LoadMoreAsync(_currentPage); } } }
方案二:迁移原Xamarin.Forms.Extended的代码
Xamarin.Forms.Extended的InfiniteScrollCollection核心代码与MAUI兼容度极高,你可以直接将原库中该类的代码复制到MAUI项目中,将命名空间里的Xamarin.Forms替换为Microsoft.Maui.Controls,调整少量API差异(比如滚动相关方法)后,即可直接使用。
方案三:使用社区维护的MAUI库
在NuGet上搜索Maui Infinite Scroll相关包,比如部分社区维护的Maui.Controls.Extended类库(注意查看库的更新时间与维护状态,优先选择近期更新的包),这类库通常已适配MAUI API,可直接替代原Xamarin组件的功能。
内容的提问来源于stack exchange,提问作者Denis Humeniuk
相关产品推荐
相关产品推荐

