Flutter 图片渐进式加载与缓存 CDN 插件 progressive_cached_network_image_cdn 的使用

Progressive Cached Network Image CDN

通过 cached_network_image 加载图片，并使用 ImageCDN 在服务器端调整大小。

你也可以使用 ProgressiveCachedNetworkImage 来加载渐进式图片，通过先加载小尺寸的图片并在原始图片加载完成之前显示占位符。

该插件基于 cached_network_image 插件扩展而来。

ImageCDN

你可以通过以下方法转换图片的 URL：

/// 返回 String
String ImageCDN.convertUrl(String imageUrl, {
  int? width, 
  int? height, 
  ImageCDNFit fit = ImageCDNFit.contain, 
  ImageCDNFormat format = ImageCDNFormat.webp
}) 

CachedNetworkImageCDN

这是一个基于 CachedNetworkImage 的扩展，意味着你可以使用所有与该部件相关的参数：

/// 可以使用这些参数来调整图像的大小
CachedNetworkImageCDN(
    "IMAGE_URL",
    this.resizerFormat = ImageCDNFormat.webp,
    this.resizerFit = ImageCDNFit.contain,
    this.resizerWidth,
    this.resizerHeight,
),

ProgressiveCachedNetworkImage

这是基于 CachedNetworkImageCDN 的扩展，意味着你可以使用所有与该部件相关的参数：

/// 可以使用这些参数来自定义由 ImageCDN 提供的渐进式占位符
ProgressiveCachedNetworkImage(
    "IMAGE_URL", 
    this.progressivePlaceholder,
    this.progressiveBlur = 2,
    this.progressiveErrorPlaceholder,
    this.progressiveResizeHeight,
    this.progressiveResizeWidth,
    this.progressiveResizerFit = ImageCDNFit.contain,
    this.progressiveResizerFormat = ImageCDNFormat.webp,
)

扩展

你可以直接通过添加以下代码来调整 CachedNetworkImage 的图像大小：

/// 确保已经导入插件
import 'package:progressive_cached_network_image_cdn/progressive_cached_network_image_cdn.dart';

CachedNetworkImage( ... ).resizeImage(
        width: width,
        height: height,
        fit: fit,
        format: format,
    )

示例代码

以下是完整的示例代码：

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:progressive_cached_network_image_cdn/progressive_cached_network_image_cdn.dart';

void main() {
  runApp(const MaterialApp(
    title: "Example of ProgressiveCachedNetworkImageCDN",
    home: Example(),
  ));
}

class Example extends StatelessWidget {
  const Example({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Image Network Resizer')),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: [
          Text(
              "所有这些图片的 URL 都是 1024x1024，我们以 10x10 像素的方式加载它们作为渐进式图片",
              style: Theme.of(context).textTheme.headline6),
          const Divider(),
          Wrap(
            spacing: 20,
            runSpacing: 20,
            alignment: WrapAlignment.spaceBetween,
            children: List.generate(
              10,
              (index) => Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.grey.shade100),
                width: MediaQuery.of(context).size.width / 2 - 20,
                height: 200,
                child: ProgressiveCachedNetworkImage(
                  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4EsXijhrg5-qcNei4DmxwpfifVpYX_nTTYWvrJmcFOkBZhZbyf5noPM3YKeGNPJEnC6YJksq7w_ZJbRJrC7JvtYi5ytdcwpCARY-MfoMX43uSifDaP9Jglq-rHt1pKylz86qTVjzEUXKOtfYjYKd7JujTc9Szqy_-R4xXYs_odsg2bh5zOJc0N5pw/w1024/IMG_3044.jpeg?timestamp=${DateTime.now().millisecondsSinceEpoch}$index",
                  fit: BoxFit.cover,
                  progressiveResizeHeight: 10,
                  progressiveResizeWidth: 10,
                ),
              ),
            ),
          ),
          const SizedBox(height: 30),

          /// 这个图像是 2048x2048，转换为 512x512
          Text("所有这些图片的 URL 都是 1024x1024，但我们将它们转换为 512x512",
              style: Theme.of(context).textTheme.headline6),
          const Divider(),
          Wrap(
            spacing: 20,
            runSpacing: 20,
            alignment: WrapAlignment.spaceBetween,
            children: List.generate(
              10,
              (index) => Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.grey.shade100),
                width: MediaQuery.of(context).size.width / 2 - 20,
                height: 200,
                child: CachedNetworkImageCDN(
                  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4EsXijhrg5-qcNei4DmxwpfifVpYX_nTTYWvrJmcFOkBZhZbyf5noPM3YKeGNPJEnC6YJksq7w_ZJbRJrC7JvtYi5ytdcwpCARY-MfoMX43uSifDaP9Jglq-rHt1pKylz86qTVjzEUXKOtfYjYKd7JujTc9Szqy_-R4xXYs_odsg2bh5zOJc0N5pw/w1024/IMG_3044.jpeg?timestamp=${DateTime.now().millisecondsSinceEpoch}",
                  resizerHeight: 512,
                  resizerWidth: 512,
                ),
              ),
            ),
          ),

          /// 使用 CacheNetworkImage 扩展来调整图像大小
          CachedNetworkImage(
            imageUrl:
                "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4EsXijhrg5-qcNei4DmxwpfifVpYX_nTTYWvrJmcFOkBZhZbyf5noPM3YKeGNPJEnC6YJksq7w_ZJbRJrC7JvtYi5ytdcwpCARY-MfoMX43uSifDaP9Jglq-rHt1pKylz86qTVjzEUXKOtfYjYKd7JujTc9Szqy_-R4xXYs_odsg2bh5zOJc0N5pw/w1024/IMG_3044.jpeg?timestamp=${DateTime.now().millisecondsSinceEpoch}",
          ).resizeImage(
            width: 120,
          ),

          const SizedBox(height: 50),
          Text(
              "所有图片的版权归图片所有者所有",
              style: Theme.of(context).textTheme.caption,
              textAlign: TextAlign.center),
          Text("由 @nizwar 制作",
              style: Theme.of(context).textTheme.caption,
              textAlign: TextAlign.center),
        ],
      ),
    );
  }
}