Flutter中,加载并显示图片使用的是Image组件。我们先来看下这个构造函数:
Image的构造参数有一下几种分别是:
- Image:从Provider获取图像
- Image.asset:加载资源图片
- Image.file:加载本地图片文件
- Image.network:记载网络图片
- Image.memory:加载Uint8List资源图片
我们接下来看一下如何使用
class ImagePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Image.network('https://flutter.cn/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png'),
),
);
}
}
我们加载了一张网络图片。其他的使用也比较类似,这里不在赘述。我们看看provider如何使用。
class ImagePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Image(
image: NetworkImage('https://flutter.cn/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png'),
),
),
);
}
}
可以看到效果是一样的。ImageProvider是一个抽象类,Flutter为我们提供了一套实现,当然我们也可以自己去实现provider。
这一部分就是Flutter为我们提供的ImageProvider。实际上,开篇介绍的Image的不同构造函数中,就是使用了不同的Provider来实现的。我们在来看看其他的参数。
属性 | 类型 | 说明 |
---|---|---|
image | ImageProvider | ImageProvider是一个抽象类,Flutter为我们提供了一套实现,当然我们也可以自己去实现provider。 |
width/height | double | 显示区域的宽高设置,值得注意的是,不要和Image本身的大小混淆,Image Widget只是个容器,容器就有自己的大小,而显示的效果经常要和填充模式配合使用。 |
fit | BoxFit | 填充模式(下面有详细介绍)。 |
color | Color | 容器颜色 |
colorBlendMode | BlendMode | 图片混合模式,注意这个参数要混合Color使用才有作用。https://api.flutter.dev/flutter/dart-ui/BlendMode-class.html |
alignment | Alignment | 控制图片的在容器中的位置。 |
repeat | ImageRepeat | 设置容器比图片大时,图片的重复模式。 |
centerSlice | Rect | 如果图片被拉伸,那么是重哪个点开始拉伸。 |
gaplessPlayback | bool | 当provider改变的时候,重新加载的过程中,原图片是否保留。 |
fit:填充模式
BoxFit.fill 不按比例拉伸显示到全部容器。
BoxFit.contain 在保证原图像比例的情况下,尽可能的拉伸充满容器。
BoxFit.cover 保证原图像的比例缩放并充满容器,超出部分剪裁。
我们使用一个200x200的图像,Image容器的大小我们也设置200x200,我们可以看到显示是正常的。
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Image( image: NetworkImage(_path), width: 200, height: 200, fit: BoxFit.cover, ), ), ); }
我们现在改变宽度,为400.
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Image( image: NetworkImage(_path), width: 400, height: 200, fit: BoxFit.cover, ), ), ); }
可以看到图片被放大了,超出的部分被剪切掉。
BoxFit.fitWidth 同比缩放,缩放宽度直到宽度充满容器。
我们把这几个参数改一下
width: 200,
height: 500,
fit: BoxFit.fitWidth,width: 300,
height: 500,
fit: BoxFit.fitWidth,width: 300,
height: 200,
fit: BoxFit.fitWidth,应该显示原比例200x200大小
应该显示300x300大小
图片缩放300x300,但是会剪切掉一部分
BoxFit.fitHeight 同比缩放,缩放宽度直到高度充满容器(效果类似fitWidth)。
BoxFit.none 不进行任何缩放,显示原比例,容器容纳不下则剪切。
BoxFit.scaleDown 如果容器显示不下,则采用contain模式;如果容器可以容纳下则采用none。
=========================================================================
color/colorBlendMode 使用红色和图片进行混合
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Image( color: Colors.red, colorBlendMode: BlendMode.difference, image: NetworkImage(_path), width: 400, height: 200, fit: BoxFit.contain, ), ), ); }
===============================================================
repeat 设置x重复
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Image( colorBlendMode: BlendMode.difference, image: NetworkImage(_path), width: 400, height: 200, fit: BoxFit.contain, repeat: ImageRepeat.repeatX, ), ), ); }
总结:Flutter中可以使用Image Widget来显示图片,有多种图片的获取方式,也可以自己实现Provider来实现。接下来的文章会继续将常用Widget逐一介绍,在最后的系列中,会公开一个商业级的项目,感兴趣的小伙伴关注。如果您在阅读过程中发现错误,请及时留言给我,我会第一时间改正。也欢迎大家一切交流,共同进步,感谢支持!