4.Flutter 图片组件
Flutter 图片组件
一、Flutter图片组件.............................................................................................................. 1
二、Flutter引入本地图片....................................................................................................... 3
三、Flutter实现圆角以及实现圆形图片............................................................................... 4
四、Vscode调试Flutter项目................................................................................................. 5
一、 Flutter 图片组件
图片组件是显示图像的组件，Image组件有很多构造函数，这里我们只给大家讲两个
Image.asset， 本地图片
Image.network 远程图片
Image 组件的常用属性 :
名称 类型 说明
alignment Alignme
nt
图片的对齐方式color 和
colorBlendMode
设置图片的背景颜色，通常和colorBlendMode配合一起
使用，这样可以是图片颜色和背景色混合。上面的图片就
是进行了颜色的混合，绿色背景和图片红色的混合fit BoxFit fit属性用来控制图片的拉伸和挤压，这都是根据父容器来
的。
BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。BoxFit.contain:全图显示，显示原比例，可能会有空隙。BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要
充满整个容器，还不变形）。BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，
可能裁切。BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉
伸，可能裁切。BoxFit.scaleDown：效果和contain差不多，但是此属
性不允许显示超过源图片大小，可小不可大。repeat 平铺 ImageRepeat.repeat:横向和纵向都进行重复，直到铺满整
个画布。
ImageRepeat.repeatX:横向重复，纵向不重复。ImageRepeat.repeatY：纵向重复，横向不重复。width 宽度 一般结合ClipOval才能看到效果
height 高度 一般结合ClipOval才能看到效果
更多属性参考：https://api.flutter.dev/flutter/widgets/Image-class.html
return Center(
child: Container(
child: Image.network(
"http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
alignment: Alignment.topLeft,
color: Colors.red,
colorBlendMode: BlendMode
.colorDodge, // repeat: ImageRepeat.repeatX, fit: BoxFit.cover, ), width: 300.0, height: 400.0, decoration: BoxDecoration(
color: Colors.yellow),
),
);二、 Flutter 引入本地图片
然后，打开pubspec.yaml 声明一下添加的图片文件，注意要配置对
最后，在代码中就可以用了
child:
Container(
child: Image.asset("images/a.jpeg", fit: BoxFit.cover),
width: 300.0,
height: 300.0,
decoration: BoxDecoration(color: Colors.yellow),
);三、 Flutter 实现圆角以及实现圆形图片
实现圆角图片
return Center(
child: Container(
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(150),
image: DecorationImage(
image: new NetworkImage('https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg'),
fit: BoxFit.cover)),
),
);导入本地图片：
return Center(
child: Container(
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
// color: Colors.blue[400],
borderRadius: BorderRadius.circular(150),
image: const DecorationImage(
image: ExactAssetImage('images/a.jpeg'),
// image: NetworkImage(
// 'https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg'),
fit: BoxFit.cover)),
));相关文档：# Flutter学习笔记：使用DecorationImage加载本地图片的坑
实现圆形图片
return Center(
child: Container(
child: ClipOval(
child: Image.network(
'http://www.ionic.wang/statics/index/images/ionic4.png',
height: 100,
width: 100,
fit: BoxFit.cover,
),
),
)
);四、 Vscode 调试 Flutter 项目
1 、 Vscode 中打开 flutter 项目进行开发
2 、运行 Flutter 项目
flutter runr 键：点击后热加载，也就算是重新加载吧。
p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
o 键：切换android和ios的预览模式。
q 键：退出调试预览模式。
3 、 Vscode 默认连不上第三方模拟器解决方案
cd 到对应夜神模拟器 D:\Program Files\Nox\bin 目录 然后运
nox_adb.exe connect 127.0.0.1:62001