Flutter中的Image控件和Android中的ImageView效果一樣鹅龄，用來展示圖片揩慕，不過Flutter中的Image更像Glide，能夠從網(wǎng)絡(luò)扮休、文件漩绵、內(nèi)存中加載圖片。
Image構(gòu)造方法有：
| 方法 | 說明 |
|---|---|
| Image() | 從ImageProvider獲取圖片 |
| Image.asset() | 從AssetBundle獲取圖片肛炮，具體實(shí)現(xiàn)類為AssetImage |
| Image.file() | 從File中獲取圖片止吐，具體實(shí)現(xiàn)類為FileImage |
| Image.network() | 從網(wǎng)絡(luò)獲取圖片，具體實(shí)現(xiàn)類為NetworkImage |
| Image.memory() | 從Uint8List中顯示圖片侨糟，具體實(shí)現(xiàn)類為MemoryImage |
Image構(gòu)造函數(shù)如下：
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 | 填充方式，有點(diǎn)像Android ImageView的scaleType,fill：顯示整張圖片，拉伸填充全部可顯示區(qū)二拐。contain顯示整張圖片服鹅，按照原始比例縮放顯示,居中顯示。cover：按照原始比例縮放百新，可能裁剪企软，填滿可顯示區(qū)域，居中顯示饭望。 fitWidth：按照原始比例縮放仗哨，可能裁剪，寬度優(yōu)先填滿铅辞。fitHeight：按照原始比例縮放厌漂，可能裁剪，高度優(yōu)先填滿斟珊。none：圖片居中顯示苇倡，不縮放原圖，可能被裁剪囤踩。scaleDown：顯示整張圖片旨椒，只能縮小或者原圖顯示。 |
| repeart | 重合方式高职，repeat在x和y方向上重復(fù)圖像钩乍，直到填充框辞州。repeatX在x方向上重復(fù)圖像怔锌，直到水平填充框。repeatY在y方向重復(fù)圖像变过，直到垂直填充框埃元。noRepeat將盒子的未覆蓋部分保持透明 |
| centerSlice | 傳入一個Rect，生成一個和Android中的.9一樣效果的圖片 |
各種Image使用
Image.asset()
Image.asset()使用前需要在pubspec.yaml文件中聲明依賴媚狰，pubspec.yaml和Android Studio中Gradle的build.gradle文件相似岛杀，pubspec.yaml用于聲明Flutter的外部依賴項(xiàng)。
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,)
