Avalonia怎么实现一个无限滚动的列表 Avalonia增量加载

来源:这里教程网 时间:2026-02-21 17:34:57 作者:

在 Avalonia 中实现无限滚动(也叫增量加载、懒加载)列表,核心是监听

ScrollViewer
的滚动位置变化,在接近底部时触发新数据加载,同时避免重复请求和 UI 卡顿。Avalonia 本身不内置“虚拟化+自动加载”控件(如 UWP 的
IncrementalLoadingCollection
),但可通过组合
ItemsRepeater
(推荐)或
ListBox
+ 手动滚动监听 + 分页数据源来实现。

用 ItemsRepeater + 自定义 ScrollViewer 监听(推荐)

ItemsRepeater
是 Avalonia 11+ 推荐的高性能列表控件,支持原生虚拟化,比
ListBox
更轻量、更易扩展。要实现无限滚动,需包裹它并监听其内部
ScrollViewer
ScrollChanged
事件:

在 XAML 中给
ItemsRepeater
设置
Name="repeater"
,并在代码中获取其模板内的
ScrollViewer
监听
ScrollChanged
,计算是否已滚动到距底部约 200px 内(阈值可调):
if (e.ExtentHeight - e.OffsetY - e.ViewportHeight 
触发加载逻辑(例如调用
LoadMoreAsync()
),设置
isLoading = true
防止重复触发
加载成功后,将新数据追加到绑定的
ObservableCollection<t></t>
或使用支持增量的集合(如自定义
IReadOnlyList<t></t>
包装分页结果)

用 ListBox + ScrollViewerBehavior(简化监听)

若仍在用

ListBox
,可借助 Avalonia 的
ScrollViewer.GetScrollable
或直接查找模板中的
ScrollViewer
。更简洁的方式是封装一个行为类(类似 WPF 的
Behavior<scrollviewer></scrollviewer>
):

创建
ScrollEndReachedBehavior
,暴露
Threshold
Command
属性
AttachedTo
中订阅
ScrollChanged
,判断滚动到底部附近时执行
Command
XAML 中这样使用:
<ListBox ...><br>
      <i:Interaction.Behaviors><br>
        <local:ScrollEndReachedBehavior Command="{Binding LoadMoreCommand}" Threshold="150" /><br>
      </i:Interaction.Behaviors><br>
    </ListBox>

数据层配合:支持分页的 ViewModel

UI 层只是触发器,关键在 ViewModel 如何管理状态与数据流:

维护
ObservableCollection<item> Items { get; } = new();</item>
作为绑定源
维护状态:
bool IsLoading { get; set; }
bool HasMore { get; set; } = true;
int PageIndex { get; set; } = 1;
LoadMoreCommand
执行时:检查
IsLoading || !HasMore
→ 直接返回;否则设
IsLoading = true
,调用 API 获取下一页,成功后
Items.AddRange(newItems)
,更新
PageIndex++
HasMore
(比如根据返回数量
建议搭配
ReactiveUI
使用
ReactiveCommand
自动处理执行锁和错误反馈

性能与体验优化要点

无限滚动容易引发卡顿或误触发,注意以下细节:

防抖加载:滚动事件高频触发,可在
ScrollChanged
中加简单计时器(如
DispatcherTimer
延迟 100ms 后检查),避免频繁判断
占位符/加载指示器:在最后插入一个 “正在加载…” 项(类型为
LoadingItem
),让滚动条有高度反馈;加载完成后再移除
取消冗余请求:使用
CancellationToken
取消前一次未完成的加载(尤其网络慢时)
避免 ObservableCollection 大量 Add 引发重绘:批量添加可用
Items.AddRange(...)
(需继承自支持批量的集合,或用
BeginUpdate()/EndUpdate()
扩展)

相关推荐