You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

在MAUI中如何找到并使用InfiniteScrollCollection?

解决MAUI中替代Xamarin.Forms.Extended InfiniteScrollCollection的方案

方案一:手动实现无限滚动逻辑

这是最稳妥可控的方式,核心是监听CollectionView的滚动事件,判断触发加载更多的时机,配合自定义集合类管理加载状态:

  1. 自定义无限滚动集合类
    创建继承自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;
    }
}
  1. 在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);
    }
}
  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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.05 03:35:30