Flutter鸿蒙跨平台插件:微信 UI 风格相机选择器 使用指南
fluttertpc_flutter_wechat_camera_picker是一款专为鸿蒙平台优化的Flutter相机插件,完美复刻微信8.3.x风格的相机界面。支持图片拍摄和视频录制功能,提供对焦控制、双指缩放、曝光调节等专业操作,可自定义分辨率、闪光灯模式、录制时长等参数。该插件基于OpenHarmony SIG的相机组件开发,需要配置相机、录音等权限,支持主题定制和国际化。开发者可通过简单
插件介绍
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
更多推荐

所有评论(0)