Flutter图片获取插件ez_image_fetch_package的使用

Flutter图片获取插件ez_image_fetch_package的使用

ez_image_fetch_package 是一个用于高效图像获取和缓存的 Flutter 库。它集成了 Dio 进行快速图像下载，并支持内存和磁盘缓存，同时提供了可定制的错误处理功能。

功能

  • 使用 Dio 快速下载图像
  • 支持内存和磁盘缓存
  • 可自定义的错误处理

安装

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

dependencies:
  ez_image_fetch_package: ^0.0.1

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

基本用法示例

以下是一个完整的示例，展示如何使用 ez_image_fetch_package 插件来加载和显示网络图片。

示例代码

import 'package:ez_image_fetch_package/ez_disk_cache.dart';
import 'package:ez_image_fetch_package/ez_image_fetcher.dart';
import 'package:ez_image_fetch_package/ez_task_manager.dart';
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:logger/logger.dart';
import 'package:native_dio_adapter/native_dio_adapter.dart'; // 引入适配器

void main() {
  runApp(ExampleScreen());
}

class ExampleScreen extends StatelessWidget {
  // 初始化 EzImageFetcher
  final EzImageFetcher imageFetcher = EzImageFetcher(
    dio: Dio()
      ..httpClientAdapter = NativeAdapter( // 使用 NativeAdapter 提升性能
          createCupertinoConfiguration: () =>
              URLSessionConfiguration.ephemeralSessionConfiguration()),
    diskCache: EzDiskCache(), // 磁盘缓存
    taskManager: EzTaskManager(maxRunningTask: 44), // 任务管理器
    errorImage: Image.asset("assets/dog.png"), // 错误占位图
    logger: Logger(), // 日志记录器
  );

  ExampleScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Image Fetch Example')),
        body: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, // 3列网格布局
            crossAxisSpacing: 8.0,
            mainAxisSpacing: 8.0,
          ),
          itemCount: 51, // 图片总数
          itemBuilder: (context, index) {
            final imageUrl =
                'https://via.placeholder.com/200x200.png?text=$index'; // 占位符图片URL
            return FutureBuilder<Image>(
              future: imageFetcher.fetchImage(imageUrl), // 异步加载图片
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  // 加载中显示进度条
                  return const Center(child: CircularProgressIndicator());
                } else if (snapshot.hasError) {
                  // 加载失败显示错误图标
                  return const Center(child: Icon(Icons.error));
                } else {
                  // 返回加载完成的图片
                  return snapshot.data!;
                }
              },
            );
          },
        ),
      ),
    );
  }
}

更多关于Flutter图片获取插件ez_image_fetch_package的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片获取插件ez_image_fetch_package的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


ez_image_fetch_package 是一个 Flutter 插件，用于从网络或本地获取图片。它提供了简单易用的 API，帮助开发者在 Flutter 应用中高效地加载和显示图片。以下是如何使用 ez_image_fetch_package 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 ez_image_fetch_package 的依赖：

dependencies:
  flutter:
    sdk: flutter
  ez_image_fetch_package: ^1.0.0  # 请使用最新版本

然后，运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 ez_image_fetch_package：

import 'package:ez_image_fetch_package/ez_image_fetch_package.dart';

3. 使用 EzImageFetch 加载图片

ez_image_fetch_package 提供了 EzImageFetch 类来加载图片。你可以使用它来从网络或本地加载图片。

从网络加载图片

EzImageFetch.network(
  'https://example.com/image.jpg',
  placeholder: CircularProgressIndicator(), // 加载时的占位符
  errorWidget: Icon(Icons.error), // 加载失败时显示的组件
);

从本地加载图片

EzImageFetch.asset(
  'assets/image.png',
  placeholder: CircularProgressIndicator(),
  errorWidget: Icon(Icons.error),
);

4. 自定义加载和错误处理

你可以通过 placeholder 和 errorWidget 参数来自定义图片加载时的占位符和加载失败时显示的组件。

EzImageFetch.network(
  'https://example.com/image.jpg',
  placeholder: Center(child: CircularProgressIndicator()),
  errorWidget: Center(child: Icon(Icons.error, color: Colors.red)),
);

5. 使用缓存

ez_image_fetch_package 默认会缓存图片，以提高加载速度。你可以通过设置 cache 参数来控制是否启用缓存：

EzImageFetch.network(
  'https://example.com/image.jpg',
  cache: true, // 默认值为 true
);

6. 图片尺寸和缩放

你可以通过 width 和 height 参数来指定图片的尺寸，或者使用 fit 参数来控制图片的缩放方式：

EzImageFetch.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
);

7. 完整示例

以下是一个完整的示例，展示如何使用 ez_image_fetch_package 加载网络图片并显示在页面上：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('EzImageFetch Example'),
        ),
        body: Center(
          child: EzImageFetch.network(
            'https://example.com/image.jpg',
            placeholder: CircularProgressIndicator(),
            errorWidget: Icon(Icons.error),
            width: 200,
            height: 200,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}
回到顶部