第二百二十四回如何加载本地图片

原创已于 2024-01-17 19:13:54 修改 · 534 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发Flutter #加载本地图片 #显示本地图片

于 2023-12-23 20:39:19 首次发布

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

本文介绍了在Flutter中加载本地图片的步骤，包括使用Image.file()方法、处理加载过程和错误的frameBuilder和errorBuilder属性，以及通过getExternalStorageDirectory获取图片路径。

文章目录

1. 概念介绍
2. 实现方法
- 2.1 主要步骤
- 2.2 注意事项
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"如何加载网络图片"相关的内容，本章回中将介绍 如何加载本地图片.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在上一章回中介绍的内容与图片有关，本章回中仍然介绍图片相关的知识：加载本地图片。我们在这里说的本地图片表示图片存储于手机自带的文件系统中，我们可以通过AndroidStudio的DeviceFileManger中看到图片。

2. 实现方法

2.1 主要步骤

加载本地图片的主要是步骤是使用file()方法，它是image类的静态方法，可以直接拿来使用。该方法提供了一些常用的属性，详细如下：

color属性:主要用来修改图片的颜色；
frameBuilder属性: 主要用来控制图片从本地加载过程中显示的内容；
errorBuilder属性: 主要用来控制图片从本地加载失败后显示的内容；

该方法还有一个没有命名的属性:file，该属性主要用来存放图片的绝对地址，这个是必不可少的内容。

2.2 注意事项

在加载本地图片时需要处理加载过程和加载错误，加载错误时通过errorBuilder属性控制，该属性是方法类型，它会把错误的信息通过方法的参数传递出来，我们可以依据错误信息做相关的处理。

加载过程中通过frameBuilder属性控制，该属性也是方法类型，它会把加载的帧数和加载完后的图片通过参数传递出来，我们可以显示图片加载的帧数。稍后我们将通完示例代码来演示。

3. 示例代码

///对应目录：storage/emulated/0/Android/data/package_name/files
Future<Directory?>? _externalDocumentsDirectory;
String filePath = "";
  _externalDocumentsDirectory = getExternalStorageDirectory();

  _externalDocumentsDirectory?.then((value) {
    debugPrint("current path: ${value?.path} ");
    setState(() {
      filePath = "${value?.path}/switch.png";
    });
  });

Image.file(
  File(filePath),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  fit: BoxFit.fill,
  ///处理文件导入正确相关的内容
  frameBuilder:(context,child,frame,wasSynchronouslyLoaded) {
    if(wasSynchronouslyLoaded) {
      return child;
    }else {
      // return Text("frame:${frame.toString()}");
      return child;
    }
  },
  ///处理文件导入错误相关的内容
  errorBuilder: (context,error,trace) {
    debugPrint("load file error: ${error.toString()}");
    return Text(error.toString());
  },
),

上面的示例代码中演示了如何使用Image的file()方法加载本地图片，同时处理了图片加载过程和加载错误的业务逻辑，不过我们处理的的比较简单，只是显示一个加载中或者加载错误的文字信息。大家可以依据自身业务逻辑进行相关的处理。

此外，代码中处理图片加载中的业务时可以判断帧数，通常加载完第一帧时就会返回图片信息，不过这个帧数与图片自身有关，有些图片只有一帧，有些图片包含多帧。因此这个frameBuilder属性与具体的图片有关，可以不去处理它。

代码中使用了getExternalStorageDirectory()方法，该方法是path_provider包提供的接口，它可以获取到当前存储的绝对位置，具体的位置信息可以参考我们在代码中的文字注释。我们提前在该位置所在的目录中存放了一个名叫switch.png的图片，运行程序程序可以看到该图片，大家可以替换成自己文件系统中的图片文件，或者不放图片文件，此时会显示错误信息。