CollectionView 中的 RefreshView Xamarin.Forms
RefreshView in CollectionView Xamarin.Forms
我正在尝试在我的 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>
ViewModel
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
的 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;
}
观看此视频 https://www.youtube.com/watch?v=JY900hOQCKQ and try to make the example using the source code of Monkey Finder that you can find here: https://github.com/jamesmontemagno/app-pretty-monkeyfinder。尝试在您的应用程序中复制该练习。
这帮助我理解了 Refreshview 的工作原理。
我正在尝试在我的 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>
ViewModel
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
的 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;
}
观看此视频 https://www.youtube.com/watch?v=JY900hOQCKQ and try to make the example using the source code of Monkey Finder that you can find here: https://github.com/jamesmontemagno/app-pretty-monkeyfinder。尝试在您的应用程序中复制该练习。 这帮助我理解了 Refreshview 的工作原理。