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

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

Custom Cached Network Image

这是一个用于Flutter的图片缓存和网络加载插件。

安装步骤

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

dependencies:
  custom_cached_network_image:

然后运行以下命令以更新依赖项：

flutter pub get

使用方法

首先，导入插件并使用它来加载网络图片。

import 'package:custom_cached_network_image/custom_cached_network_image.dart';

以下是一个完整的示例代码，展示如何使用custom_cached_network_image插件来加载和缓存网络图片。

示例代码
import 'package:custom_cached_network_image/custom_cached_network_image.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const NetworkImageExample(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: CustomCachedNetworkImage(
          // 网络图片的URL
          imageUrl: "https://picsum.photos/200",
        ),
      ),
    );
  }
}

更多关于Flutter图片缓存与网络加载插件custom_cached_network_image的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片缓存与网络加载插件custom_cached_network_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，custom_cached_network_image 是一个用于加载和缓存网络图片的插件。它基于 cached_network_image，但提供了更多的自定义选项和灵活性。以下是如何使用 custom_cached_network_image 插件的详细步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 custom_cached_network_image 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_cached_network_image: ^2.0.0

然后运行 flutter pub get 来安装依赖。

2. 基本使用

CustomCacheManager 是 custom_cached_network_image 的核心类，它允许你自定义缓存行为。你可以使用默认的 CustomCacheManager 实例，也可以创建自己的实例。

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Cached Network Image'),
      ),
      body: Center(
        child: CustomCacheImage(
          imageUrl: 'https://example.com/image.jpg',
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
      ),
    );
  }
}

3. 自定义缓存管理器

你可以创建自定义的 CustomCacheManager 实例来控制缓存的行为，例如设置缓存的最大大小、缓存时间等。

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

void main() {
  final customCacheManager = CustomCacheManager(
    maxSize: 100 * 1024 * 1024, // 100 MB
    maxAge: Duration(days: 7), // 7 days
  );

  runApp(MyApp(customCacheManager: customCacheManager));
}

class MyApp extends StatelessWidget {
  final CustomCacheManager customCacheManager;

  MyApp({required this.customCacheManager});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(customCacheManager: customCacheManager),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final CustomCacheManager customCacheManager;

  MyHomePage({required this.customCacheManager});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Cached Network Image'),
      ),
      body: Center(
        child: CustomCacheImage(
          cacheManager: customCacheManager,
          imageUrl: 'https://example.com/image.jpg',
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
      ),
    );
  }
}

4. 高级用法

CustomCacheImage 还支持许多其他选项，例如设置图片的宽高、裁剪、滤镜等。

CustomCacheImage(
  imageUrl: 'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
  filterQuality: FilterQuality.high,
  color: Colors.blue.withOpacity(0.5),
  colorBlendMode: BlendMode.colorBurn,
);

5. 清除缓存

你可以通过 CustomCacheManager 的 clearCache 方法来清除缓存。

customCacheManager.clearCache();
回到顶部