Flutter中使用image_picker如何限制可选择的图片数量

从image_picker: ^0.8.9版本开始，官方已经新增了maxImages参数可以直接在原生层面限制多选数量，优先推荐使用该方案；如果使用的是旧版本依赖不方便升级，也可以自己手动做拦截校验。

方案1：使用官方内置参数（推荐） #

直接修改_onImageButtonPressed方法中调用pickMultiImage的代码，新增maxImages: 4参数即可，系统相册会直接限制用户最多选择4张，无需额外处理业务逻辑：

void _onImageButtonPressed(ImageSource source,
    {BuildContext context, bool isMultiImage = false}) async {
  if (isMultiImage) {
    try {
      final pickedFileList = await _picker.pickMultiImage(
        maxWidth: 66,
        maxHeight: 66,
        imageQuality: 66,
        maxImages: 4, // 新增这一行即可实现原生端限制
      );
      setState(() {
        _imageFileList = pickedFileList;
      });
    } catch (e) {
      setState(() {
        _pickImageError = e;
      });
    }
  }
}

方案2：手动拦截判断（兼容旧版本image_picker） #

如果你的依赖版本低于0.8.9没有maxImages参数，可以在拿到选中图片列表后自行做长度校验，超过4张时弹出提示并截断列表：

void _onImageButtonPressed(ImageSource source,
    {BuildContext context, bool isMultiImage = false}) async {
  if (isMultiImage) {
    try {
      final pickedFileList = await _picker.pickMultiImage(
        maxWidth: 66,
        maxHeight: 66,
        imageQuality: 66,
      );
      if (pickedFileList != null) {
        if (pickedFileList.length > 4) {
          // 给用户提示最多选4张
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('最多只能选择4张图片'))
          );
          // 只保留前4张，也可以直接清空列表让用户重新选择
          setState(() {
            _imageFileList = pickedFileList.sublist(0, 4);
          });
        } else {
          setState(() {
            _imageFileList = pickedFileList;
          });
        }
      }
    } catch (e) {
      setState(() {
        _pickImageError = e;
      });
    }
  }
}

如果你的业务是支持追加选图（已经选了部分图片后可以继续加选），只需要在判断时叠加已有图片的总数量，限制总和不超过4即可。

内容的提问来源于stack exchange，提问作者M Al