MAUI CollectionView如何显示缩略图而非原图以优化加载速度？

方案1：拍照时直接生成缩略图 #

如果是通过MAUI的MediaPicker.CapturePhotoAsync拍摄照片，可直接通过配置参数获取缩略图，无需事后处理：

var options = new MediaPickerOptions
{
    Title = "拍摄照片",
    PhotoSize = PhotoSize.Small // 可选Medium，按需选择尺寸
};
var photo = await MediaPicker.CapturePhotoAsync(options);
if (photo != null)
{
    // 直接将缩略图文件绑定到CollectionView的Image控件
    var imageSource = ImageSource.FromFile(photo.FullPath);
}

若需保留原图，可将拍摄的原图复制到本地存储，同时用上述缩略图做预览。

方案2：用SkiaSharp跨平台生成缩略图 #

SkiaSharp是MAUI官方推荐的跨平台图形库，可规避Image.Save的平台限制，实现通用的图片缩放：

1. 先在项目中安装SkiaSharp.Views.Maui.Controls NuGet包
2. 编写缩略图生成方法：

using SkiaSharp;

public async Task<Stream> GenerateThumbnailStream(string originalImagePath, int targetWidth, int targetHeight)
{
    using var originalBitmap = SKBitmap.Decode(originalImagePath);
    // 计算缩放比例，保持原图宽高比
    float scale = Math.Min((float)targetWidth / originalBitmap.Width, (float)targetHeight / originalBitmap.Height);
    int newWidth = (int)(originalBitmap.Width * scale);
    int newHeight = (int)(originalBitmap.Height * scale);
    
    using var resizedBitmap = originalBitmap.Resize(new SKImageInfo(newWidth, newHeight), SKFilterQuality.High);
    using var image = SKImage.FromBitmap(resizedBitmap);
    using var data = image.Encode(SKEncodedImageFormat.Jpeg, 80); // 80为图片质量，范围0-100
    var stream = new MemoryStream();
    data.SaveTo(stream);
    stream.Position = 0;
    return stream;
}

使用时将生成的流转为ImageSource：

var thumbnailStream = await GenerateThumbnailStream(originalPhotoPath, 200, 200);
var thumbnailSource = ImageSource.FromStream(() => thumbnailStream);

方案3：利用MAUI Image控件的自动缩放 #

MAUI的Image控件支持自动缩放大图片，只需在XAML中配置相关属性即可：

<CollectionView ItemsSource="{Binding Photos}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding OriginalPath}" 
                   Aspect="AspectFill"
                   DownsampleToViewSize="True"
                   WidthRequest="200"
                   HeightRequest="200"/>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

该方法无需额外代码，但照片数量较多时，建议提前生成缩略图缓存，避免重复缩放损耗性能。

方案4：本地缓存缩略图 #

将生成的缩略图保存到应用缓存目录，下次加载直接读取缓存，减少重复计算：

var cacheDir = FileSystem.Current.CacheDirectory;
var thumbnailFileName = $"thumbnail_{Path.GetFileName(originalImagePath)}";
var thumbnailPath = Path.Combine(cacheDir, thumbnailFileName);

if (!File.Exists(thumbnailPath))
{
    var thumbnailStream = await GenerateThumbnailStream(originalImagePath, 200, 200);
    using var fileStream = File.Create(thumbnailPath);
    await thumbnailStream.CopyToAsync(fileStream);
}

var thumbnailSource = ImageSource.FromFile(thumbnailPath);

内容的提问来源于stack exchange，提问作者Louie