Flutter图片选择插件x_image_picker的使用

x_image_picker是一个用于在 Flutter 应用中选择图片和视频的插件。它基于 iOS 的 ZLPhotoBrowser 和 Android 的 PictureSelector 实现，并提供了丰富的功能来满足多平台的需求。

功能概述

• iOS: 基于 ZLPhotoBrowser。
• Android: 基于 PictureSelector。
• 灵感来源: images_picker 插件。
• 视频缩略图: 使用了 video_thumbnail 插件生成视频缩略图。

Android 设置

以下是 Android 端的配置步骤：

1. 修改最低 SDK 版本为 19，文件路径为 android/app/build.gradle：

   defaultConfig {
       applicationId "com.huanshao.x_image_picker_example"
       minSdkVersion 19 // 修改为 19
       targetSdkVersion 30
       versionCode flutterVersionCode.toInteger()
       versionName flutterVersionName
   }
   

2. 添加依赖项 androidx.camera:camera-camera2：

   dependencies {
       implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
       implementation "androidx.camera:camera-camera2:1.1.0-alpha06" // 添加此行
   }
   

3. 修改 android/build.gradle 中的 kotlin_version 为 1.4.32：

   ext.kotlin_version = '1.4.32'
   

4. 添加自定义 Application 类，并在 AndroidManifest.xml 中声明：

   package com.huanshao.x_image_picker_example
   
   import android.app.Application
   import androidx.camera.camera2.Camera2Config
   import androidx.camera.core.CameraXConfig
   import io.flutter.app.FlutterApplication
   
   class MyApplication: FlutterApplication(), CameraXConfig.Provider {
       override fun onCreate() {
           super.onCreate()
       }
   
       override fun getCameraXConfig(): CameraXConfig {
           return Camera2Config.defaultConfig();
       }
   }
   

   在 AndroidManifest.xml 中添加：

   <application
           android:label="x_image_picker_example"
           android:icon="@mipmap/ic_launcher"
           android:name=".MyApplication">
   </application>
   

5. 添加必要的权限：

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

iOS 设置

以下是 iOS 端的配置步骤：

1. 添加权限描述：

   <key>NSCameraUsageDescription</key>
   <string>使用相机</string>
   <key>NSMicrophoneUsageDescription</key>
   <string>使用麦克风</string>
   <key>NSPhotoLibraryUsageDescription</key>
   <string>访问相册</string>
   

2. 限制:

   • 当前不支持从 iCloud 选择视频。如果 XImagePickerArgsMediaType 为 Video 且返回的 cover 为 null，请在 Flutter 端处理，例如提示用户视频存储在 iCloud，无法选择。用户可以选择先下载视频，然后手动选择。

使用方法

使用 x_image_picker 插件选择图片或视频非常简单。以下是一个完整的示例：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized(); // 初始化 Flutter 绑定
  runApp(MyApp());
}

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

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("图片选择测试"),
        ),
        body: Column(
          children: [
            MaterialButton( // 按钮用于触发图片选择
              onPressed: () async {
                // 调用 x_image_picker 选择视频
                final res = await XImagePicker.pickImage(XImagePickerArgs(
                    type: XImagePickerArgsMediaType.Video, // 选择类型为视频
                    recordVideoSecond: 10)); // 录制视频时间为 10 秒
                print(res.toString()); // 打印返回结果
              },
              child: Text("选择图片"),
            )
          ],
        ),
      ),
    );
  }
}

参数说明 (XImagePickerArgs)

XImagePickerArgs 是配置图片和视频选择的核心参数类，其构造函数如下：

final int recordVideoSecond; // 视频录制时间（秒）

/// 最大选择数量
final int maxSelectNum;

/// 选择类型
final XImagePickerArgsMediaType type;

/// 是否显示拍照按钮
final bool isCamera;

XImagePickerArgs(
    {this.recordVideoSecond = 60, // 默认录制 60 秒
    this.maxSelectNum = 9, // 最大选择数量为 9
    required this.type, // 必须指定选择类型
    this.isCamera = true}); // 是否显示拍照按钮，默认为 true

返回结果 (XImagePickerResult)

XImagePickerResult 包含选择结果的相关信息，具体结构如下：

final File file; // 选择的文件
final int width; // 文件宽度
final int height; // 文件高度

/// 封面，仅当 type 为 [XImagePickerArgsMediaType.Video] 时有效
File? cover;