Flutter图像处理插件imgx的使用

imgx 是一个用于从URL高效加载图片的Flutter包，支持PNG、JPG、WEBP和GIF格式。它具有内存/磁盘缓存（带过期时间）、重试机制以应对加载失败，以及实时进度跟踪等功能，确保无缝处理服务器端的图片。

使用方法

1. 添加依赖

首先，在您的pubspec.yaml文件中添加imgx作为依赖项。

dependencies:
  imgx: ^0.1.4

然后运行 flutter pub get 来获取新添加的依赖。

2. 设置全局配置（可选）

您可以为整个应用程序设置全局缓存类型、缓存时长和重试次数。也可以在组件级别设置这些参数，此时组件级别的参数将覆盖全局配置。如果未设置任何值，则会使用默认值。

import 'package:imgx/imgx.dart';

void main() {
  ImgXConfig.globalCacheType = CacheType.memory;
  ImgXConfig.globalCacheDuration = const Duration(days: 1);
  ImgXConfig.globalRetryCount = 3;

  runApp(const MyApp());
}

3. ImgX 组件使用

如果您已经设置了全局配置，可以直接使用ImgX组件而无需传递参数。当然，您也可以根据需要覆盖全局配置。

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

class ImageDisplayPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Display')),
      body: Center(
        child: ImgX(
          width: 200,
          height: 200,
          imageUri: "https://www.loudegg.com/wp-content/uploads/2020/10/Fred-Flintstone.jpg",
          cacheType: CacheType.memory,
          cacheDuration: const Duration(days: 1),
          retryCount: 2,
          fit: BoxFit.fitHeight,
          headers: {"Authorization": "Bearer token"},
          progressWidget: const Center(
            child: CircularProgressIndicator(),
          ),
          errorWidget: const Center(
            child: Icon(Icons.error),
          ),
          onProgress: (progress) {
            print("Download progress: ${(progress * 100).toStringAsFixed(2)}%");
          },
        ),
      ),
    );
  }
}

4. 手动清除缓存

您可以选择性地清除所有缓存或通过指定URL来清除单个缓存项。

import 'package:imgx/imgx.dart';

void removeCache() {
  // 部分匹配清除
  ImgX.removeCacheWhere(key: "Fred-Flintstone.jpg");
  // 完全匹配清除
  ImgX.removeCacheWhere(key: "https://www.loudegg.com/wp-content/uploads/2020/10/Fred-Flintstone.jpg");
  // 清除所有缓存
  ImgX.removeAllCache();
}

5. 支持此包（可选）

如果您觉得这个包很有用，请考虑在页面顶部为其点赞。

示例代码

以下是一个完整的示例，展示了如何在Flutter应用中集成并使用imgx：

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

void main() {
  ImgXConfig.globalCacheType = CacheType.memory;
  ImgXConfig.globalCacheDuration = const Duration(days: 1);
  ImgXConfig.globalProgressWidget = const Center(
    child: CircularProgressIndicator(),
  );
  ImgXConfig.globalErrorWidget = const Center(
    child: Icon(Icons.error),
  );
  ImgXConfig.globalRetryCount = 3;

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ImgX Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ImageDisplayPage()),
            );
          },
          child: Text('Show Image'),
        ),
      ),
    );
  }
}

class ImageDisplayPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Display')),
      body: Center(
        child: ImgX(
          width: 200,
          height: 200,
          imageUri: "https://www.loudegg.com/wp-content/uploads/2020/10/Fred-Flintstone.jpg",
          cacheType: CacheType.memory,
          cacheDuration: const Duration(days: 1),
          retryCount: 2,
          fit: BoxFit.fitHeight,
          headers: {"Authorization": "Bearer token"},
          progressWidget: const Center(
            child: CircularProgressIndicator(),
          ),
          errorWidget: const Center(
            child: Icon(Icons.error),
          ),
          onProgress: (progress) {
            print("Download progress: ${(progress * 100).toStringAsFixed(2)}%");
          },
        ),
      ),
    );
  }
}

Bug或功能请求

如果您遇到任何问题或认为该库缺少某些特性，请随时在GitHub上提交issue。也欢迎提交Pull Request。

以上是关于imgx插件的详细介绍与使用指南，希望对您有所帮助！