Flutter图片选择插件hl_image_picker的使用

hl_image_picker 是一个用于Flutter应用的媒体选择插件，它简化了从相册中选择媒体（如图片和视频）、裁剪图片以及拍摄新照片或录制视频的功能。以下是关于该插件的详细介绍、安装指南、配置步骤及使用方法。

插件特性

• 从相册中选择图片/视频
• 拍摄照片或录制视频
• 打开图片裁剪器
• 支持多图裁剪
• 支持所选图片的质量压缩
• 支持GIF文件的选择

平台支持

安装

在命令行中执行以下命令来添加依赖：

$ flutter pub add hl_image_picker

注意：如果你的应用仅针对Android或iOS开发，则可以直接选择对应的平台特定包：

• iOS: hl_image_picker_ios
• Android: hl_image_picker_android

配置

iOS

你需要为iOS项目做如下配置：

1. 在ios/Runner/Info.plist文件中添加隐私描述信息：

   <key>NSPhotoLibraryUsageDescription</key>
   <string>此应用程序需要访问照片库</string>
   
   <key>NSCameraUsageDescription</key>
   <string>此应用程序需要访问相机</string>
   
   <!-- 如果你的插件需要录制视频并访问设备麦克风，请包含以下描述 -->
   <key>NSMicrophoneUsageDescription</key>
   <string>此应用程序需要访问麦克风</string>
   

2. 对于iOS 14及以上版本，可以通过设置PHPhotoLibraryPreventAutomaticLimitedAccessAlert来阻止系统自动弹出有限访问提示框：

   <key>PHPhotoLibraryPreventAutomaticLimitedAccessAlert</key>
   <true/>
   

3. (可选) 如果你想自定义相机界面的语言，可以在Xcode中打开项目，转到Info选项卡，并添加缺失的语言本地化。

Android

对于Android项目，确保你做了以下配置：

1. 设置minSdkVersion至少为21：

   android {
       ...
       defaultConfig {
           minSdkVersion 21
           ...
       }
   }
   

2. 在AndroidManifest.xml文件中添加权限声明：

   <!-- Android 12及以下 -->
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   
   <!-- 目标API级别为Android 13及以上 -->
   <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
   <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
   
   <!-- 请求相机权限 -->
   <uses-feature android:name="android.hardware.camera" android:required="false" />
   <uses-permission android:name="android.permission.CAMERA" />
   
   <!-- 如果你需要录制视频 -->
   <uses-permission android:name="android.permission.RECORD_AUDIO" />
   

使用示例

下面是一个完整的Dart代码示例，展示了如何使用hl_image_picker插件进行图片选择、拍照以及裁剪操作。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Image Picker Demo',
      home: MyHomePage(title: 'Image Picker Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, this.title});

  final String? title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _picker = HLImagePicker();

  List<HLPickerItem> _selectedImages = [];

  bool _isCroppingEnabled = false;
  int _count = 4;
  MediaType _type = MediaType.all;
  bool _isExportThumbnail = true;
  bool _enablePreview = false;
  bool _usedCameraButton = true;
  int _numberOfColumn = 3;
  bool _includePrevSelected = false;
  CropAspectRatio? _aspectRatio;
  List<CropAspectRatioPreset>? _aspectRatioPresets;
  double _compressQuality = 0.9;
  CroppingStyle _croppingStyle = CroppingStyle.normal;

  _openPicker() async {
    try {
      final images = await _picker.openPicker(
        cropping: _isCroppingEnabled,
        selectedIds: _includePrevSelected
            ? _selectedImages.map((e) => e.id).toList()
            : null,
        pickerOptions: HLPickerOptions(
          mediaType: _type,
          enablePreview: _enablePreview,
          isExportThumbnail: _isExportThumbnail,
          thumbnailCompressFormat: CompressFormat.jpg,
          thumbnailCompressQuality: 0.9,
          maxSelectedAssets: _count,
          usedCameraButton: _usedCameraButton,
          numberOfColumn: _numberOfColumn,
          isGif: true,
        ),
        cropOptions: HLCropOptions(
          aspectRatio: _aspectRatio,
          aspectRatioPresets: _aspectRatioPresets,
          compressQuality: _compressQuality,
          compressFormat: CompressFormat.jpg,
          croppingStyle: _croppingStyle,
        ),
      );
      setState(() {
        _selectedImages = images;
      });
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  _openCamera() async {
    try {
      final image = await _picker.openCamera(
        cropping: _isCroppingEnabled,
        cameraOptions: HLCameraOptions(
          cameraType:
              _type == MediaType.video ? CameraType.video : CameraType.image,
          recordVideoMaxSecond: 40,
          isExportThumbnail: _isExportThumbnail,
          thumbnailCompressFormat: CompressFormat.jpg,
          thumbnailCompressQuality: 0.9,
        ),
        cropOptions: HLCropOptions(
          aspectRatio: _aspectRatio,
          aspectRatioPresets: _aspectRatioPresets,
          croppingStyle: _croppingStyle,
        ),
      );
      setState(() {
        _selectedImages = [image];
      });
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  _openCropper() async {
    try {
      if (_selectedImages.isEmpty) {
        return;
      }
      final image = await _picker.openCropper(
        _selectedImages[0].path,
        cropOptions: HLCropOptions(
          aspectRatio: _aspectRatio,
          aspectRatioPresets: _aspectRatioPresets,
          compressQuality: _compressQuality,
          compressFormat: CompressFormat.jpg,
          croppingStyle: _croppingStyle,
        ),
      );
      setState(() {
        _selectedImages = [image];
      });
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(widget.title!),
        ),
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 显示已选择的媒体项
              MediaPreview(items: _selectedImages),
              
              // 打开选择器按钮
              Align(
                child: ElevatedButton(
                  onPressed: _openPicker,
                  child: const Text('Open Picker'),
                ),
              ),
              
              // 打开相机按钮
              Align(
                child: ElevatedButton(
                  onPressed: _openCamera,
                  child: const Text('Open camera'),
                ),
              ),
              
              // 打开裁剪器按钮（如果有已选择的图片）
              Align(
                child: ElevatedButton(
                  onPressed: _selectedImages.isNotEmpty ? _openCropper : null,
                  child: const Text('Open cropper'),
                ),
              ),
              
              // 配置部分...
            ],
          ),
        ),
      ),
    );
  }
}

以上代码提供了一个基本框架，用户可以通过点击不同的按钮来触发相应的功能，如打开图片选择器、相机或裁剪工具。同时，它还包含了简单的UI元素用于展示已选择的媒体项。

请注意，为了使上述代码正常工作，你可能还需要实现一些辅助组件（如MediaPreview），并且根据自己的需求调整配置参数。希望这段代码能帮助你快速上手hl_image_picker插件！