Flutter图片预览插件image_preview的使用

image_preview 是一个用于在Flutter应用中实现图片和视频预览功能的插件，支持左右滑动切换。本文将详细介绍如何使用该插件，并提供一个完整的示例代码。

插件介绍

image_preview 插件可以打开全屏图片预览，通过 PreviewData 数据结构来传递图片或视频信息。它不仅支持图片预览，还支持视频封面显示和视频播放。

示例代码

以下是一个完整的示例代码，展示了如何使用 image_preview 插件来实现图片和视频的预览功能。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  image_preview: ^版本号 # 替换为最新版本号

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

2. 编写代码

下面是一个完整的示例代码，展示了如何在Flutter应用中使用 image_preview 插件。

import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:image_preview/preview.dart';
import 'package:image_preview/preview_data.dart';
import 'package:path_provider/path_provider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: 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({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final List<PreviewData> dataList = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
      String path = '';
      if (!kIsWeb) {
        if (Platform.isAndroid) {
          path = ((await getExternalCacheDirectories())![0]).path;
        } else {
          path = (await getTemporaryDirectory()).path;
        }
      }
      final temp = [
        PreviewData(
          type: Type.image,
          heroTag: 'b53764c82a1940',
          image: ImageData(
            url: 'https://xia-weiyang.github.io/image/1.jpg',
            path: '$path/image/1.jpg',
            thumbnailUrl: 'https://xia-weiyang.github.io/image/1_thumbnail.jpg',
            thumbnailPath: '$path/image/1_thumbnail.jpg',
          ),
        ),
        PreviewData(
          type: Type.video,
          heroTag: 'c53764c82a1940',
          video: VideoData(
              coverUrl: 'https://xia-weiyang.github.io/image/2.jpg',
              coverPath: '$path/image/2.jpg',
              url: 'https://xia-weiyang.github.io/video/trailer.mp4'),
        ),
        PreviewData(
          type: Type.image,
          heroTag: '112cc8a34e13',
          image: ImageData(
            url: 'https://xia-weiyang.github.io/image/3.jpg',
            path: '$path/image/3.jpg',
            thumbnailUrl: 'https://xia-weiyang.github.io/image/3.jpg',
            thumbnailPath: '$path/image/3.jpg',
          ),
        ),
      ];
      setState(() {
        dataList.addAll(temp);
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: dataList.map<Widget>((preview) {
            final i = dataList.indexOf(preview);
            return SizedBox(
              width: double.infinity,
              height: 240,
              child: PreviewThumbnail(
                data: dataList[i],
                onTap: () {
                  openPreviewPages(
                    Navigator.of(context),
                    data: dataList,
                    index: i,
                    indicator: kIsWeb || Platform.isMacOS ||
                        Platform.isWindows ||
                        Platform.isLinux,
                    tipWidget: (currentIndex) {
                      return Align(
                        alignment: Alignment.topRight,
                        child: Padding(
                          padding: EdgeInsets.only(
                              top: MediaQuery.of(context).padding.top + 16,
                              right: 32),
                          child: InkWell(
                            onTap: () {
                              debugPrint('tap tip $currentIndex');
                            },
                            child: Text(
                              '${currentIndex + 1}/${dataList.length}',
                              style: TextStyle(color: Colors.white.withAlpha(180)),
                            ),
                          ),
                        ),
                      );
                    },
                    onLongPressHandler: (con, url) => debugPrint(preview.image?.url),
                    onPageChanged: (i) async {
                      debugPrint('onPageChanged $i');
                    },
                  );
                },
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}