插件介绍

ohos_flutter_photoviewpicker是一款专为Flutter鸿蒙应用开发的图片选择器插件，提供了完整的图片浏览、选择、预览功能。该插件基于MethodChannel实现Flutter与OpenHarmony原生能力的交互，支持图片缩略图加载、原图获取、多选功能和大图预览，为开发者提供了简洁易用的图片选择解决方案。

主要功能特点：

• 支持获取系统所有图片资源
• 提供缩略图和原图两种加载模式
• 支持多选图片
• 支持图片大图预览
• 支持获取图片类型（图片/视频）
• 与OpenHarmony系统深度集成

环境配置

Flutter环境要求

• Flutter SDK: 2.19.6+
• Dart SDK: 2.19.6+
• OpenHarmony API: 9+

项目配置

在Flutter项目中引入ohos_flutter_photoviewpicker插件，需要在pubspec.yaml文件中添加以下依赖配置：

dependencies:
  flutter:
    sdk: flutter
  ohos_flutter_photoviewpicker:
    git:
      url: "https://atomgit.com/flutter_ohos_plugins/ohos_flutter_photoviewpicker.git"
      path: "ohos_flutter_photoviewpicker"

API使用说明

初始化与基本配置

引入插件包：

import 'package:ohos_flutter_photoviewpicker/photoPicker.dart';

核心API

1. 获取所有图片

// 获取系统所有图片
Future<Map<Object?, Object?>> getAllImages() async {
  const MethodChannel channel = MethodChannel('ohos.flutter.picker/photoviewpicker');
  return await channel.invokeMethod('getAllImage', {});
}

2. 获取缩略图

// 获取图片缩略图
Future<String> getThumbnail(String assetId) async {
  const MethodChannel channel = MethodChannel('ohos.flutter.picker/photoviewpicker');
  return await channel.invokeMethod(
    'getThumbnail',
    {'assetId': assetId},
  );
}

3. 获取原图

// 获取图片原图
Future<String> getFullImage(String assetId) async {
  const MethodChannel channel = MethodChannel('ohos.flutter.picker/photoviewpicker');
  return await channel.invokeMethod(
    'getFullImage',
    {'assetId': assetId},
  );
}

4. 获取图片类型

// 获取图片类型（1：图片，其他：视频）
Future<num> getPhotoType(String assetId) async {
  const MethodChannel channel = MethodChannel('ohos.flutter.picker/photoviewpicker');
  return await channel.invokeMethod(
    'getPhotoType',
    {'assetId': assetId},
  );
}

组件使用示例

完整图片选择器页面

import 'package:flutter/material.dart';
import 'package:ohos_flutter_photoviewpicker/photoPicker.dart';

class MyPhotoPicker extends StatelessWidget {
  const MyPhotoPicker({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('图片选择器'),
        centerTitle: true,
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('打开图片选择器'),
          onPressed: () async {
            // 打开图片选择器并获取选中结果
            final result = await Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const PhotoPickerPage()),
            );

            // 处理选择结果
            if (result != null) {
              print('选中的图片：$result');
              // 可以在这里处理选中的图片路径
            }
          },
        ),
      ),
    );
  }
}

自定义图片选择页面

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:flutter/services.dart';

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

  @override
  State<CustomPhotoPicker> createState() => _CustomPhotoPickerState();
}

class _CustomPhotoPickerState extends State<CustomPhotoPicker> {
  final List<String> _selectedImages = [];
  final List<String> _imagePaths = [];
  final MethodChannel _channel = const MethodChannel('ohos.flutter.picker/photoviewpicker');

  @override
  void initState() {
    super.initState();
    _loadAllImages();
  }

  // 加载所有图片
  Future<void> _loadAllImages() async {
    try {
      final result = await _channel.invokeMethod('getAllImage', {});
      if (result != null && result is Map) {
        setState(() {
          _imagePaths.addAll(result.values.cast<String>());
        });
      }
    } catch (e) {
      print('加载图片失败: $e');
    }
  }

  // 获取图片缩略图
  Future<String> _getThumbnail(String assetId) async {
    return await _channel.invokeMethod('getThumbnail', {'assetId': assetId});
  }

  // 切换图片选择状态
  void _toggleImageSelection(String assetId) {
    setState(() {
      if (_selectedImages.contains(assetId)) {
        _selectedImages.remove(assetId);
      } else {
        _selectedImages.add(assetId);
      }
    });
  }

  // 确认选择
  void _confirmSelection() async {
    // 获取选中图片的原图路径
    final selectedPaths = <String, String>{};
    for (final assetId in _selectedImages) {
      final path = await _channel.invokeMethod('getFullImage', {'assetId': assetId});
      selectedPaths[assetId] = path;
    }

    // 返回选择结果
    Navigator.pop(context, selectedPaths);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('自定义图片选择器'),
        actions: [
          TextButton(
            onPressed: _confirmSelection,
            child: Text(
              '完成(${_selectedImages.length})',
              style: const TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          childAspectRatio: 1.0,
          crossAxisSpacing: 2.0,
          mainAxisSpacing: 2.0,
        ),
        itemCount: _imagePaths.length,
        itemBuilder: (context, index) {
          final assetId = _imagePaths[index];
          final isSelected = _selectedImages.contains(assetId);

          return FutureBuilder<String>(
            future: _getThumbnail(assetId),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Stack(
                  children: [
                    GestureDetector(
                      onTap: () => _toggleImageSelection(assetId),
                      child: Image.file(
                        File(snapshot.data!),
                        fit: BoxFit.cover,
                        width: double.infinity,
                        height: double.infinity,
                      ),
                    ),
                    if (isSelected) ...[
                      Positioned(
                        top: 8,
                        right: 8,
                        child: Container(
                          width: 24,
                          height: 24,
                          decoration: BoxDecoration(
                            color: Colors.blue,
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: const Icon(
                            Icons.check,
                            color: Colors.white,
                            size: 16,
                          ),
                        ),
                      ),
                    ],
                  ],
                );
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            },
          );
        },
      ),
    );
  }
}

常见问题与解决方案

1. 权限配置

确保在OpenHarmony项目的配置文件中添加必要的权限：

{
  "module": {
    "abilities": [
      {
        "permissions": [
          "ohos.permission.READ_MEDIA"
        ]
      }
    ]
  }
}

2. 图片加载性能

• 使用缩略图模式提高列表加载性能
• 大图预览时使用原图模式确保清晰度
• 合理使用缓存机制避免重复加载

总结

ohos_flutter_photoviewpicker插件为Flutter开发者提供了在OpenHarmony平台上便捷的图片选择解决方案。通过简单的API调用，开发者可以快速实现图片浏览、选择和预览功能，极大地简化了跨平台应用开发中的媒体资源处理流程。

该插件具有良好的性能表现和用户体验，支持多种图片操作场景，是Flutter鸿蒙应用开发中处理图片选择需求的理想选择。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net