插件介绍

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 => '录制中...';
}

主要配置参数说明

参数名 类型 默认值 描述
enableRecording bool false 是否允许录像
onlyEnableRecording bool false 是否仅允许录像
enableTapRecording bool false 是否允许单击录像
enableAudio bool true 是否录制音频
maximumRecordingDuration Duration? 15秒 最大录制时长
minimumRecordingDuration Duration 1秒 最小录制时长
resolutionPreset ResolutionPreset max 相机分辨率预设
preferredFlashMode FlashMode off 闪光灯模式
lockCaptureOrientation DeviceOrientation? null 锁定拍摄方向
preferredLensDirection CameraLensDirection back 首选摄像头方向
enableSetExposure bool true 允许点击对焦
enablePinchToZoom bool true 允许双指缩放

总结

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

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


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

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐