Flutter图片缓存与加载插件cached_network_image_plus的使用

flutter_cached_network_image_plus 是一个Flutter包，提供了一个自定义的小部件 CacheNetworkImagePlus，用于高效地加载和缓存网络图片，并支持在图片加载时显示闪烁效果（shimmer effect）。

特性

• 高效地缓存和加载网络图片。
• 支持在图片加载时显示闪烁效果。
• 可定制选项，如盒模型适应、尺寸、闪烁颜色等。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  cached_network_image_plus: ^0.0.4

使用

导入包

在你的Dart文件中导入该包：

import 'package:flutter_cached_network_image_plus/flutter_cached_network_image_plus.dart';

使用 CacheNetworkImagePlus 小部件

在你的Flutter应用中使用 CacheNetworkImagePlus 小部件：

CacheNetworkImagePlus(
  imageUrl: 'https://example.com/image.jpg',
  width: 300,
  height: 300,
  // 其他可选参数...
)

参数

• imageUrl (必需): 网络图片的URL。
• width 和 height: 图片的尺寸。
• 其他可选参数用于自定义效果。

示例

以下是一个完整的示例，展示了如何在Flutter应用中使用 CacheNetworkImagePlus 小部件：

import 'package:cached_network_image_plus/flutter_cached_network_image_plus.dart';
import 'package:flutter/material.dart';

import 'data.dart'; // 假设你有一个data.dart文件，其中包含图片数据

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CacheNetworkImagePlus"),
        centerTitle: true,
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1,
          ),
          itemBuilder: (_, i) => CacheNetworkImagePlus(
            imageUrl: dataDefault[i].url,
            margin: EdgeInsets.all(10),
            borderRadius: BorderRadius.circular(20),
            shimmerBaseColor: dataDefault[i].shimmerBaseColor,
            shimmerHighlightColor: dataDefault[i].shimmerHighlightColor,
            shimmerBackColor: dataDefault[i].shimmerBackColor,
            errorWidget: dataDefault[i].errorWidget,
            boxShadow: [
              BoxShadow(
                color: Colors.grey.shade600,
                blurStyle: BlurStyle.outer,
                blurRadius: 10,
              ),
            ],
          ),
          itemCount: dataDefault.length,
        ),
      ),
    );
  }
}

数据文件 data.dart

假设你有一个 data.dart 文件，其中包含图片数据：

class ImageData {
  final String url;
  final Color shimmerBaseColor;
  final Color shimmerHighlightColor;
  final Color shimmerBackColor;
  final Widget errorWidget;

  ImageData({
    required this.url,
    required this.shimmerBaseColor,
    required this.shimmerHighlightColor,
    required this.shimmerBackColor,
    required this.errorWidget,
  });
}

List<ImageData> dataDefault = [
  ImageData(
    url: 'https://example.com/image1.jpg',
    shimmerBaseColor: Colors.grey[300]!,
    shimmerHighlightColor: Colors.grey[100]!,
    shimmerBackColor: Colors.white,
    errorWidget: Icon(Icons.error),
  ),
  ImageData(
    url: 'https://example.com/image2.jpg',
    shimmerBaseColor: Colors.grey[300]!,
    shimmerHighlightColor: Colors.grey[100]!,
    shimmerBackColor: Colors.white,
    errorWidget: Icon(Icons.error),
  ),
  // 添加更多图片数据
];

截图

希望这个示例对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。