往期專題回顧：
前面我們學(xué)習(xí)了Flutter中用于文本顯示的Widget，比如我們顯示一行或者一段基本文字會(huì)用到Text Widget，如果需要跟Text設(shè)置樣式，顏色等屬性，我們可以通過給Text指定style來定制TextStyle中的樣式來展示我們需要的效果，對(duì)于文本輸入控件，我們學(xué)習(xí)了TextField，了解到可以通過TextField完成簡(jiǎn)單的文本輸入需求，可以通過InputDecoration給輸入框添加樣式，比如舒服輔助提示、邊框、兩邊的icon等等。
今天我們來學(xué)習(xí)一下另外一個(gè)Widget---Image，顧名思義Image是用于展示圖片的控件，他跟Text一樣，同屬于StatelessWidget，關(guān)于StatelessWidget跟StatefullWidget我會(huì)在稍后的文章中具體講解，在此讀者可暫且忽略這一知識(shí)點(diǎn)，在做原生Android開發(fā)時(shí)，我們可以給ImageView指定不同的圖片來源，可以是來源網(wǎng)絡(luò)、drawable、bitmap、文件等，在Flutter中同樣支持加載不同來源的圖片，只不過Flutter加載不同資源的圖片跟原生Android稍微有點(diǎn)差別，下面我們一起進(jìn)入本期的主題。
Flutter加載不同資源圖片的方式：
- new Image, 用于從ImageProvider獲取圖像。
- new Image.asset, 用于從AssetBundle獲取圖像。
- new Image.network, 用于從URL獲取圖像。
- new Image.file, 用于從文件中獲取圖像。
- new Image.memory, 用于從內(nèi)存中獲取圖像
在flutter中Image支持JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, 和 WBMP這幾種圖片格式。
- 從網(wǎng)絡(luò)加載圖片：
為了養(yǎng)成良好的代碼閱讀習(xí)慣，我們還是先來看下Image.network的構(gòu)造方法
Image.network(String src, {
Key key,
double scale: 1.0,//縮小倍數(shù)
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,
Map<String, String> headers,
})
通過構(gòu)造方法，我們可以初步清楚的了解到在Flutter中加載網(wǎng)絡(luò)圖片，只需要在Image.network中指定圖片的src，也就是目標(biāo)圖片的url即可，如果需要配置圖片寬高、縮放比對(duì)應(yīng)構(gòu)造方法去寫就好，下面實(shí)例代碼，展示了從目標(biāo)url上加載圖片，并且把圖片的寬高設(shè)置為500*500；
效果圖：
示例代碼：
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new ImageDemo()));
}
class ImageDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new TextField(
decoration: new InputDecoration(),
),
),
body: new Image.network("https://p1.ssl.qhmsg.com/dr/220__/t01d5ccfbf9d4500c75.jpg",width:500,height: 500,)
);
}
}
- 從項(xiàng)目本地目錄加載圖片：
Flutter中加載項(xiàng)目目錄下的圖片，需要我們先從pubspec.yaml中聲明導(dǎo)入資源后，才能在dart文件中使用圖片資源，不然即使圖片存在項(xiàng)目目錄下，在dart文件中你指定路徑后也不能正常加載，這點(diǎn)讀者應(yīng)注意一下，跟我們寫原生Android有點(diǎn)不同。
比如我在項(xiàng)目中把images文件夾下的兩張圖片aaa.png、a.png通過pubspec.yaml導(dǎo)入到項(xiàng)目中：
把上述代碼中body部分換成Image.asset方式。
body: new Image.asset('images/aaa.png',width: 500,height: 500,)
關(guān)于Image.asset的構(gòu)造方法跟network大同小異，我就不貼出來了，讀者可自行查閱源碼，下面看下我們從項(xiàng)目目錄下加載的圖片結(jié)束我們本期關(guān)于Image的學(xué)習(xí)。
效果圖：
