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

Flutter 三方库 image_picker 鸿蒙化图片选择器集成

摘要

image_picker 是 Flutter 生态中用于从相册选择图片或拍摄照片的常用插件。本文基于 OpenHarmony TPC 仓库的适配版本，详细讲解 image_picker 在鸿蒙项目中的接入流程、权限配置和核心 API 使用。

核心要点：

• 配置媒体和相机权限
• 支持从相册选择和相机拍摄
• 处理图片选择常见问题

一、图片选择架构

二、接入步骤

2.1 配置 pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  
  image_picker:
    git:
      url: https://atomgit.com/openharmony-tpc/flutter_packages.git
      path: packages/image_picker/image_picker

2.2 配置权限（module.json5）

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.READ_MEDIA",
        "reason": "$string:read_media_reason",
        "usedScene": { "abilities": ["EntryAbility"], "when": "inuse" }
      },
      {
        "name": "ohos.permission.CAMERA",
        "reason": "$string:camera_reason",
        "usedScene": { "abilities": ["EntryAbility"], "when": "inuse" }
      }
    ]
  }
}

2.3 核心代码示例

import 'package:image_picker/image_picker.dart';

class ImagePickerService {
  final ImagePicker _picker = ImagePicker();

  // 从相册选择图片
  Future<String?> pickImageFromGallery() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    return image?.path;
  }

  // 从相机拍摄照片
  Future<String?> takePhoto() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.camera);
    return image?.path;
  }
}

三、运行成功截图

–

附录：Schema.org 结构化数据

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Flutter 三方库 image_picker 鸿蒙化图片选择器集成",
  "description": "基于 OpenHarmony TPC 仓库，详细讲解 image_picker 在鸿蒙项目中的接入流程、权限配置与图片选择功能实现。",
  "author": { "@type": "Person", "name": "OpenHarmony 跨平台开发者" },
  "publisher": { "@type": "Organization", "name": "OpenHarmony 跨平台社区", "url": "https://openharmonycrossplatform.csdn.net" },
  "datePublished": "2026-05-07",
  "dateModified": "2026-05-07",
  "mainEntityOfPage": "https://openharmonycrossplatform.csdn.net",
  "keywords": ["开源鸿蒙", "OpenHarmony", "Flutter for OpenHarmony", "image_picker", "图片选择", "三方库适配"],
  "inLanguage": "zh-CN"
}
</script>