MVVM 实现“加载更多”：数据加载，触手可及

2023-12-09 17:20:23

早在上一章中，我们用 MVVM 深入探究了 增删改查（CRUD） 操作。然而，当面对庞大数据集时，一次性呈现所有信息往往会让用户不堪重负，也可能导致性能问题。这就是“加载更多”功能发挥作用的地方，它允许用户按需加载数据，从而提供更流畅的用户体验。

在本文中，我们将深入探究如何在 MVVM 架构中实现“加载更多”功能，以满足大型数据集的分页需求。我们将使用一个真实世界的示例——从 GitHub 获取仓库列表——来说明这个过程。

搭建数据模型

我们的数据模型是一个仓库类，它包含名称和 星标数 等属性。为了实现“加载更多”，我们引入了一个分页类，它负责管理当前页码和每页加载的数据量。

public class Repository {
    public string Name { get; set; }
    public int Stars { get; set; }
}

public class Paging {
    public int CurrentPage { get; set; }
    public int PageSize { get; set; }
}

编写 ViewModel

ViewModel 负责将数据模型公开给视图，并处理与“加载更多”相关的逻辑。它包含一个 仓库列表 的可观察集合，以及一个分页属性。

public class RepositoryListViewModel : INotifyPropertyChanged {
    private ObservableCollection<Repository> _repositories;
    private Paging _paging;

    public ObservableCollection<Repository> Repositories {
        get { return _repositories; }
        set {
            _repositories = value;
            OnPropertyChanged("Repositories");
        }
    }

    public Paging Paging {
        get { return _paging; }
        set {
            _paging = value;
            OnPropertyChanged("Paging");
        }
    }

    // 加载更多仓库
    public async Task LoadMoreAsync() {
        // 更新当前页码
        Paging.CurrentPage++;

        // 加载数据
        var newRepositories = await LoadRepositoriesAsync(Paging.CurrentPage, Paging.PageSize);

        // 将新数据添加到列表中
        foreach (var repository in newRepositories) {
            Repositories.Add(repository);
        }
    }
}

创建视图

视图负责显示仓库列表，并包含一个“加载更多”按钮，用于触发数据加载。

<Grid>
    <ListBox ItemsSource="{Binding Repositories}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Name}" />
                    <TextBlock Text="{Binding Stars}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <Button Content="加载更多" Command="{Binding LoadMoreCommand}" />
</Grid>

绑定数据和命令

最后一步是将 ViewModel 绑定到视图，并设置“加载更多”按钮的命令绑定。

public partial class RepositoryListPage : Page {
    public RepositoryListViewModel ViewModel { get; set; }

    public RepositoryListPage() {
        InitializeComponent();

        ViewModel = new RepositoryListViewModel();
        DataContext = ViewModel;
    }
}