自己做网站网页文件在哪里,南京环力建设有限公司网站,兰州网站制作培训班,wordpress 页面添加图标文章目录 1. 概念介绍2. 方法与细节2.1 实现方法2.2 具体细节 3. 示例代码4. 内容总结 我们在上一章回中介绍了如何选择视频文件相关的内容#xff0c;本章回中将介绍如何混合选择图片和视频文件.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍
我… 文章目录 1. 概念介绍2. 方法与细节2.1 实现方法2.2 具体细节 3. 示例代码4. 内容总结 我们在上一章回中介绍了如何选择视频文件相关的内容本章回中将介绍如何混合选择图片和视频文件.闲话休提让我们一起Talk Flutter吧。 1. 概念介绍
我们在前面章回中介绍了选择图片和视频文件相关的内容不过是图片和视频分开单独选择的就是说每次选择时只能单独选择图片或者单独选择视频文件能不能在选择 文件的时候既可以选择图片又可以选择视频呢可以我们将在本章回中介绍如何同时选择图片和视频文件。
2. 方法与细节
包中提供了pickMedia()方法来选择图片或者视频文件我们在接下来的小节中将介绍具体的实现方法和相关细节。
2.1 实现方法
下面是选择图片或者视频文件的实现方法不过该方法中不包含导入包相关的操作因为我们在前面章回中已经导入了image_picker包。
创建文件选择器对象也就是包中提供的ImagePicker类的实例使用文件选择器的pickMedia()方法获取图片或者视频文件上一步中的方法将返回图片或者视频文件在本地存储中的相对路径判断文件类型并且依据文件类型来显示图片文件或者播放视频文件 注意不论是图片文件还是视频文件获取到文件路径后都要介绍文件路径的可靠性否则会引起程序异常。
2.2 具体细节
上面的步骤中使用了ImagePicker的pickMedia()方法该方法返回的是FutureXFile类型的对象因此我们需要通过Future的then方法来获取图片或者视 频文件的路径。此外该方法需要异步运行因为获取图片或者视频文件路径是比较耗时的操作。
3. 示例代码
XFile? _mediaFile;ImagePicker imagePicker ImagePicker();double imgWidth 200;
double imgHeight 400;FutureXFile? getMedia() async {var file await imagePicker.pickMedia(maxHeight: imgHeight, maxWidth: imgWidth, imageQuality: 100);return file;
}ElevatedButton(onPressed: () {getMedia().then((value) {setState(() {_mediaFile value;});});},child: const Text(load multiMedia),
),上面的示例代码中演示了如何混合获取图片和视频文件我们在代码中把pickMedia()方法封装成了异步方法并且将它绑定到按钮上这样就可以在点击按钮时发出获 取图片或者视频文件的指令此时会打开一个文件选择器的窗口我们可以在该窗口中以可视化操作的方式选择图片或者视频文件。代码中没有演示显示图片和播放视频文件的方法详细内容可以参考前面章回中的内容因为我们刚刚介绍完所以就不再详细演示了。不过有些细节我们还需要说明代码中显示图片或者播放视频文件前需要检查文件路径文件路径 在程序最开始运 行时为null,在程序运行后但是没有选择任何图片或者视频文件时文件路径不为空而是为empty这点需要特别注意。此外,因为是混合选择图片或者视频文件所以我们需要判断文件的类型此时使用前面章回介绍的mime包就可以。获取到文件类型后可以使用Image组件来显示图片文件或者 使用VideoPlayer组件来播放视频文件示例代码中没有这部分代码大家参考前面章回中的示例代码就可以。
4. 内容总结
最后我们对本章回的内容做一个全面的总结
Flutter官方提供了image_picker包该包以可视化操作的方式获取图片或者视频文件路径使用包中的pickMedio()方法可以获取到当前手机文件系统中图片文件或者视频文件的相对路径显示图片或者播放视频文件前需要判断文件类型通过mime包可以获取到文件的类型显示图片或者播放视频文件前需要检查文件路径的可靠性不然可能无法显示图片或者无法播放视频 看官们与如何混合选择图片和视频文件相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
