Flutter渐进式加载图片插件progressive_image的使用

Progressive Image 是一个Flutter小部件，它通过低质量图像占位符（Low Quality Image Placeholders）逐步加载大图。以下是该插件的主要特点、安装步骤以及如何使用的详细说明。

特点 Features

• 在目标图片加载完成前显示占位符和缩略图。
• 平滑淡入动画，防止图片加载完成时突然弹出。
• 低分辨率缩略图的模糊效果，避免像素化视图。
• 在开始获取目标图片之前有效解析缩略图，以快速形成第一印象。
• 自 v2.0.0 起支持添加占位符Widget，而不仅仅是图片。

安装 Installing

要将此库作为依赖项添加到您的Flutter项目中，请按照以下步骤操作：

1. 打开项目的根目录下的 pubspec.yaml 文件，添加如下依赖：

   dependencies:
     progressive_image: ^2.0.0
   

2. 运行命令来获取包：

   $ flutter packages get
   

3. 在Dart文件中导入包：

   import 'package:progressive_image/progressive_image.dart';
   

使用 Usage

下面是一个简单的例子，展示了如何使用 ProgressiveImage 小部件：

import 'package:flutter/material.dart';
import 'package:progressive_image/progressive_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Progressive Image Example')),
        body: ProgressiveImageExample(),
      ),
    );
  }
}

class ProgressiveImageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ProgressiveImage(
        placeholder: AssetImage('assets/placeholder.jpg'), // 占位符图片
        thumbnail: NetworkImage('https://i.imgur.com/7XL923M.jpg'), // 缩略图 URL
        image: NetworkImage('https://i.imgur.com/xVS07vQ.jpg'), // 目标图片 URL
        height: 300,
        width: 500,
      ),
    );
  }
}

此外，还提供了更复杂的用法示例，例如结合不同的占位符类型（如GIF或自定义Widget），以及调整图片适应模式等高级功能。下面是几个不同的实例代码片段：

示例1：带有占位符图片

Widget get example1 => ProgressiveImage(
      placeholder: AssetImage('assets/images/placeholder.jpg'),
      thumbnail: NetworkImage('https://i.imgur.com/eOQL4jg.jpg'), // 64x36
      image: NetworkImage('https://i.imgur.com/mDQ3Qbi.jpg'), // 3842x2160
      height: 250,
      width: 500,
      fit: BoxFit.cover,
    );

示例2：带有占位符GIF

Widget get example2 => ProgressiveImage.assetNetwork(
      placeholder: 'assets/images/placeholder.gif',
      thumbnail: 'https://i.imgur.com/7XL923M.jpg', // 64x43
      image: 'https://i.imgur.com/xVS07vQ.jpg', // 3240x2160
      height: 250,
      width: 500,
      fit: BoxFit.cover,
    );

示例3：使用透明图片作为占位符

Widget get example3 => ProgressiveImage.memoryNetwork(
      placeholder: kTransparentImage,
      thumbnail: 'https://i.imgur.com/zzlvBm5.jpg', // 64x43
      image: 'https://i.imgur.com/7LxOVQf.jpg', // 3240x2160
      height: 250,
      width: 500,
    );

示例4：带有自定义占位符Widget

Widget get example4 => ProgressiveImage.custom(
      placeholderBuilder: (BuildContext context) => _customWidget,
      thumbnail: NetworkImage('https://i.imgur.com/4WRfwXm.jpg'), // 64x43
      image: NetworkImage('https://i.imgur.com/0NnZINx.jpg'), // 3240x2160
      height: 250,
      width: 500,
      fit: BoxFit.cover,
    );

Widget get _customWidget => Container(
      width: 500,
      height: 250,
      color: Color(0xFF6501E5),
      child: Center(
        child: Text(
          "Custom Placeholder",
          style: TextStyle(fontSize: 16, color: Colors.white),
        ),
      ),
    );

这些例子展示了如何根据需求灵活配置 ProgressiveImage 小部件，从而实现更加丰富和个性化的用户体验。