Flutter中的Image控件和Android中的ImageView效果一样，用来展示图片，不过Flutter中的Image更像Glide，能够从网络、文件、内存中加载图片。
Image构造方法有：
| 方法 | 说明 |
|---|---|
| Image() | 从ImageProvider获取图片 |
| Image.asset() | 从AssetBundle获取图片，具体实现类为AssetImage |
| Image.file() | 从File中获取图片，具体实现类为FileImage |
| Image.network() | 从网络获取图片，具体实现类为NetworkImage |
| Image.memory() | 从Uint8List中显示图片，具体实现类为MemoryImage |
Image构造函数如下：
const Image({
Key key,
@required this.image,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
}) : assert(image != null),
assert(alignment != null),
assert(repeat != null),
assert(filterQuality != null),
assert(matchTextDirection != null),
super(key: key);
常用属性如下：
| 属性 | 说明 |
|---|---|
| width | Image控件宽度，主意还是控件宽度，不是图片宽度 |
| height | Image控件高度，不是图片高度 |
| color | 和colorBlendMode一起使用，和图片的每个像素混合 |
| colorBlendMode | 混合模式 |
| fit | 填充方式，有点像Android ImageView的scaleType,fill：显示整张图片，拉伸填充全部可显示区。contain显示整张图片，按照原始比例缩放显示,居中显示。cover：按照原始比例缩放，可能裁剪，填满可显示区域，居中显示。 fitWidth：按照原始比例缩放，可能裁剪，宽度优先填满。fitHeight：按照原始比例缩放，可能裁剪，高度优先填满。none：图片居中显示，不缩放原图，可能被裁剪。scaleDown：显示整张图片，只能缩小或者原图显示。 |
| repeart | 重合方式，repeat在x和y方向上重复图像，直到填充框。repeatX在x方向上重复图像，直到水平填充框。repeatY在y方向重复图像，直到垂直填充框。noRepeat将盒子的未覆盖部分保持透明 |
| centerSlice | 传入一个Rect，生成一个和Android中的.9一样效果的图片 |
各种Image使用
Image.asset()
Image.asset()使用前需要在pubspec.yaml文件中声明依赖，pubspec.yaml和Android Studio中Gradle的build.gradle文件相似，pubspec.yaml用于声明Flutter的外部依赖项。
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- image/test_icon.jpg
主意- image/test_icon.jpg-和image之间有一个空格，否则会显示不出图片
new Image.asset(
'image/test_icon.jpg',
width: 40,
height: 40,
)
Image.file()
new Image.file(
File('/storage/emulated/0/Download/test.jpg'),
width: 120,
fit: BoxFit.fill,
)
Image.network()
new Image.network(
'http://pic31.nipic.com/20130711/8952533_164845225000_2.jpg',
width: 40,
height: 40,)
网友评论