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

【问题标题】：Issue displaying images with FlowListView & FFImageLoading in Xamarin.Forms在 Xamarin.Forms 中使用 FlowListView 和 FFImageLoading 显示图像时出现问题
【发布时间】：2019-10-03 20:39:37
【问题描述】：

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

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

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

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

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

这是我的 TicketPageModel 的一部分

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;
            }

        }

【问题讨论】：

让你的NLTicketPhoto 模型实现INotifyPropertyChanged 接口吗？
@JackHua 没有，但我想我看不出这有什么帮助。我最初的想法是我只是想在我的 XAML 中获取错误的 url 属性，但我不确定。
@JackHua-MSFT 我明白你在说什么，现在正在尝试实施它
你解决了吗？
很高兴听到这个消息，您可以标记您的答案，以便我们可以帮助更多有相同问题的人:)。

标签： c# xamarin data-binding ffimageloading

【解决方案1】：

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

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

【讨论】：