Flutter图片查看器插件easy_image_viewer的使用

简介

EasyImageViewer 是一个用于在Flutter中轻松显示全屏图片对话框的插件，支持缩放和手势操作。它具有以下特点：

• 显示单张或可滑动的多张图片
• 支持双击缩放和下滑关闭（通过参数配置）
• 自定义加载进度指示器和错误提示
• 回调函数支持页面切换和查看器关闭事件

主要功能

• 显示单张图片

  final imageProvider = Image.network("图片URL").image;
  showImageViewer(context, imageProvider, onViewerDismissed: () {
    print("dismissed");
  });
  

• 显示多张图片

  MultiImageProvider multiImageProvider = MultiImageProvider([
    const NetworkImage("图片1URL"),
    const NetworkImage("图片2URL"),
    // 添加更多图片...
  ]);
  
  showImageViewerPager(context, multiImageProvider, 
      onPageChanged: (page) {
        print("page changed to $page");
      }, 
      onViewerDismissed: (page) {
        print("dismissed while on page $page");
      });
  

• 自定义图片提供者 如果你需要根据特定数据源（如产品列表）动态生成图片，可以创建自定义的 EasyImageProvider 子类。

• 自定义加载进度条 可以重写 progressIndicatorWidgetBuilder 方法来自定义图片加载时的进度指示器样式。

• 处理图片加载失败 提供了默认的错误提示界面，也可以通过覆盖 errorWidgetBuilder 来实现个性化的错误展示。

示例代码

下面是一个完整的示例应用程序，展示了如何使用 EasyImageViewer 插件的不同特性：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'EasyImageViewer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'EasyImageViewer Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<ImageProvider> _imageProviders = [
    NetworkImage("https://picsum.photos/id/1001/4912/3264"),
    NetworkImage("https://picsum.photos/id/1003/1181/1772"),
    NetworkImage("https://picsum.photos/id/1004/4912/3264"),
    NetworkImage("https://picsum.photos/id/1005/4912/3264")
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                // 显示单张图片
                showImageViewer(
                  context,
                  _imageProviders.first,
                  useSafeArea: true,
                  swipeDismissible: true,
                  doubleTapZoomable: true,
                );
              },
              child: const Text('Show Single Image'),
            ),
            ElevatedButton(
              onPressed: () {
                // 显示多张图片
                showImageViewerPager(
                  context,
                  MultiImageProvider(_imageProviders),
                  swipeDismissible: true,
                  doubleTapZoomable: true,
                );
              },
              child: const Text('Show Multiple Images'),
            ),
            // 更多功能按钮...
          ],
        ),
      ),
    );
  }
}

此示例涵盖了基本的图片查看功能，并且可以根据需要进一步扩展以适应具体的应用场景。希望这能帮助你更好地理解和使用 EasyImageViewer 插件！