Question

当前，我有一个应用程序要在其布局上显示图像缩略图列表。

我能够从api端点获取json响应并将其反序列化。现在，我有一个图像对象，在该对象中，我有一个图像预览URL（缩略图）。我的问题是如何在布局中显示缩略图列表？

以下是显示图像和一些属性设置的调用方法：

private List<string> images;
public List<string> Images
{
    get { return images; }
    set { SetProperty(ref images, value); }
}

private async Task DisplayImages()
{
    var imageObj = await _mediaService.GetCatImages();


   //imageObj.Hits[i].PreviewUrl; <-- how to a reference to the previewurl but what property should it bind to?

}

此刻是我的布局：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
             x:Class="MediaViewer.Views.ContentFolderMedia">

    <flv:FlowListView FlowColumnCount="3" SeparatorVisibility="None" HasUnevenRows="false"
            FlowItemTappedCommand="{Binding ItemTappedCommand}" FlowLastTappedItem="{Binding LastTappedItem}"
            FlowItemsSource="{Binding Images}" >

        <flv:FlowListView.FlowColumnTemplate>
            <DataTemplate>
                <Label HorizontalOptions="Fill" VerticalOptions="Fill" 
                XAlign="Center" YAlign="Center"/>
            </DataTemplate>
        </flv:FlowListView.FlowColumnTemplate>

    </flv:FlowListView>
</ContentPage>

布局应该看起来像图片库（因此为什么我要使用此第三方库：https://github.com/daniel-luberda/DLToolkit.Forms.Controls）

因此，此行：FlowItemsSource="{Binding Images}应该是发生绑定的位置，但是我不确定是否正确设置该属性以使其绑定到预览URL并显示图像。这也让我觉得...通常图像源是本地图像的名称，但是如果我点击一个URL来查看图像，我是否需要在我的应用程序中进行任何转换以显示来自URL的图像？

Answer 1

您的服务返回的列表的结构是什么？假设它是List<ImageObj>。

首先，您需要更改图片类型：

private List<ImageObj> images;
public List<ImageObj> Images
{
     get { return images; }
     private set { SetProperty(ref images, value); }
}

private async Task DisplayImages()
{
    Images = await _mediaService.GetCatImages()
                                .Select(x => x.Hit)
                                .ToList();
}

然后，您已将列表正确绑定到Listview。现在，您需要在DataTemplate内添加绑定到网址的图片：

<DataTemplate>
    <Image Source="{Binding PreviewUrl}" />
</DatatTemplate>

Answer 2

您可以将FFImageLoading与FlowListView一起使用

这将使您能够从url加载图像，缓存和快速加载。

只需将其添加到您的DataTemplate并通过CachedImage Source属性进行绑定

Source="{Binding url}"

如何从api端点绑定到图像？

2 个答案: