一、Image
构造方法
Image : 从ImageProvider中获取图片
Image.asset ：加载资源目录中的图片
Image.network：加载网络图片
Image.file：加载本地图片文件
Image.memory：加载Uint8List资源图片
属性
| 属性名 | 类型 | 简介 |
|---|---|---|
| image | ImageProvider | 用于自定义图片控件的情况 |
| width/height | double | 设置Image控件自身的宽高 |
| fit | BoxFit | 图片的填充模式 |
| color | Color | 图片颜色 |
| colorBlendMode | BlendMode | 对图片进行混合颜色处理，有多种值可选 |
| alignment | Alignment | 设置图片的对齐位置 |
| repeat | ImageRepeat | 设置图片的重复填充方式 |
| centerSlice | Rect | 类似与Android中的点9处理，在图片上定义某个矩形区域用于拉伸，这9个点其实就是八个方向加上正中 |
| gaplessPlayback | bool | 当ImageProvider发生变化时，显示新图片的过程中，如果值为true则保留旧图片直至显示出新图片为止；如果false，则不保留旧图片，直接空白等待下一张图片的加载 |
填充模式
enum BoxFit {
fill,
contain,
cover,
fitWidth,
fitHeight,
none,
scaleDown,
}
（一）首先使用network从网上拿一张图片，这是原图
原图
这是示例代码，高度为300，为了区分，设了个背景，下面看看各种填充状态下的图片展示
Container(
color: Colors.pink.shade50,
height: 300,
child: Image.network(
'https://c-ssl.duitang.com/uploads/item/202005/13/20200513144944_ZuAmS.jpeg',
fit: BoxFit.contain,
),
),
1.fill,显示整张图片，拉伸填充全部可显示区域
20220418164443.jpg
2. contain,默认模式，显示整张图片，按照原始比例缩放显示
WX20220418-164551.png
3. cover,按照原始比例缩放，可能裁剪，填满可显示区域
WX20220418-164733.png
4.fitWidth,按照原始比例缩放，可能裁剪宽度优先填满
WX20220418-164733.png
5.fitHeight,按照原始比例缩放，可能裁剪，高度优先填满
WX20220419-093630.png
6.none,图片居中显示，不缩放原图
WX20220419-093828.png
7. scaleDown,显示整张图片，只能缩小或者原图显示
20220419094158.jpg
（二）从本地拿一张图片
1.新建assets文件夹，放入准备好的图片，
WX20220419-095645.png
这个文件夹也可以创建二级文件夹，在pubspec.yaml中分别导入就好了
20220419100722.jpg
2.在pubspec.yaml导入图片资源路径，这里我要补充一个坑
如图，右边示例代码注释了，我以为解注释加上路径就可以，谁知报错，还不知所云（），最后按照样式手写一遍就好了
WX20220419-095955.png
报错截图
导入完资源，来看看效果，填充模式同上
Container(
color: Colors.pink.shade50,
height: 300,
child: Image.asset(
'assets/1112.png',
fit: BoxFit.cover,
)
),
小爷是本地图片
二、Icon
const Icon(Icons.phone_android,size: 40, color: Colors.green,),
可以设置颜色和大小，这里用的系统提供的图标
WX20220419-102748.png
本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~
网友评论