第二百九十一回

我们在上一章回中介绍了"如何混合选择图片和视频文件"相关的内容，本章回中将介绍如何混合选择多个图片和视频文件.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在上一章回中介绍了混合选择图片和视频文件，不过选择文件时不论是图片还是视频，只能选择一个文件，这个显然无法满足项目需求。本章回中将介绍如何混合选择
多个图片和视频文件，也就是说不限定图片或者视频文件的数量。

2. 方法与细节

包中提供了pickMultipleMedia()方法来混合选择图片或者视频文件，它和我们在上一章回中介绍的pickMedia()方法的使用方法类似，我们在接下来的小节中将
介绍具体的实现方法和相关细节。

2.1 实现方法

下面是混合选择多个图片或者视频文件的实现方法，不过该方法中不包含导入包相关的操作，因为我们在前面章回中已经导入了image_picker包。

• 创建文件选择器对象，也就是包中提供的ImagePicker类的实例；
• 使用文件选择器的pickMultipleMedia()方法获取图片或者视频文件；
• 上一步中的方法将返回图片或者视频文件在本地存储中的相对路径；
• 判断文件类型，并且依据文件类型来显示图片文件或者播放视频文件；
  注意：不论是图片文件还是视频文件，获取到文件路径后都要介绍文件路径的可靠性，否则会引起程序异常。

2.2 具体细节

上面的步骤中使用了ImagePicker的pickMultipleMedia()方法，该方法返回的是Future<List<XFile>>类型的对象，因此我们需要通过Future的then方法
来获取图片或者视频文件的路径。此外，该方法需要异步运行，因为获取图片或者视频文件路径是比较耗时的操作,而且它会获取多个图片或者视频文件的路径。

3. 示例代码

List<XFile>? _multiMediaFileList;ImagePicker imagePicker = ImagePicker();double imgWidth = 200;
double imgHeight = 400;Future<List<XFile>> getMultiMedia() async {var list = await imagePicker.pickMultipleMedia(maxHeight: imgHeight, maxWidth: imgWidth, imageQuality: 100);return list;
}ElevatedButton(onPressed: () {getMultiMedia().then((value) {setState(() {_multiMediaFileList = value;});});},child: const Text("load multiMedia"),
),

上面的示例代码中演示了如何混合获取多个图片和视频文件，我们在代码中把pickMultipleMedia()方法封装成了异步方法，并且将它绑定到按钮上，这样就可以在点
击按钮时发出获取图片或者视频文件的指令，此时会打开一个文件选择器的窗口，我们可以在该窗口中以可视化操作的方式选择图片或者视频文件。图片或者视频文件上会
显示小圆圈，主要用来提示用户哪些图片被选择。 代码中没有演示显示图片和播放视频文 件的方法，详细内容可以参考前面章回中的内容，因为我们刚刚介绍完，所以就
不再详细演示了。不过有些细节我们还需要说明：代码中显示图片或者播放视频文件前需要 检查文件路径，文件路径在程序最开始运 行时为null,在程序运行后，但是没
有选择任何图片或者视频文件时文件路径不为空，而是为empty，这点需要特别注意。此外,因为是混合选择图片或者视频文件，所以我们需要判断文件的类型，此时使用
前面章回介绍过的mime包就可以。获取到文件类型后可以使用Image组件来显示图片文件或者使用VideoPlayer组件来播放视频文件，示例代码中没有这部分代码，大
家参考前面章回中的示例代码就可以。此外，我们建议在Image组件或者VieoPlayer组件外层嵌套了一个ListView,这样可以滚动显示多张图片或者视频,示例代码中
没有列出来，大家可以参考前面章回中显示多个图片的示例代码。

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• Flutter官方提供了image_picker包，该包以可视化操作的方式获取图片或者视频文件路径；
• 使用包中的pickMultipleMedio()方法可以获取到当前手机文件系统中多个图片文件或者视频文件的相对路径；
• 显示图片或者播放视频文件前需要判断文件类型，通过mime包可以获取到文件的类型；
• 显示图片或者播放视频文件前需要检查文件路径的可靠性，不然可能无法显示图片或者无法播放视频；
• 显示图片或者播放视频文件时建议通过列表来实现，这样可以滑动显示多个图片或者视频文件；
  看官们，与"如何混合选择多个图片和视频文件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!