flutter 图片组件
Posted loaderman
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flutter 图片组件相关的知识,希望对你有一定的参考价值。
加入图片的几种方式
- Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。
- Image.network:网络资源图片,意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
- Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。
- Image.memory: 加载Uint8List资源图片,不怎么使用
Image 组件的常用属性:
fit属性的设置
fit属性可以控制图片的拉伸和挤压,这些都是根据图片的父级容器来的,我们先来看看这些属性(建议此部分组好看视频理解)。
-
BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。
-
BoxFit.contain:全图显示,显示原比例,可能会有空隙。
-
BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。
-
BoxFit.fitWidth:宽度充满(横向充满),显示可能拉伸,可能裁切。
-
BoxFit.fitHeight :高度充满(竖向充满),显示可能拉伸,可能裁切。
-
BoxFit.scaleDown:效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大
图片的混合模式
图片混合模式(colorBlendMode)和color属性配合使用,能让图片改变颜色,里边的模式非常的多,产生的效果也是非常丰富的
- color:是要混合的颜色,如果你只设置color是没有意义的。
- colorBlendMode:是混合模式,相当于我们如何混合。
child:new Image.network( ‘https://abc.2008php.com/2011_Website_appreciate/2011-12-30/20111230224943.jpg‘, color: Colors.greenAccent, colorBlendMode: BlendMode.darken, ),
repeat图片重复
-
ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布。
-
ImageRepeat.repeatX: 横向重复,纵向不重复。
-
ImageRepeat.repeatY:纵向重复,横向不重复。
Width和height属性:
一般结合 ClipOval 才能看到效果
引入本地图片的配置
1.新建对应目录:例如imgs
创建 imgs/2.0x 必须有
imgs/3.0x 必须有
imgs/4.0x
打开 pubspec.yaml 声明一下添加的图片文件
assets: - imgs/a.jpeg - imgs/2.0x/a.jpeg - imgs/3.0x/a.jpeg
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(‘http://img4.imgtn.bdimg.com/it/u=3517152928,1333162930&fm=26&gp=0.jpg‘), fit: BoxFit.cover ) ), ), );
实现圆形图片
return Center( child: Container( child:ClipOval( child:Image.network("https://abc.2008php.com/2011_Website_appreciate/2011-12-30/20111230224943.jpg", width: 150.0, height: 150.0, ), ) ),
);
以上是关于flutter 图片组件的主要内容,如果未能解决你的问题,请参考以下文章