CollectionView Xamarin.Forms 中的 RefreshView

Posted 2023-03-21

【中文标题】CollectionView Xamarin.Forms 中的 RefreshView

【英文标题】：RefreshView in CollectionView Xamarin.Forms

【发布时间】：2021-05-11 08:32:14

【问题描述】：

我试图在我的CollectionView 中使用RefreshView，但我遇到了问题。 当我在视图模型中手动更改数据时，我尝试通过下拉屏幕进行刷新，出现刷新圈但我的数据没有更新

我错过了什么吗？

这是我的代码

查看

<ContentPage.Content>
    <RefreshView IsRefreshing="Binding IsRefreshing"
                 Command="Binding RefreshCommand">
        <CollectionView ItemsSource="Binding ListOfColor"
                    Margin="10"
                    SelectionMode="Single">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid ColumnSpacing="7" RowSpacing="5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="150"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <BoxView BackgroundColor="Binding Color"
                            Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"
                            HeightRequest="60"
                            WidthRequest="60" />
                        <Label Text="Binding ColorName"
                        Grid.Column="1" Grid.Row="0"
                        TextColor="Binding Color"
                        FontAttributes="Bold"/>
                        <Label Text="Binding ColorDesc"
                        Grid.Column="1" Grid.Row="1"
                        TextColor="Binding Color"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </RefreshView>
</ContentPage.Content>

视图模型

class ColorCollectionViewModel : INotifyPropertyChanged

    const int RefreshDuration = 2;
    bool isRefreshing;

    public bool IsRefreshing
    
        get
        
            return isRefreshing;
        
        set
        
            isRefreshing = value;
            OnPropertyChanged();
        
    

    public ObservableCollection<ListColorModel> ListOfColor  get; private set; 

    public ICommand RefreshCommand => new Command(async () => await RefreshDataAsync());

    public ColorCollectionViewModel()
    
        ListOfColor = new ObservableCollection<ListColorModel>();
        NewData();
    

    void NewData()
    
        ListOfColor.Add(new ListColorModel  ColorName = "Hitam", Color = "Black", ColorDesc = "Ini Warna Hitam" );
        ListOfColor.Add(new ListColorModel  ColorName = "Coklat", Color = "Brown", ColorDesc = "Ini Warna Coklat" );
        ListOfColor.Add(new ListColorModel  ColorName = "Merah", Color = "Red", ColorDesc = "Ini Warna Merah" );
        ListOfColor.Add(new ListColorModel  ColorName = "Orange", Color = "Orange", ColorDesc = "Ini Warna Orange" );
        ListOfColor.Add(new ListColorModel  ColorName = "Kuning", Color = "Yellow", ColorDesc = "Ini Warna Kuning" );
        ListOfColor.Add(new ListColorModel  ColorName = "Hijau", Color = "Green", ColorDesc = "Ini Warna Hijau" );
        ListOfColor.Add(new ListColorModel  ColorName = "Biru", Color = "Blue", ColorDesc = "Ini Warna Blue" );
        ListOfColor.Add(new ListColorModel  ColorName = "Ungu", Color = "Purple", ColorDesc = "Ini Warna Ungu" );
        ListOfColor.Add(new ListColorModel  ColorName = "Abu-Abu", Color = "Gray", ColorDesc = "Ini Warna Abu-Abu" );
        ListOfColor.Add(new ListColorModel  ColorName = "Pink", Color = "Pink", ColorDesc = "Ini Warna Pink" );

        OnPropertyChanged(nameof(ListOfColor));
    

    async Task RefreshDataAsync()
    
        IsRefreshing = true;
        await Task.Delay(TimeSpan.FromSeconds(RefreshDuration));
        IsRefreshing = false;
    

    #region INotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged;

    void OnPropertyChanged([CallerMemberName] string propertyName = null)
    
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    
    #endregion

【问题讨论】：

你应该刷新/更新RefreshDataAsync内的数据，更新数据我的意思是改变你的ListOfColor ObservableCollection

RefreshDataAsync 实际上不会对您的数据做任何事情。你预计会发生什么？

@Cfun ：先生，你能给我示例代码吗，我必须在那里写什么，1 卡住了 2 天，我不知道我必须做什么，我尝试添加 NewData() ; IsRefreshing = false 之后；数据重复

@Jason ：我希望，当我手动更改数据时，例如我将 ColorName = "Pink" 更改为 ColorName = "Maroon" 所以当我下拉刷新时，界面中的数据从粉红色更新为栗色，有可能吗？

这不是它的工作原理。如果您的模型实现 INotifyPropertyChanged，则应立即在 UI 中更新对属性的更改。 RefreshView 通常用于从远程源加载更多数据，或从远程源刷新现有数据。

【参考方案1】：

当您拉下您绑定到 RefreshDataAsync 的 RefreshView 命令时，将执行但您没有更改其中的任何数据，请尝试以下操作：

仅供说明，它会清除所有数据并仅加载一个

    async Task RefreshDataAsync()
    
        IsRefreshing = true;
        ListOfColor.clear();
        ListOfColor.Add(new ListColorModel  ColorName = "Pink", Color = "Pink", ColorDesc = "Ini Warna Pink" );
        await Task.Delay(TimeSpan.FromSeconds(RefreshDuration));
        OnPropertyChanged(nameof(ListOfColor));
        IsRefreshing = false;
    

【讨论】：

谢谢你的插图先生，它真的帮助我理解它是如何工作的，我之前误解了，我只是调用 NewData() 方法；没有清除数据，它会使我的数据重复，让我很困惑，现在我的问题解决了，谢谢先生，所以我可以进入下一步，学习如何使用 api。

【参考方案2】：

观看此视频https://www.youtube.com/watch?v=JY900hOQCKQ 并尝试使用您可以在此处找到的 Monkey Finder 的源代码制作示例：https://github.com/jamesmontemagno/app-pretty-monkeyfinder。尝试在您的应用程序中复制该练习。 这有助于我了解 Refreshview 的工作原理。