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

Question

在 XAML 和 C# 中使用 Xamarin.Forms（iOS 项目）我正在尝试创建一个画廊，用户可以在其中添加照片。目前我可以显示一个列表，该列表确实将照片数据绑定到每个条目，因为用户可以单击列表中的一个项目并显示正确的图像。但是我没有成功地实际显示较小版本的我的 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;
            }

        }

Answer 1

在我对我的 NLTicketPhoto 模型实施 INotifyPropertyChanged 并调整我的 PhotoUrl 和 PhotoDescription 属性以使用 OnPropertyChanged() 后，我能够使我的列表正确显示。

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

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

Issue displaying images with FlowListView & FFImageLoading in Xamarin.Forms

c#

data-binding

xamarin

ffimageloading