本文地址：https://blog.csdn.net/qq_40785165/article/details/117164586,转载需附上此地址
大家好，我是小黑，一个还没秃头的程序员~~~
请你相信，你的坚持，终将美好。
今天分享的内容是Flutter的Image组件，用来加载本地或者网络图片，源码地址：https://gitee.com/fjjxxy/flutter-study.git，效果如下：
（一）加载网络图片
Image.network(
"https://profile.csdnimg.cn/D/6/7/0_qq_40785165",
width: 100,
height: 100,
)
（二）加载图片并进行颜色混合
Container buildContainer(BlendMode blendMode) {
return Container(
width: 100,
height: 100,
decoration: BoxDecoration(color: Colors.grey),
//图片如果要设置大小，不能直接放在container里面，要再用一个组件包裹，不然没办法设置大小
child: Image.network(
"https://avatar.csdnimg.cn/D/6/7/3_qq_40785165_1608817824.jpg",
alignment: Alignment.center,
color: Colors.red,
colorBlendMode: blendMode,
));
}
| 参数 | 说明 |
|---|---|
| color | 混合的颜色 |
| colorBlendMode | 混合的模式，值比较多，这里就不介绍了，效果如下 |
有二十几种效果，这里就不介绍了，项目源码中都有，大家可以自己下载项目源码查看
（三）对齐方式
alignment参数对应一个Alignment组件，可以设置Image组件在容器中的对齐方式，代码如下：
Image.network(
"https://avatar.csdnimg.cn/D/6/7/3_qq_40785165_1608817824.jpg",
alignment: Alignment.center,
width: 80,
height: 80,
)
| 值 | 说明 | 截图 |
|---|---|---|
| Alignment.topLeft | 图片处于左上方 | |
| Alignment.topCenter | 图片处于中上方 | |
| Alignment.topRight | 图片处于右上方 | |
| Alignment.centerLeft | 图片处于中左方 | |
| Alignment.center | 图片处于中间 | |
| Alignment.centerRight | 图片处于中右方 | |
| Alignment.bottomLeft | 图片处于左下方 | |
| Alignment.bottomCenter | 图片处于中下方 | |
| Alignment.bottomRight | 图片处于右下方 | |
（四）图片显示效果
fit参数对应的是BoxFit组件，可是设置图片的拉伸显示效果，类似于Android原生中的scaleType属性，代码如下：
Image.network(
"https://img-blog.csdnimg.cn/img_convert/7c3b79791b1dd90edfa5a79cf12cae6a.png",
fit: BoxFit.cover,
)
| 值 | 说明 | 截图 |
|---|---|---|
| BoxFit.contain | 显示原比例，全图显示，图片被容器完全包含 | |
| BoxFit.cover | 充满容器，拉伸但是不变形 | |
| BoxFit.fill | 拉伸，充满容器，会变形 | |
| BoxFit.fitHeight | 高度充满为准 | |
| BoxFit.fitWidth | 宽度充满为准 | |
| BoxFit.none | 保持原图，显示中心位置，多出来的丢弃 | |
| BoxFit.scaleDown | 居中显示，如果需要，缩小图片以确保图片被容器包含。如果会缩小图像，那么它与“contain”相同，否则它与“none”相同 | |
（五）平铺效果
repeat参数对应的是ImageRepeat组件，可以在图片比容器小的情况下设置图片在容器中的平铺效果，代码如下：
Image.network(
"https://avatar.csdnimg.cn/D/6/7/3_qq_40785165_1608817824.jpg",
repeat: ImageRepeat.repeat,
)
| 值 | 说明 | 截图 |
|---|---|---|
| ImageRepeat.noRepeat | 不进行平铺 | |
| ImageRepeat.repeat | 水平和垂直方向都进行平铺 | |
| ImageRepeat.repeatX | 水平方向进行平铺 | |
| ImageRepeat.repeatY | 垂直方向进行平铺 | |
（六）圆角图片
圆角图片有两种实现方案：
1.对Container组件的边框参数进行设置，利用BorderRadius组件进行设置圆角，效果以及代码如下：
Container(
width: 100,
height: 100,
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://avatar.csdnimg.cn/D/6/7/3_qq_40785165_1608817824.jpg"),
fit: BoxFit.cover,
),
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(10)),
)
2.可以在Container组件中放置ClipOval组件，在ClipOval组件中进行图片加载，通过设置fit参数为BoxFit.cover即可实现圆形图片，效果以及代码如下：
Container(
width: 100,
height: 100,
color: Colors.red,
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: ClipOval(
child: Image.network(
"https://avatar.csdnimg.cn/D/6/7/3_qq_40785165_1608817824.jpg",
fit: BoxFit.cover,
),
))
（七）加载本地图片
加载本地图片有以下几个步骤
- 创建不同分辨率的文件夹存放图片
- 在代码中修改配置
- 加载本地图片
1.在项目的根目录下创建assets文件夹，在assets文件夹内新建images文件夹，随后可以在images文件夹底下创建2.0x，3.0x的文件夹，1.0x的图片可以直接放在images的文件夹底下，已适配各种分辨率的屏幕，也可以不用创建这些文件夹，直接将图片放在images底下，根据不同情况而定。效果如下：
2.修改pubspec.yaml文件配置，配置图片的文件夹，如下所示：
flutter:
...
assets:
- assets/images/
注意：这里配置的是包含所有图片包括子文件夹的文件夹路径，这样就可以不用配置所有的图片路径了
3.加载本地图片，效果以及代码如下：
注意：前者代码中需要写明图片地址是因为这张图片不在1.0x即images目录下，所以需要写明图片地址，否则会报错，后者图片存在于images目录下，并且其他分辨率的文件夹下也存在相同文件名的图片，到时候会自动选择相应分辨率文件夹的图片进行加载
到此为止，Flutter中网络图片加载以及本地图片加载的内容就介绍完毕了，真的是写的很认真了，多写才能熟能生巧，感兴趣的小伙伴可以下载源码看一下，希望大家可以点个star，支持一下小白的flutter学习经历，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏、评论，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!