Flutter快速预览插件quick_look的使用

quick_look 是一个用于在Flutter应用中调用Apple QuickLook (QLPreviewController) 的插件。它允许你在iOS设备上快速预览文件，如PDF、图片等。

开始使用

加载并打开文件

要使用 quick_look 插件打开文件，请按照以下步骤进行操作：

1. 加载文件：从Flutter项目的资源（assets）中加载文件。
2. 保存到临时文件：将文件写入应用程序的文档目录中。
3. 使用QuickLook打开文件：通过 QuickLook.openURL 方法打开文件。

以下是示例代码：

import 'package:flutter/services.dart' show rootBundle;
import 'package:path_provider/path_provider.dart';
import 'package:quick_look/quick_look.dart';

Future<void> openFile(String path) async {
  final byteData = await rootBundle.load('assets/$path');
  final String directory = (await getApplicationDocumentsDirectory()).path;
  final tempFile = await File('$directory/$path').writeAsBytes(
      byteData.buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));
  await QuickLook.openURL(tempFile.path);
}

支持的文件类型

你可以查看 Apple官方文档 来了解哪些类型的文件可以被支持和预览。

完整示例Demo

以下是一个完整的示例程序，展示了如何使用 quick_look 插件来打开单个和多个文件。

import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:path_provider/path_provider.dart';
import 'package:quick_look/quick_look.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Timer? _timer;
  int secondsPassedSinceLastOpen = 0;

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  Future<void> openFiles(List<String> paths) async {
    final String directory = (await getApplicationDocumentsDirectory()).path;
    var finalPaths = <String>[];
    for (final path in paths) {
      final byteData = await rootBundle.load('assets/$path');
      final tempFile = await File('$directory/$path')
          .writeAsBytes(byteData.buffer.asUint8List(
              byteData.offsetInBytes, byteData.lengthInBytes));
      finalPaths.add(tempFile.path);
    }
    await QuickLook.openURLs(
      resourceURLs: finalPaths,
      initialIndex: finalPaths.length - 1,
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(title: const Text('QuickLook for iOS')),
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                const Spacer(),
                ElevatedButton(
                  onPressed: () async {
                    const path = 'lorem_ipsum.pdf';
                    setState(() {
                      secondsPassedSinceLastOpen = 0;
                    });
                    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
                      setState(() {
                        secondsPassedSinceLastOpen++;
                      });
                    });
                    await openFile(path);
                    _timer?.cancel();
                  },
                  child: const Text('Open single demo PDF',
                      style: TextStyle(fontSize: 24),
                      textAlign: TextAlign.center),
                ),
                ElevatedButton(
                  onPressed: () async {
                    const paths = ['lorem_ipsum.pdf', 'image1.jpg', 'image2.jpg'];
                    setState(() {
                      secondsPassedSinceLastOpen = 0;
                    });
                    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
                      setState(() {
                        secondsPassedSinceLastOpen++;
                      });
                    });
                    await openFiles(paths);
                    _timer?.cancel();
                  },
                  child: const Text(
                    'Open multiple assets',
                    style: TextStyle(fontSize: 24),
                    textAlign: TextAlign.center,
                  ),
                ),
                const SizedBox(height: 12),
                Text(
                  'Seconds since last open: $secondsPassedSinceLastOpen',
                  style: const TextStyle(fontSize: 18),
                  textAlign: TextAlign.center,
                ),
                const Text(
                  '(method awaits native modal close before resolving future)',
                  style: TextStyle(fontSize: 12),
                  textAlign: TextAlign.center,
                ),
                const Spacer(),
                const Text(
                  'Photos from \nhttps://unsplash.com/photos/QeVmJxZOv3k\nhttps://unsplash.com/photos/Yh2Y8avvPec',
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 12),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Future<void> openFile(String path) async {
    final byteData = await rootBundle.load('assets/$path');
    final String directory = (await getApplicationDocumentsDirectory()).path;
    final tempFile = await File('$directory/$path').writeAsBytes(
        byteData.buffer.asUint8List(
            byteData.offsetInBytes, byteData.lengthInBytes));
    await QuickLook.openURL(tempFile.path);
  }
}

以上示例演示了如何使用 quick_look 插件在Flutter应用中实现文件预览功能。希望这能帮助你更好地理解和使用这个插件！