在 Xamarin.Forms 中使用 FlowListView 和 FFImageLoading 显示图像时出现问题

Question

在XAML和C#中使用Xamarin.Forms(iOS Project(中，我正在尝试创建一个图库，用户可以在其中添加照片。目前，我可以显示一个列表，该列表确实将照片数据绑定到每个条目，因为用户可以单击列表中的项目，并且将显示正确的图像。但是，我还没有成功地在我的FlowListView中实际显示图片的较小版本。我知道它必须是绑定的东西，我正在尝试从每个对象中获取图像 uri 以显示它，但我对此仍然很陌生，尤其是对 xaml 并且还没有成功这部分。

如果你能为我指出正确的方向，那就太甜了！

预期结果使用 FlowListView 和 FFImageLoading 在 2 列中显示图像

实际结果我目前能够显示一个 2 列列表，该列表将正确的对象绑定到每个项目，但我实际查看是否有任何东西的唯一方法是添加框架或为每个项目添加文本标签。

用户当前可以单击每个标签，将显示正确的图像。

这是我的工单页面模型的一部分

private void AddItems()
{
public void UpdatePhotosData()
{
//get the notes and set the source for the list to them.
photos = NLTicketPhotos.Get(_ticket).OrderByDescending(x => x.PhotoCreatedAt).ToList();
}
foreach (var i in photos)
{
Items.Add(i);
}
}
private ObservableCollection<NLTicketPhoto> _items = new ObservableCollection<NLTicketPhoto>();
public ObservableCollection<NLTicketPhoto> Items
{
get
{
return _items;
}
set
{
if (_items != value)
{
_items = value;
OnPropertyChanged(nameof(Items));
}
}
}

我的 XAML

<flv:FlowListView FlowColumnCount="2" SeparatorVisibility="Default" HasUnevenRows="True" FlowItemTapped="OnImageTapped" FlowItemsSource="{Binding Items}">
<flv:FlowListView.FlowColumnTemplate>
<DataTemplate>
<StackLayout Padding="10" Spacing="0" AutomationProperties.Name="Too Cool">
<ff:CachedImage Aspect="AspectFill" HeightRequest="30">
<ff:CachedImage.Source>
<UriImageSource Uri="{Binding Items.PhotoFileUrl}"/>
</ff:CachedImage.Source>
</ff:CachedImage>
<StackLayout Orientation="Horizontal" Padding="10" Spacing="0">
<Label HorizontalOptions="Fill" VerticalOptions="Fill" TextColor="Black" XAlign="Center" YAlign="Center" Text="Too Cool For School"/>
</StackLayout>
</StackLayout>
</DataTemplate>
</flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>

我的代码隐藏

void OnImageTapped(object sender, ItemTappedEventArgs e)
{
NLTicketPhoto photo = (NLTicketPhoto)e.Item;
//listPhotos.SelectedItem = null; //deselect the item
switch (photo.PhotoFileType)
{
case "mov":
if (photo.PhotoIsOnServer)
{
Device.OpenUri(new Uri(photo.PhotoFileName));
}
else
{
//Only watch videos after sync
DisplayAlert("Video Unavailable", string.Format("This video will be viewable after it is synced to the server."), "OK");
}
break;
case "jpg":
//View image
NLPageViewPhoto preview = new NLPageViewPhoto(photo);
Navigation.PushAsync(preview);
break;
default:
DisplayAlert("Photo Unavailable", string.Format("The photo format .{0} is currently not viewable", photo.PhotoFileType), "OK");
break;
}
}

Answer 1

一旦我实现了 INotifyPropertyChanged 到我的 NLTicketPhoto 模型并调整了我的 PhotoUrl 和 PhotoDescription 属性以使用 OnPropertyChanged(( 我就能够让我的列表正确显示。

遵循这个例子帮助了我。 https://www.c-sharpcorner.com/article/grid-view-in-xamarin-forms-using-flowlistview/