我们在上一章回中介绍了"如何自定义选择器界面"相关的内容,本章回中将介绍wechat_camera_picker这个三方包.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在本章回中介绍的wechat_camera_picker包是一个三方包,该包主要用来获取图片或者视频文件,它的功能类似前面章回中介绍的wechat_assets_picker包,
不过它从是通过相机来获取图片或者视频文件,而wechat_assets_picker包是从相册中获取图片和视频文件,这两个包都是国内的一个flutter兴趣小组编写的,它
们实现的功能相同,只是是图片源不同。我们将在本章回中介绍如何通过wechat_camera_picker包来获取图片和视频文件。
2. 思路与方法
2.1 使用思路
调用包中提供的接口获取图片和视频文件,然后再从接口的返回值中读取被选择的图片和视频。在调用接口时可以通过接口的参数来指定一些功能要求。这个思路比较好
理解,我们将在接下来的小节中介绍具体的使用方法,其中将包含各种使用细节。
2.2 使用方法
- 在yaml文件中添加包,添加时需要注意包的版本,不同的版本对应不同的flutter版本;
- 创建CameraPickerConfig对象,用来指定获取图片或者视频时相关的参数,常用的是图片分辨率;
- 调用包中的pickFromCamera接口获取图片和视频,该接口是异步接口,使用时要处理相关的错误信息;
- 从接口返回的结果中获取图片和视频文件,可以显示出来,或者上传到网络;
有些看官可能觉得上面的方法比较抽象,我们将在接下来的小节中通过具体的示例代码来演示。
3. 示例代码
final CameraPickerConfig cameraPickerConfig = const CameraPickerConfig(
enableRecording: true,
///是否支持录像功能
enableTapRecording: true,
///是否可以单击录像
shouldAutoPreviewVideo: true,
shouldDeletePreviewFile: true,
resolutionPreset: ResolutionPreset.high,
///设定分辨率
maximumRecordingDuration: Duration(seconds: 10),
minimumRecordingDuration: Duration(seconds: 3),
);
ElevatedButton(
onPressed: () async {
debugPrint("");
///可以不带config获取图片,但是不能获取视频
// assetEntity = await CameraPicker.pickFromCamera(context);
///可以通过config获取图片和视频,并且对图片和视频做相关的配置
assetEntity = await CameraPicker.pickFromCamera(context,
pickerConfig: cameraPickerConfig);
///如果选择了图片就更新assetEntity中的值,否则不去处理
if (assetEntity != null) {
setState(() {});
}
},
child: const Text("Pick Image by Camera"),
),
我们在上面的示例代码中把获取图片和视频的接口封装到了按钮中,这样在点击按钮时将打开后置相机,轻按拍照长按录像,相机窗口的UI风格和微信发朋友圈时的风格
完全相同,我在这里就不演示了。大家可以自己动手去实践,或者打开手里的微信看一看。此外,代码中还有一些细节需要说明:
- 接口返回的文件AssetEntity类型,而且一次只返回一个图片或者视频文件;
- 接口的参数是pickerConfig,主要用来控制录像时的相关功能,也可以不配置这个参数;
- 接口是异步操作,因此示例代码中使用async/await关键字,也可以通过Future来运行;
4. 内容总结
最后,我们对本章回中内容做一个全面的总结:
- wechat_camera_picker包主要用来通过相机获取图片和视频文件;
- wechat_camera_picker包在获取图片和视频文件时使用和微信相同的界面风格;
- 我们可以使用包中的pickFromCamera接口来获取图片和视频文件,注意接口是异步接口;
- 接口可以通过参数配置视频相关功能,也可以不使用参数,此时只能通过接口获取图片,不能获取视频;
- 接口可以返回单个图片和视频文件,文件的类型相同,都是AssetEntity类型,我需要从中区分图片还是视频;
看官们,与"wechat_camera_picker简介"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!