MAUI怎么实现下拉刷新 CollectionView下拉刷新教程

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

MAUI怎么实现下拉刷新 CollectionView下拉刷新教程

2025-12-16

浏览次数：次

返回列表

MAUI中CollectionView下拉刷新需用PullToRefreshLayout包裹，绑定IsRefreshing和RefreshCommand实现；XAML中设容器属性，ViewModel中用RelayCommand异步加载并更新状态，注意避免嵌套滚动容器。

maui怎么实现下拉刷新 collectionview下拉刷新教程

MAUI 中 CollectionView 本身不直接支持下拉刷新，但可以通过 PullToRefreshLayout 容器包裹来实现——这是官方推荐且最简洁的方式。

使用 PullToRefreshLayout 包裹 CollectionView

这是 MAUI 内置的刷新控件，无需第三方库，只要把 CollectionView 放进 PullToRefreshLayout 里，并绑定刷新命令即可。

在 XAML 中用 PullToRefreshLayout 作为父容器，设置 IsRefreshing 和 RefreshCommand
IsRefreshing 控制刷新动画是否显示（刷新开始设为 true，结束时设为 false）
RefreshCommand 绑定到 ViewModel 中的 ICommand，里面执行数据加载逻辑

示例 XAML：

在 ViewModel 中实现刷新逻辑

需要两个关键属性：一个布尔值控制刷新状态，一个命令触发刷新。建议用 RelayCommand 配合异步操作。

达芬奇

达芬奇——你的AI创作大师

166 查看详情达芬奇

定义 IsRefreshing 属性，通知 UI 刷新动画启停
定义 RefreshCommand，执行 await 加载（如调用 API 或模拟延迟），完成后设 IsRefreshing = false
注意：刷新中再次下拉不会重复触发，框架已自动防抖

示例 C#（ViewModel 片段）：

private bool _isRefreshing;
public bool IsRefreshing
{
  get => _isRefreshing;
  set => SetProperty(ref _isRefreshing, value);
}

public ICommand RefreshCommand { get; }

public MyViewModel()
{
  RefreshCommand = new RelayCommand(async () => await ExecuteRefresh());
}

private async Task ExecuteRefresh()
{
  IsRefreshing = true;
  await Task.Delay(1500); // 模拟加载
  Items.Clear();
  foreach (var item in GenerateNewData()) Items.Add(item);
  IsRefreshing = false;
}