如何在 Xamarin Forms 中使用 MVVM 在 ListView 中实现增量加载（ItemAppearing）项目？

Question

我有一个ListView ，其中使用ItemAppearing增量添加项目。 我希望它通过我的ViewModel实现它。 ItemAppearing只从View.cs调用一个方法，因此，有什么方法可以在我的ViewModel类中实现它。

请注意，从View.cs添加项目时，我可以增量加载项目。 我只想从 ViewModel 加载更多项目。

这是我的 XAML 代码：

<ListView ItemsSource="{Binding JobsList}" HasUnevenRows="True" 
          SelectedItem="{Binding SelectedJob}" ItemAppearing="LoadMoreItems">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Title}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 1

如果您添加（到您的问题）有关您正在尝试做的事情的更多详细信息，那将是最好的。

以下技术模糊了“View 做什么”和“ViewModel 做什么”之间的界限 - 并将您的 View 和您的 ViewModel “紧密耦合” - 可能有更好的方法来实现您的目标。 尽管如此，这是一个有用的技术，所以我会展示它。

---

Jason 评论的详细信息“从事件处理程序调用您的 VM 方法”。

将公共方法添加到您的 VM：

public class MyVM
{
    public void MyMethod() {
        // whatever you need to do to prepare the item.
    }
}

在 LoadMoreItems 中，调用该方法：

((MyVM)BindingContext).MyMethod();

根据需要添加参数。

如果您需要“回调”到视图中的方法，请通过操作参数执行此操作：

public void MyMethod(Action<...> action) {
    ...
    action(...);
}

有关更多详细信息，请使用 google C# 将 Action 作为参数传递。

---

还有其他用于在 View 和 ViewModel 之间进行通信的技术 - 搜索有关该主题的更多信息。

Answer 2

这个答案会比较长，但你不会在其他任何地方找到它。 我已经尝试了2天。

这个答案很长，因为我已经证明了三件事：

• 将ItemAppearing绑定到Command ，然后增量加载项目。
• 从ListView选择一个项目并显示它。
• 在逐步加载新项目时显示动画。

在MVVM 中， ViewModel应该对View一无所知。 因此， ViewModel一定不知道View 中的ListView是否滚动到最后一个项目，或者是否应该在滚动时调用LoadMoreItems 。

我们需要将ItemAppearing事件转换为Command并将此 Command 绑定到ItemAppearing事件。

为此，我们需要安装Xamarin.CommunityToolkit Nuget 包。 此包由.NetFoundation 、 Xamarin Community和Microsoft 支持，并由Microsoft编写。 这是官方包，是大多数高级 Xamarin.Forms 所必需的。 在 Nuget.org 上查看更多信息，下载最新的稳定版本： https ://www.nuget.org/packages/Xamarin.CommunityToolkit（安装在您的所有项目 Shared、Android、iOS、UWP、WPF、Tizen 等中）

假设您的模型：

public class Job
{
    public int Id { get; set; }
    public string Title { get; set; }
}

现在在您的 XAML 中

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             ...
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit">

<StackLayout>
    <RefreshView IsRefreshing="{Binding IsLoading}">
        <ListView ItemsSource="{Binding JobsList}" SelectedItem="{Binding SelectedJob}">
            <ListView.Behaviors>
                <xct:EventToCommandBehavior EventName="ItemAppearing"
                                            Command="{Binding LoadMoreItemsCommand}"
                                            CommandParameter="{Binding ItemVisibilityEventArgs}"/>
            </ListView.Behaviors>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding Id}" />
                            <Label Text="{Binding Title}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

在后面的代码中将 BindingContext 设置为 ViewModel 的实例

public partial class ListPage : ContentPage
{
    ListPageViewModel ListPageVM;

    public JobsListPage()
    {
        InitializeComponent();
        ListPageVM = new ListPageViewModel();
        BindingContext = ListPageVM;
    }
}

在您的视图模型中

public class ListPageViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Models.Job> JobsList 
    { 
        get { return jobsList; }
        set { jobsList = value; OnPropertyChanged(nameof(JobsList)); }
    }

    public ICommand LoadMoreItemsCommand { get; private set; }

    // Used to show Loading Animation in Refresh View
    public bool IsLoading 
    { 
        get { return isLoading; }
        set { isLoading = value; OnPropertyChanged(nameof(IsLoading)); } 
    }

    public Models.Job SelectedJob
    {
        get { return selectedJob; }
        set
        {
            if (value != null)
            {
                selectedJob = value;
                var page = Application.Current.MainPage;
                page.DisplayAlert("Alert", $"Selected: {selectedJob.JobTitle}", "OK");
                OnPropertyChanged(nameof(SelectedJob));
            }
        }
    }

    ObservableCollection<Models.Job> jobsList;
    Models.Job selectedJob;
    bool isLoading;

    public ListPageViewModel()  // ViewModel Constructor
    {
        // Initialize your List
        JobsList = new ObservableCollection<Models.Job>
        {
            new Models.Job() { Id = 0001, Title = "Product Manager" },
            new Models.Job() { Id = 0002, Title = "Senior Executive" },
        }

        LoadMoreItemsCommand = new Command<ItemVisibilityEventArgs>(
            execute: async (ItemVisibilityEventArgs args) => 
            {
                if ((args.Item as Models.Job).Id >= JobsList[JobsList.Count - 1].Id)
                {
                    IsLoading = true;

                    for (int i = 0; i < 10; i++)
                    {
                        JobsList.Add(new Models.Job()
                        {
                            Id = JobsList.Count + 1, JobTitle = JobsList[i].Title
                        });
                    }
                    await System.Threading.Tasks.Task.Delay(2000); // Fake delay
                    IsLoading = false;
                }
            });
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}