第二百八十回

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

1. 概念介绍

我们在上一章回中介绍了如何选择单个图片文件，主要是通过image_picker包来实现，本章回中继续介绍选择图片相关的内容，不过本章回中介绍的是选择多个图片文
件。选择图片文件还是使用image_picker包提供的方法，而且仍然是通过可视化操作来选择图片文件。

2. 方法与细节

2.1 实现方法

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

• 创建文件选择器对象，也就是包中提供的ImagePicker类的实例；
• 使用文件选择器的pickMultiImage()方法获取图片文件，该方法将返回图片文件在本地存储中的相对路径；
• 获取到文件路径后就可以使用Image组件的file()方法加载图片文件。

2.2 具体细节

上面的步骤中使用了ImagePicker的pickMultiImage()方法，该方法返回的是Future<List<XFile>>类型的对象，因此我们需要通过Future的then方法来
获取文件路径。此外，该方法需要异步运行，因为获取文件路径是比较耗时的操作。该方法返回的是一个文件列表，里面包含多个图片文件。

3. 示例代码

ImagePicker imagePicker = ImagePicker();

List<XFile>? _mediaFileList;

double imgWidth = 200;
double imgHeight = 400;

///注意获取图片需要异步操作
Future<List<XFile>> getImageFiles() async {
  var list = await imagePicker.pickMultiImage(
      maxWidth: imgWidth, maxHeight: imgHeight, imageQuality: 10);
  return list;
}

///通过按钮来发出指令
ElevatedButton(
  onPressed: () {
    getImageFiles().then((value) {
      ///因为是异步，所以需要通过setState更新数据源
      setState(() {
        ///返回的路径是app下的缓冲目录：data/user/0/packagename/cache/scaled_1000000010.jpg
        // debugPrint("path: v${value[0].path}");
        _mediaFileList = value;
      });
    });
  },
  child: const Text("load multi image"),
),

///显示多张图片
ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: _mediaFileList == null ? 1 : _mediaFileList?.length,
  itemBuilder: (context, index) {
    return (_mediaFileList == null
        ? const Text("default image")
        : (_mediaFileList!.isEmpty
            ? const Text("do not select image")
            : Row(
                children: [
                  Image.file(
                    File(_mediaFileList![index].path),
                    width: imgWidth,
                    height: imgHeight,
                    errorBuilder: (context, error, trace) {
                      return Text("load image error: $error");
                    },
                  ),

                  ///通过窗口来控制分隔线的宽度
                  Container(
                    color: Colors.lightGreen,
                    width: 4,
                    height: imgHeight,
                    child: const SizedBox.shrink(),
                  ),
                ],
              )));
  },
),

上面的示例代码中演示了如何获取多个图片文件，代码把pickMultiImage()方法封装成了异步方法，并且将它绑定到按钮上，这样就可以在点击按钮时发出获取图片文
件的指令，此时会打开一个文件选择器的窗口，我们可以在该窗口中以可视化操作的方式选择图片文件，图片上会显示小圆圈，主要用来提示用户哪些图片被选择。代码中
显示图片时仍然使用Image组件，不过在它外层嵌套了一个ListView,这样可以滚动显示多张图片。代码中加载图片前需要检查文件路径，文件路径在程序最开始运行时
为null,在程序运行后，但是没有选择任何图片文件，此时的文件路径不为空，而是为empty，这点需要特别注意，不然无法正确显示图片文件。此外，我们获取到的图片
文件路径是一个相对路径，它并不是图片文件的绝对路径。

4. 内容总结

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

• Flutter官方提供了image_picker包，该包以可视化操作的方式获取文件路径；
• 使用包中的pickMultiImage()方法可以获取到当前手机文件系统中图片文件的相对路径；
• 获取到结果包含多个图片的路径，因此我们建议使用ListView包含Image组件的方式来显示多张图片；
• 加载图片文件前需要检查文件列表和列表中每个文件路径的可靠性，不然可能导致Image组件无法加载图片文件；
  看官们，与"如何选择多个图片文件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!