插件介绍

fluttertpc_flutter_wechat_camera_picker 是一个基于微信 UI 风格的 Flutter 相机选择器插件,专为鸿蒙平台适配优化。它提供了与微信 8.3.x 版本相似的相机界面体验,支持图片拍摄和视频录制功能,可以作为独立插件使用,也可以作为 wechat_assets_picker 的扩展组件。

核心特性

  • 微信风格 UI:完全复刻微信相机界面,包括曝光控制、对焦功能和拍摄按钮
  • 📷 图片拍摄:支持高分辨率图片拍摄,可自定义分辨率预设
  • 🎥 视频录制:支持带音频的视频录制,可设置最大和最小时长限制
  • 🎯 对焦控制:支持点击对焦和曝光调节,双指缩放功能
  • 🔧 丰富配置:提供多种配置选项,包括闪光灯模式、方向锁定、录制时长等
  • 🌐 国际化支持:内置中文、英文、越南语支持,可自定义文本内容
  • 🎨 主题定制:支持自定义主题颜色和界面元素

快速开始

环境要求

  • Flutter SDK 版本:≥ 3.3.0
  • 鸿蒙平台适配:基于 OpenHarmony SIG 提供的相机和视频播放器组件

依赖配置

在你的 Flutter 项目中,打开 pubspec.yaml 文件,添加以下依赖配置。注意使用 atomgit.com 作为 Git 源:

dependencies:
  flutter:
    sdk: flutter

  # 微信相机选择器插件
  fluttertpc_flutter_wechat_camera_picker:
    git:
      url: https://atomgit.com/openharmony-sig/flutter_packages.git
      path: packages/fluttertpc_flutter_wechat_camera_picker

  # 依赖的鸿蒙适配组件
  camera:
    git:
      url: https://atomgit.com/openharmony-sig/flutter_packages.git
      path: packages/camera/camera

  video_player:
    git:
      url: https://atomgit.com/openharmony-sig/flutter_packages.git
      path: packages/video_player/video_player

  photo_manager: ^2.7.0

权限配置

在鸿蒙平台上使用相机功能,需要在 module.json5 文件中添加相应权限:

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

API 使用指南

导入包

在需要使用相机选择器的 Dart 文件中导入包:

import 'package:wechat_camera_picker/wechat_camera_picker.dart';

基本使用

最简单的调用方式,直接打开相机选择器:

final AssetEntity? entity = await CameraPicker.pickFromCamera(context);

if (entity != null) {
  // 处理拍摄的文件
  print('拍摄成功: ${entity.id}');
}

高级配置

使用 CameraPickerConfig 可以自定义相机的各种行为:

final AssetEntity? entity = await CameraPicker.pickFromCamera(
  context,
  pickerConfig: CameraPickerConfig(
    // 启用视频录制
    enableRecording: true,
    // 设置最大录制时长
    maximumRecordingDuration: const Duration(seconds: 30),
    // 设置最小录制时长
    minimumRecordingDuration: const Duration(seconds: 2),
    // 启用音频录制
    enableAudio: true,
    // 分辨率预设
    resolutionPreset: ResolutionPreset.high,
    // 闪光灯模式
    preferredFlashMode: FlashMode.auto,
    // 锁定拍摄方向
    lockCaptureOrientation: DeviceOrientation.portraitUp,
    // 首选摄像头方向
    preferredLensDirection: CameraLensDirection.back,
    // 点击对焦
    enableSetExposure: true,
    // 双指缩放
    enablePinchToZoom: true,
    // 录制时上拉缩放
    enablePullToZoomInRecord: true,
    // 视频预览时自动播放
    shouldAutoPreviewVideo: true,
    // 错误处理
    onError: (Object error, StackTrace? stackTrace) {
      print('相机错误: $error');
    },
    // 拍摄完成回调
    onXFileCaptured: (XFile file) {
      print('文件生成: ${file.path}');
    },
    // 录制时长不足回调
    onMinimumRecordDurationNotMet: () {
      print('录制时长未达到最小时长');
    },
  ),
);

仅录像模式

如果需要仅启用录像功能,可以使用以下配置:

final AssetEntity? entity = await CameraPicker.pickFromCamera(
  context,
  pickerConfig: const CameraPickerConfig(
    enableRecording: true,
    onlyEnableRecording: true,
    enableTapRecording: true, // 单击开始录制
  ),
);

自定义主题

可以通过 theme 参数自定义相机界面的主题:

final AssetEntity? entity = await CameraPicker.pickFromCamera(
  context,
  pickerConfig: CameraPickerConfig(
    theme: ThemeData(
      primaryColor: Colors.blue,
      scaffoldBackgroundColor: Colors.black,
      brightness: Brightness.dark,
    ),
  ),
);

国际化配置

如果需要自定义文本内容,可以使用 textDelegate 参数:

final AssetEntity? entity = await CameraPicker.pickFromCamera(
  context,
  pickerConfig: CameraPickerConfig(
    textDelegate: CustomCameraPickerTextDelegate(),
  ),
);

// 自定义文本代理类
bool class CustomCameraPickerTextDelegate extends CameraPickerTextDelegate {
  
  String get confirm => '确定';

  
  String get cancel => '取消';

  
  String get recording => '录制中...';
}

主要配置参数说明

参数名类型默认值描述
enableRecordingboolfalse是否允许录像
onlyEnableRecordingboolfalse是否仅允许录像
enableTapRecordingboolfalse是否允许单击录像
enableAudiobooltrue是否录制音频
maximumRecordingDurationDuration?15秒最大录制时长
minimumRecordingDurationDuration1秒最小录制时长
resolutionPresetResolutionPresetmax相机分辨率预设
preferredFlashModeFlashModeoff闪光灯模式
lockCaptureOrientationDeviceOrientation?null锁定拍摄方向
preferredLensDirectionCameraLensDirectionback首选摄像头方向
enableSetExposurebooltrue允许点击对焦
enablePinchToZoombooltrue允许双指缩放

总结

fluttertpc_flutter_wechat_camera_picker 为鸿蒙平台提供了一个功能丰富、界面友好的相机选择器解决方案。它不仅复刻了微信相机的经典界面,还提供了高度可定制的配置选项,满足各种拍摄场景的需求。

通过简单的配置,开发者可以快速集成这个插件,为用户提供熟悉的微信风格相机体验,同时享受鸿蒙平台的原生性能优势。


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

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐