Flutter图片缓存与网络加载插件icached_network_image的使用

Flutter 图片缓存与网络加载插件 icached_network_image 的使用

简介

icached_network_image 是一个用于在 Flutter 应用中高效缓存和加载网络图片的组件。通过使用该插件，你可以显著提升应用性能并减少数据使用量。

安装

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

   dependencies:
     icached_network_image: ^1.0.0 (或最新版本)
   

2. 运行 flutter pub get 来安装该包。

使用

首先，在 Dart 代码中导入 icached_network_image 包：

import 'package:icached_network_image/icached_network_image.dart';

然后，使用 ICachedNetworkImage 小部件来显示网络图片：

ICachedNetworkImage(
  'https://example.com/image.jpg', // 网络图片的 URL
  height: 100, // 图片的高度
  width: 150, // 图片的宽度
  placeholderAssetImage: 'assets/placeholder.png', // 占位图资源路径
  fit: BoxFit.cover, // 图片填充方式
),

功能

• 缓存下载的图片：以便后续使用时能更快地加载。
• 提供占位图：当网络图片正在加载时显示。
• 支持本地文件路径的占位图：允许你指定一个本地文件作为占位图。
• 自定义图像容器形状：可以设置为矩形或圆形，并且可以设置边框。
• 灵活指定图像尺寸和填充方式：可以控制高度、宽度以及图像如何适应容器。
• 处理缓存检查和更新：确保缓存中的图片保持新鲜。

可选参数

• height: 控制图像容器的高度（默认值为50）。
• width: 控制图像容器的宽度（默认值为50）。
• placeholderAssetImage: 占位图的资源路径。
• fit: 图像在其容器中的填充方式（默认值为 BoxFit.cover）。可以是任何 BoxFit 值。
• alwaysShowPlaceHolder: 设置为 true 以始终显示占位图，即使网络图片可用（默认值为 false）。
• shape: 图像容器的形状（默认值为 BoxShape.circle）。可以是 BoxShape.rectangle 或 BoxShape.circle。
• borderRadius: 图像容器的圆角半径（默认值为 null）。
• filePlaceholderPath: 替代占位图的本地文件路径（可选）。
• border: 图像容器的边框（可选）。使用 BoxBorder 对象定义边框样式和颜色。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 ICachedNetworkImage：

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

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ICachedNetworkImage(
          'https://picsum.photos/id/237/200/300', // 网络图片的 URL
          height: 200, // 图片的高度
          width: 200, // 图片的宽度
          fit: BoxFit.contain, // 图片填充方式
        ),
      ),
    );
  }
}