文章目录
- 1. 概念介绍
- 2. 实现方法
- 2.1 主要步骤
- 2.1 注意事项
- 3. 示例代码
- 4. 内容总结
我们在上一章回中介绍了"如何加载网络图片"相关的内容,本章回中将介绍如何加载本地图片.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在上一章回中介绍的内容与图片有关,本章回中仍然介绍图片相关的知识:加载本地图片。我们在这里说的本地图片表示图片存储于手机自带的文件系统中,我们可以
AndroidStuiod的DeviceFileManger中看到图片。
2. 实现方法
2.1 主要步骤
加载本地图片的主要是步骤是使用file()方法,它是image类的静态方法,可以直接拿来使用。该方法提供了一些常用的属性,详细如下:
- color属性:主要用来修改图片的颜色;
- frameBuilder属性: 主要用来控制图片从本地加载过程中显示的内容;
- errorBuilder属性: 主要用来控制图片从本地加载失败后显示的内容;
该方法还有一个没有命名的属性,该属性主要用来存放图片的绝对地址,这个是必不可少的内容。
2.1 注意事项
在加载网络图片时需要处理加载过程和加载错误,加载错误时通过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属性与具体的图片有关,可以不去处理它。
4. 内容总结
最后,我们对本章回的内容做一个全面的总结:
- 加载本地图片使用Image组件的file()方法;
- 加载图片时需要处理图片加载过程和加载错误的业务逻辑;
- 加载过程的属性与图片有关,可以依据实际业务来处理,或者不处理;
看官们,与"如何加载本地图片"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!