第二百七十九回

发布时间:2024年01月21日

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

在这里插入图片描述

1. 概念介绍

我们在前面章回中介绍了加载本地图片和播放视频相关的内容,它们需要获取文件在本地存储的绝对路径,我们在很早的章回中介绍过path_provider包,它可以协助开
发者获取到本地存储的路径,不过没有可以视化的界面操作,本章回中将介绍一种通过可视化操作获取文件路径的方法,并且在此基础上获取图片文件。

2. 思路与方法

2.1 实现思路

我们通过三方包image_picker来获取文件路径,而且是通过可视化操作的方式来获取文件,我们只需要发出一个指令就可以打开手机上的文件系统,接下来就可以在该
文件系统中以可视化的方式选择文件,选择文件后可以获取到该文件在文件系统中的绝对路径。这个包是Flutter官方提供的包,我们可以放心使用,而且在Android系
统中不需要获取文件读写权限(早期版本需要,最新版本不需要,具体的版本号可以参考官方文档).我们在接下来的章回中将详细介绍该包的使用方法,包含获取图片文件
和视频文件,以及通过相机来获取图片和视频文件。

2.2 实现方法

介绍完具体的实现思路后,我们介绍详细的实现方法。

  • 在yaml配置文件中添加包,并且获取包到项目中;
  • 创建文件选择器对象,也就是包中提供的ImagePicker类的实例;
  • 使用文件选择器的pickImage()方法获取图片文件,该方法将返回图片文件在本地存储中的相对路径;
  • 获取到文件路径后就可以使用Image组件的file()方法加载图片文件。
    上面的步骤中使用了ImagePicker的pickImage()方法,该方法返回的是Future<XFile?>类型的对象,因此我们需要在Future的then方法来获取文件路径。此
    外,该方法需要异步运行,因为获取文件路径是比较耗时的操作。

3. 示例代码

ImagePicker imagePicker = ImagePicker();

XFile? _mediaFile;

double imgWidth = 200;
double imgHeight = 400;

///注意获取图片需要异步操作
Future<XFile?> getImageFile() async {
  var imgFile = await imagePicker.pickImage(
    source: ImageSource.gallery,
    maxWidth: imgWidth,
    maxHeight: imgHeight,
    imageQuality: 10,
  );
  return imgFile;
}

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

///显示图片文件
_mediaFile == null
    ? const Icon(Icons.image)
    : (_mediaFile!.path.isEmpty
        ? const Text("do not select image")
        : Image.file(
            File(_mediaFile!.path),
            width: imgWidth,
            height: imgHeight,
            errorBuilder: (context, error, trace) {
              return Text("load image error: $error");
            },
          ))

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

4. 内容总结

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

  • Flutter官方提供了image_picker包,该包以可视化操作的方式获取文件路径;
  • 使用包中的pickImage()方法可以获取到当前手机文件系统中图片文件的相对路径;
  • 加载图片文件前需要检查文件路径的可靠性,不然可能导致Image组件无法加载图片文件;
    看官们,与"如何选择单个图片文件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论
文章来源:https://blog.csdn.net/talk_8/article/details/135725987
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。