Flutter多图选择插件multi_image_picker3的使用

multi_image_picker3 是一个用于在 Flutter 应用中实现多图选择的插件。它允许用户从设备的相册中选择多张图片，并返回这些图片的路径或文件对象。以下是如何使用 multi_image_picker3 插件的详细步骤。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  multi_image_picker3: ^3.0.0

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

2. 导入插件

在需要使用多图选择功能的 Dart 文件中导入插件：

import 'package:multi_image_picker3/multi_image_picker3.dart';

3. 请求权限

在 Android 和 iOS 上，访问相册需要相应的权限。确保在 AndroidManifest.xml 和 Info.plist 中添加必要的权限声明。

AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

Info.plist:

<key>NSPhotoLibraryUsageDescription</key>
<string>我们需要访问您的相册以选择图片</string>

4. 选择图片

使用 MultiImagePicker.pickImages 方法来选择图片。以下是一个简单的示例：

List<Asset> images = [];

Future<void> loadAssets() async {
  List<Asset> resultList = [];
  String error = '';

  try {
    resultList = await MultiImagePicker.pickImages(
      maxImages: 10, // 最多选择10张图片
      enableCamera: true, // 是否允许拍照
      selectedAssets: images, // 已选中的图片
      cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"), // iOS 选项
      materialOptions: MaterialOptions(
        actionBarColor: "#abcdef", // 操作栏颜色
        actionBarTitle: "选择图片", // 操作栏标题
        allViewTitle: "所有图片", // 所有图片视图标题
        useDetailsView: false, // 是否使用详细视图
        selectCircleStrokeColor: "#000000", // 选择圆圈边框颜色
      ),
    );
  } on Exception catch (e) {
    error = e.toString();
  }

  if (!mounted) return;

  setState(() {
    images = resultList;
    if (error.isNotEmpty) {
      print(error);
    }
  });
}

5. 显示选择的图片

你可以使用 AssetThumbnail 来显示选择的图片缩略图：

GridView.count(
  crossAxisCount: 3,
  children: List.generate(images.length, (index) {
    Asset asset = images[index];
    return AssetThumb(
      asset: asset,
      width: 300,
      height: 300,
    );
  }),
);

6. 获取图片文件

如果你需要将 Asset 转换为 File 对象，可以使用 getByteData 方法获取图片的字节数据，然后将其保存为文件：

Future<File> getImageFileFromAsset(Asset asset) async {
  final byteData = await asset.getByteData();
  final tempFile = File('${(await getTemporaryDirectory()).path}/${asset.name}');
  await tempFile.writeAsBytes(byteData.buffer.asUint8List());
  return tempFile;
}

7. 完整示例

以下是一个完整的示例，展示了如何使用 multi_image_picker3 插件选择并显示多张图片：

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

class ImagePickerScreen extends StatefulWidget {
  [@override](/user/override)
  _ImagePickerScreenState createState() => _ImagePickerScreenState();
}

class _ImagePickerScreenState extends State<ImagePickerScreen> {
  List<Asset> images = [];

  Future<void> loadAssets() async {
    List<Asset> resultList = [];
    String error = '';

    try {
      resultList = await MultiImagePicker.pickImages(
        maxImages: 10,
        enableCamera: true,
        selectedAssets: images,
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef",
          actionBarTitle: "选择图片",
          allViewTitle: "所有图片",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );
    } on Exception catch (e) {
      error = e.toString();
    }

    if (!mounted) return;

    setState(() {
      images = resultList;
      if (error.isNotEmpty) {
        print(error);
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('多图选择'),
      ),
      body: Column(
        children: <Widget>[
          ElevatedButton(
            onPressed: loadAssets,
            child: Text('选择图片'),
          ),
          Expanded(
            child: GridView.count(
              crossAxisCount: 3,
              children: List.generate(images.length, (index) {
                Asset asset = images[index];
                return AssetThumb(
                  asset: asset,
                  width: 300,
                  height: 300,
                );
              }),
            ),
          ),
        ],
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: ImagePickerScreen(),
));