在 Flutter 中有多种方式,用来加载不同形式的图片:
- Image:通过ImageProvider来加载图片
- Image.asset:用来加载本地资源图片
- Image.file:用来加载本地(File文件)图片
- Image.network:用来加载网络图片
- Image.memory:用来加载Uint8List资源(byte数组)图片
Image 的一个参数是 ImageProvider,所有形式的图片加载都是依赖它,这个类里面就是实现图片加载的原理。用法如下:
new Image(image: new AssetImage('images/icon.png'));
new Image(image: new NetworkImage('https://profile.csdnimg.cn/E/8/A/1_chen1234219'))
需要在 pubspec.yaml 文件中声明一下:
# To add assets to your application, add an assets section, like this:
assets:
- images/icon.png
- images/2.0x/icon.png
- images/3.0x/icon.png
用法如下:
new Image.asset('images/icon.png')
加载一个本地 File 图片,比如相册中的图片,用法如下:
new Image.file(new File('/storage/xxx/xxx/test.jpg'))
加载一个网络图片,用法如下:
new Image.network('https://profile.csdnimg.cn/E/8/A/1_chen1234219')
加载字节流数据图片,用法如下:
new Image.memory(bytes)
以上讲述的基本加载图片模式,更多相关API请看以下代码:
/*
const Image({
Key key,
@required this.image,
Image:通过ImageProvider来加载图片
Image.asset:用来加载本地资源图片
Image.file:用来加载本地(File文件)图片
Image.network:用来加载网络图片
Image.memory:用来加载Uint8List资源(byte数组)图片
this.frameBuilder,//图片帧处理 ,比如图片边距设置,加载动画之类的。
this.loadingBuilder,//图片加载的时候一些处理
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,//控件宽度
this.height,//控件高度
this.color,//图片背景色
this.colorBlendMode,//与color属性需要配合使用,就是颜色和图片混合
this.fit,//设置图片填充方式
fit:BoxFit.contain,//尽量撑满容器,并保持原图比例,容器可能会留白
fit:BoxFit.fill,//撑满容器,图片拉伸
fit:BoxFit.fitWidth,//图片横向撑满容器,图片被裁剪
fit:BoxFit.fitHeight,//图片纵向撑满容器,图片被裁剪
fit:BoxFit.cover,//图片等比拉伸撑满容器,图片可能被裁剪
fit:BoxFit.scaleDown,//无论容器大小,保持图片大小不变剧中显示
fit: BoxFit.fill, //撑满容器,图片拉伸
this.alignment = Alignment.center,//控制图片摆放的位置
this.repeat = ImageRepeat.noRepeat,//重复
repeat: ImageRepeat.repeat, //重复充满容器
repeat: ImageRepeat.repeatX,//横向重复
repeat: ImageRepeat.repeatY,//纵向重复
this.centerSlice,//将图片已.9的方式进行切割拉伸
this.matchTextDirection = false,
this.gaplessPlayback = false,//当加载新图片时,如果为true保留旧图片的显示,如果为false删除旧图片留空,直到新图标加载完成显示
this.filterQuality = FilterQuality.low,图像过滤器的质量级别。(渲染模式的质量),默认 FilterQuality.low
})
*/
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var img = AssetImage("images/icon.png");
return MaterialApp(
title: "Flutter Demo",
color: Colors.white,
home: Scaffold(
appBar: AppBar(
title: const Text('Image Sample'),
),
body: Container(
child: SingleChildScrollView(
child: Column(
children: <Image>[
Image.network(
"https://profile.csdnimg.cn/E/8/A/1_chen1234219",
frameBuilder: (BuildContext context, Widget child, int frame,
bool wasSynchronouslyLoaded) {
if (wasSynchronouslyLoaded) {
return child;
}
return AnimatedOpacity(
child: child,
opacity: frame == null ? 0 : 1,
duration: const Duration(seconds: 1),
curve: Curves.easeOut,
);
},
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes
: null,
),
);
},
),
Image(
image: img,
fit: BoxFit.fill,
),
Image(
image: img,
fit: BoxFit.contain,
),
Image(
image: img,
fit: BoxFit.cover,
),
Image(
image: img,
fit: BoxFit.fitWidth,
),
Image(
image: img,
fit: BoxFit.fitHeight,
),
Image(
image: img,
fit: BoxFit.scaleDown,
),
Image(
image: img,
fit: BoxFit.none,
),
Image(
image: img,
repeat: ImageRepeat.repeatY,
)
].map((e) {
return Row(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
child: Container(
width: 100.0,
height: 200.0,
child: e,
),
),
Text(
e.fit.toString(),
style: TextStyle(fontSize: 16.0),
)
],
);
}).toList()),
),
),
));
}
}