Flutter基础篇之五-添加图片
2020-10-09 本文已影响0人
Michale_Zuo
Image
控件加载图片
- 加载网络图片
NetworkImage
Image(image: NetworkImage('https://review.chinabrands.cn/chinabrands_cn/seo/image/20190218/%E8%B0%B7%E6%AD%8C%20-%20%E5%9B%BE%E7%89%87%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E.jpg')),
或者
Image.network('https://review.chinabrands.cn/chinabrands_cn/seo/image/20190218/%E8%B0%B7%E6%AD%8C%20-%20%E5%9B%BE%E7%89%87%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E.jpg'),
- 加载本地图片
AssetImage
1.项目里创建assets
文件夹
2.本地图片导入assets
文件夹
3.pubspec.yaml
配置目录路径(assets/
可以加载该目录下所有图片),点击Pub get
image.png
4.创建Image控件,包含AssetImage(图片路径);
Image(image: AssetImage('assets/dog-1.jpg'))
或者
Image.asset('assets/dog-1.jpg'),
- Image适配模式fit
-
fill
:填满父容器,可能导致图片拉伸变形
image -
contain
:按照图片的比例尽可能放大,可能导致留白
image -
cover
:按照图片原始比例填满父容器,可能导致裁剪
image -
fitWidth
:按照图片原始比例,宽度填满父容器,不管长度。
image -
fitHeight
:同上,高度填满父容器,不管宽度
image -
none
:图片居中显示,超出父容器会被裁剪
image -
scaleDown
:图片居中显示,如果超出父容器,就同比例缩小,完整显示图片
image
-
详情请见demo