Flutter图片控件开发详解
图片控件Image
- 加载网络图片，
- 静态图片，
- 本地图片，
- 设置placeHolder，
- 配置图片缓存，
- 如何加载Icon。
Image支持如下集中类型的构造函数
- Image 用于从ImageProvider获取图像；
- Image.asset 使用key从AssetBundle获取图像；
- Image.network 从网络URL获取图片。
- Image.file 从本地文件中获取图片。
- Image.memory 用于从Unit8List获取图像。
在加载项目中的图片资源时，为了让Image能够根据像素密度自动适配不同分辨率的图片，请使用AssetImage指定图像，并确保在widget树中的“Image” widget上方存在MaterialApp，WidgetApp或MediaQuery窗口的Widget。
Image支持一下类型的图片：
JPEG、PNG、gif、Animated gif、webp、Animated webP、BMP、WEBP。
加载网络图片：
Image.network('http://www.devio.org/img/avator.png')
加载静态图片：
- 在pubspec.yaml中声明图片路径。
assets：- images/my_icon.png
- 使用AssetImage访问图片资源。
Image(
height:30, width:30,
image: AssetImage(my_icon.png),
)
使用Image.asset加载静态图片：
Image.asset(my_icon.png, width:30, height:30)
加载本地图片(SD卡中： /sdcard/Download/Stack.png)：
- 加载完整路径的本地图片
import 'dart:io';
Image.file(File('/sdcard/Download/Stack.png')), - 加载相对路径的本地图片
a：在pubspec.yaml中添加path_provider插件。
import 'package:path_provider/path_provider.dart';
b：导入头文件
FutureBuilder(
future: _getLocalFile("Download/Stack.png"), // 传入相对路径
builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
return snapshot.data != null ? Image.file(snapshot.data!) : Container();
}),
/// 获取sd卡完整的路径
Future<File> _getLocalFile(String filename) async {
String dir = (await getExternalStorageDirectory())!.path;
File f = new File('$dir/$filename'); // 拼接完整的路径
return f;
}
如何设置placeholder？
从内存中加载placeholder
借助FadeImage，它能从内存，本地资源中加载placeholder。
- 安装transparent_image插件： transparent_image: ^0.1.0
- 使用内存中资源，加载placeholder
Stack(
children: [
Center(child: CircularProgressIndicator()),
Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage, // transparent_image
image: 'http://www.devio.org/img/avatar.png',
),
)
],
)
从本地加载placeholder
- 配置本地资源图片
flutter：
assets:- assets/loading.gif
- 加载本地资源图片走位placeholder
FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'http://www.devio.org/img/avatar.png',
)
如何配置图片缓存
借助 cached_network_image 插件，来从网络上加载图片，并将其缓存到本地，供下次使用。
import 'package:cached_network_image/cached_network_image.dart';
child: CachedNetworkImage(
placeholder: (context, url) => CircularProgressIndicator(), // transparent_image
imageUrl: 'https://picsum.photos/250?image=9',
),
使用Icons
const Icon(this.icon//IconDate, {
Key key,
this.size,//大小
this.color,//颜色
this.semanticLabel,//标志位
this.textDirection,//绘制方向，一般使用不到
})
从Icon的构造方法可以很清楚的看出Icon构造方法需要一个默认的类型为IconData类型的参数，我们可以构造一个自己的IconData，也可以使用Flutter提供的material_fonts。
使用自定义的Icon
使用自定义的我们需要构造一个：
const IconData(
this.codePoint, //必填参数，fonticon对应的16进制Unicode {
this.fontFamily,//字体库系列
this.fontPackage,//字体在那个包中，不填仅在自己程序包中查找
this.matchTextDirection: false, // 图标是否按照图标绘制方向显示
});
首先我我们需要向使用字体一样，在pubspec.yaml中配置我们的icon：
fonts:
- family: devio
fonts:
- asset: fonts/devio.ttf
接下来就可以使用了：
child: new Icon(new IconData(0xf5566, fontFamily: "devio"),
size: 100.0, color: Colors.blueAccent)
