在 Xamarin 表单中显示图像的最佳方式答案

【问题标题】：Best way to display images in Xamarin Forms在 Xamarin 表单中显示图像的最佳方式
【发布时间】：2020-05-03 02:28:25
【问题描述】：

我正在开发一个 Android 应用程序，它从数据库中检索 PC 的信息，将 PC 的相关图像上传到服务器，并返回 PC 的图像 URL 以供显示。一切都像一个魅力，对于所有 3 部分，我使用 WCF 服务，部署在远程 IIS 服务器上。

图像存储在服务器的虚拟目录中，因此您可以复制 URL 并将其粘贴到浏览器中，图像显示没有问题。

当我使用图像的动态视图时，我实现了以下方法来创建它们：

private void DisplayAttechedIMages(List<string> list_images_url)
{
    for (int i = 0; i < list_images_url.Count; i++)
    {
        Image pic = new Image
        {
            HeightRequest = 250,
            WidthRequest = 150,
            Source = ImageSource.FromUri(new Uri(list_images_url[i])),
        };
    }
}

这只是我创建它们的部分，现在我需要将它们添加到容器中，我尝试在<ScrollView> 中使用<Grid>，但结果并不好，因为可视化结果低性能（滞后、低响应和糟糕的调整大小）。

我也在<TableView> 中尝试了<ViewCell>，但结果几乎相同。

此结果可能取决于设备？

那么使用 URL 显示图像的最佳方式是什么？

【问题讨论】：

为了更好的性能，你可以试试Glidex。虽然它只适用于 android 除了你需要缓存图像

标签： c# xaml xamarin xamarin.forms xamarin.android

【解决方案1】：

但结果并不好，因为可视化结果性能低下（滞后、低响应和糟糕的调整大小）。

关于延迟和低响应，这需要为 Image 缓存。并且调整大小不好，Image 内部有一个属性：

Aspect 属性决定了如何缩放图像以适应显示区域：

Fill - 拉伸图像以完全准确地填充显示区域。这可能会导致图像失真。
AspectFill - 剪辑图像，使其填充显示区域，同时保留外观（即不失真）。
AspectFit - 对图像进行信箱处理（如果需要），以使整个图像适合显示区域，并根据图像是宽还是高在顶部/底部或侧面添加空白空间。

您可以选择一个最适合您的需求。这是关于displaying images 的表格文档。

在这里，我会推荐你FFImageLoading Nuget Packaget 尝试一下，它使用缓存优化了 url 图片。

var cachedImage = new CachedImage() {
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    WidthRequest = 300,
    HeightRequest = 300,
    CacheDuration = TimeSpan.FromDays(30),
    DownsampleToViewSize = true,
    RetryCount = 0,
    RetryDelay = 250,
    BitmapOptimizations = false,
    LoadingPlaceholder = "loading.png",
    ErrorPlaceholder = "error.png",
    Source = "http://loremflickr.com/600/600/nature?filename=simple.jpg"
};

你可以参考它的official sample试试看。

【讨论】：