Flutter-Image

Flutter组件之Image

属性

创建方式：
一般使用network来创建Image

1. new Image => 从ImageProvider获取图片资源
2. new Image.asset => 从本地获取图片资源
3. new Image.network => 从网络获取图片资源
4. new Image.file => 从手机本地文件获取图片资源
5. new Image.memory => 从Uint8List获取图像。

Image.network

必选

1. src => String  图片的网络路径                  

可选

1. fit 			=> BoxFit				图片的布局适配（不变、填充等方式）
2. alignment 	=> Alignment			组件的布局（若fit不为BoxFit.fill，alignment为image在父布局的位置）
3. color		=> Colors				背景颜色
4. colorBlendMode=>BlendMode			颜色填充模式，与color配合使用（加特效）
5. repeat		=> ImageRepeat			图片填充方式，包括中心平铺，X、Y轴平铺

例子

Container(
	child: new Image.network(
		"http://k.zol-img.com.cn/sjbbs/7692/a7691515_s.jpg",
		fit: BoxFit.contain,//BoxFit.fill
		// width和height的设置会和父层的width和height冲突
	),
	width: 300.0,
	height: 200.0,
	padding: EdgeInsets.all(20.0),
	color: Colors.lightBlue,
),

Image.asset

注：使用本地的图片资源会随着打包进入apk，增大apk体积

必选

1. src => String  图片的网络路径                  

可选

1. fit 			=> BoxFit				图片的布局适配（不变、填充等方式）
2. alignment 	=> Alignment			组件的布局（若fit不为BoxFit.fill，alignment为image在父布局的位置）
3. color		=> Colors				背景颜色
4. colorBlendMode=>BlendMode			颜色填充模式，与color配合使用（加特效）
5. repeat		=> ImageRepeat			图片填充方式，包括中心平铺，X、Y轴平铺

配置

1. 根目录下新建images文件夹，放入本地图片
2. 打开根目录下的pubspec.yaml文件
3. 找到
	# To add assets to your application, add an assets section, like this:
	# assets:
	#  - images/a_dot_burr.jpeg
	#  - images/a_dot_ham.jpeg
4. 加入一下代码
	assets:
    - images/saoma.png
    - images/shanghuxiangqing.png
    - images/yejipaiming.png

例子

Image.asset(
	"images/saoma.png",
	width: 30.0,
	height: 30.0,
)