Flutter跨平台鸿蒙化图片选择器组件使用指南

摘要：ohos_flutter_photoviewpicker是一款专为OpenHarmony系统设计的Flutter图片选择器组件，支持图片浏览、多选、预览等功能。该组件通过MethodChannel实现Flutter与OpenHarmony原生服务的深度集成，提供缩略图/原图查看模式，遵循Material Design规范。开发者可通过Git方式引入依赖，简单API调用即可实现图片选择功能，需

b13053810049

332人浏览 · 2025-12-24 16:10:08

b13053810049 · 2025-12-24 16:10:08 发布

一、插件介绍

ohos_flutter_photoviewpicker是一个专为OpenHarmony系统设计的Flutter图片选择器组件，提供了完整的图片浏览、选择和查看功能。该组件通过MethodChannel实现Flutter与OpenHarmony原生图片服务的无缝集成，支持批量选择、大图预览、原图选择等特性，为鸿蒙应用开发提供了便捷的图片处理解决方案。

核心功能

📸 支持获取设备上所有图片资源
📱 提供缩略图和原图两种查看模式
✅ 支持多选图片功能
🔍 大图预览功能
🎨 简洁美观的Material Design界面
🔄 与OpenHarmony原生功能深度集成

二、环境要求

环境配置	版本要求
Flutter	>= 2.19.6
Dart	>= 2.19.6
OpenHarmony	API 9+
DevEco Studio	3.1.0+

三、依赖引入

由于该组件是针对OpenHarmony系统的自定义修改版本，需要通过Git方式引入依赖。在项目的pubspec.yaml文件中添加以下配置：

dependencies:
  flutter:
    sdk: flutter

  ohos_flutter_photoviewpicker:
    git:
      url: "https://atomgit.com/flutter-openharmony/ohos_flutter_photoviewpicker.git"
      path: "ohos_flutter_photoviewpicker"

添加依赖后，执行以下命令获取包：

flutter pub get

四、API使用

1. 主要API接口

方法名	功能描述	参数	返回值
`getAllImage()`	获取设备上所有图片	无	`Map<Object?, Object?>`
`getThumbnail(id)`	获取图片缩略图	`id`: 图片ID	`String` (图片路径)
`getFullImage(id)`	获取原图	`id`: 图片ID	`String` (图片路径)
`getPhotoType(id)`	获取图片类型	`id`: 图片ID	`num` (1:图片, 其他:视频)

2. 组件使用示例

2.1 基本使用

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('图片选择器示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 打开图片选择器
            Map<String, String>? selectedImages = await Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const PhotoPickerPage()),
            );

            // 处理选择的图片
            if (selectedImages != null) {
              selectedImages.forEach((id, path) {
                print('选择的图片ID: $id, 路径: $path');
              });
            }
          },
          child: const Text('选择图片'),
        ),
      ),
    );
  }
}

2.2 自定义图片选择器

如果你需要自定义图片选择器的标题或其他属性，可以直接使用PhotoPicker组件：

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('自定义图片选择器'),
      ),
      body: const PhotoPicker(title: '我的图片选择器'),
    );
  }
}

3. 原生功能集成

该组件通过MethodChannel与OpenHarmony原生代码进行通信，主要功能包括：

获取设备图片列表
生成图片缩略图
访问原图
判断媒体类型

在OpenHarmony原生端，插件通过PhotoPickerPlugin.ets实现了这些功能的具体逻辑，确保与Flutter端的无缝对接。

五、注意事项

权限配置：确保在OpenHarmony应用的配置文件中添加了图片访问权限：

{
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.READ_MEDIA",
        "reason": "需要读取媒体文件",
        "usedScene": {
          "ability": ["EntryAbility"],
          "when": "inuse"
        }
      }
    ]
  }
}