Flutter-Image、Icon的使用

Image

Flutter中，可以通过Image来加载并显示图片，Image的数据源可以是asset、文件、内存以及网络等。在实际应用中，用到比较多的数据源是asset和网络。

一、从asset中加载图片

从asset中加载图片需要三步：

1、在工程根目录下创建一个images的目录，将需要展示的图片(如a.png)放在该目录下。

2、在pubspec.yaml中的flutter部门添加在images目录下放的图片。

3、加载该图片

加载该图片有两种方式：

1）Image( image:AssetImage("images/图片名称"))

2）Image.asset("images/图片名称")

 

二、从网络加载图片

网络加载图片也是有两种方式：

1）Image(image:NetworkImage("图片url"))

2）Image.network("图片url")

 

三、Image常用参数：

参数	说明
width	宽度
height	高度
fit：图片填充方式	BoxFit.contain：图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片居中显示 可能不充满，图片不会变形。
	BoxFit.cover：按图片的长宽比放大后居中填满显示空间，超出部分被剪裁，图片不会变形。
	BoxFit.fill：拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
	BoxFit.fitWidth：图片的宽度缩放到显示空间宽度，高度按比例缩放，图片居中显示，超出部分被剪裁，图片不会变形。
	BoxFit.fitHeight：图片的高度缩放到显示空间高度，宽度按比例缩放，图片居中显示，超出部分被剪裁，图片不会变形。
	BoxFit.none：按照图片原比例显示，无缩放，默认居中显示；如果图片比显示空间大，则显示空间只会显示图片中间部分。
	BoxFit.scaleDown：当图片比显示空间大时，相当于contain模式，会等比缩小图片；当图片比显示空间小时，相当于none 模式，不会对原图做任何操作。
alignment	Alignment.center：居中显示
	Alignment.centerLeft：左边居中显示
	Alignment.centerRight：右边居中显示
	Alignment.bottomCenter：底部居中显示
	Alignment.bottomLeft：底部靠左显示
	Alignment.bottomRight：底部靠右显示
	Alignment.topCenter：顶部居中显示
	Alignment.topLeft：顶部靠左显示
	Alignment.topRight：顶部靠右显示
repeat	ImageRepeat.noRepeat：显示空间大于图片的时候不重复显示
	ImageRepeat.repeat：显示空间大于图片的时候重复显示
	ImageRepeat.repeatX：显示空间大于图片的时候X方向重复显示
	ImageRepeat.repeatY：显示空间大于图片的时候Y方向重复显示
color	图片的混合色值(在图片绘制时可以对每一个像素进行颜色的混合处理)
colorBlendMode	混合模式，有很多模式：https://docs.flutter.io/flutter/dart-ui/BlendMode-class.html

 

ICON

icon用于加载小图标，flutter中默认包含了一套Material Design的字体图标，在pubspec.yaml文件中做如下配置即可使用：

使用如下：