圖片
Flutter中，我們可以通過(guò)Image組件來(lái)加載并顯示圖片，Image的數(shù)據(jù)源可以是asset楣嘁、文件、內(nèi)存以及網(wǎng)絡(luò)。
ImageProvider
ImageProvider 是一個(gè)抽象類(lèi)逐虚，主要定義了圖片數(shù)據(jù)獲取的接口load()聋溜，從不同的數(shù)據(jù)源獲取圖片需要實(shí)現(xiàn)不同的ImageProvider ，如AssetImage是實(shí)現(xiàn)了從Asset中加載圖片的ImageProvider叭爱，而NetworkImage實(shí)現(xiàn)了從網(wǎng)絡(luò)加載圖片的ImageProvider撮躁。
Image
Image widget有一個(gè)必選的image參數(shù)，它對(duì)應(yīng)一個(gè)ImageProvider买雾。下面我們分別演示一下如何從asset和網(wǎng)絡(luò)加載圖片把曼。
從asset中加載圖片
1.在工程根目錄下創(chuàng)建一個(gè)images目錄，并將圖片avatar.png拷貝到該目錄凝果。
2.在pubspec.yaml中的flutter部分添加如下內(nèi)容：
assets:
- images/avatar.png
注意: 由于 yaml 文件對(duì)縮進(jìn)嚴(yán)格祝迂，所以必須嚴(yán)格按照每一層兩個(gè)空格的方式進(jìn)行縮進(jìn)，此處assets前面應(yīng)有兩個(gè)空格器净。
3.加載該圖片
Image(
image: AssetImage("images/avatar.png"),
width: 100.0
);
Image也提供了一個(gè)快捷的構(gòu)造函數(shù)Image.asset用于從asset中加載型雳、顯示圖片：
Image.asset("images/avatar.png",
width: 100.0,
)
從網(wǎng)絡(luò)加載圖片
Image(
image: NetworkImage(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
width: 100.0,
)
Image也提供了一個(gè)快捷的構(gòu)造函數(shù)Image.network用于從網(wǎng)絡(luò)加載、顯示圖片：
Image.network(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
width: 100.0,
)
運(yùn)行上面兩個(gè)示例山害，圖片加載成功后如圖3-17所示：
參數(shù)
Image在顯示圖片時(shí)定義了一系列參數(shù)纠俭，通過(guò)這些參數(shù)我們可以控制圖片的顯示外觀、大小浪慌、混合效果等冤荆。我們看一下Image的主要參數(shù)：
const Image({
...
this.width, //圖片的寬
this.height, //圖片高度
this.color, //圖片的混合色值
this.colorBlendMode, //混合模式
this.fit,//縮放模式
this.alignment = Alignment.center, //對(duì)齊方式
this.repeat = ImageRepeat.noRepeat, //重復(fù)方式
...
})
width、height：用于設(shè)置圖片的寬权纤、高钓简，當(dāng)不指定寬高時(shí)，圖片會(huì)根據(jù)當(dāng)前父容器的限制汹想，盡可能的顯示其原始大小外邓，如果只設(shè)置width、height的其中一個(gè)古掏，那么另一個(gè)屬性默認(rèn)會(huì)按比例縮放损话，但可以通過(guò)下面介紹的fit屬性來(lái)指定適應(yīng)規(guī)則。fit：該屬性用于在圖片的顯示空間和圖片本身大小不同時(shí)指定圖片的適應(yīng)模式槽唾。適應(yīng)模式是在BoxFit中定義丧枪，它是一個(gè)枚舉類(lèi)型，有如下值：-
fill：會(huì)拉伸填充滿(mǎn)顯示空間庞萍，圖片本身長(zhǎng)寬比會(huì)發(fā)生變化拧烦，圖片會(huì)變形。
-
-
cover：會(huì)按圖片的長(zhǎng)寬比放大后居中填滿(mǎn)顯示空間挂绰，圖片不會(huì)變形屎篱，超出顯示空間部分會(huì)被剪裁服赎。
-
-
contain：這是圖片的默認(rèn)適應(yīng)規(guī)則葵蒂，圖片會(huì)在保證圖片本身長(zhǎng)寬比不變的情況下縮放以適應(yīng)當(dāng)前顯示空間交播，圖片不會(huì)變形。
-
-
fitWidth：圖片的寬度會(huì)縮放到顯示空間的寬度践付，高度會(huì)按比例縮放秦士，然后居中顯示，圖片不會(huì)變形永高，超出顯示空間部分會(huì)被剪裁隧土。
-
-
fitHeight：圖片的高度會(huì)縮放到顯示空間的高度，寬度會(huì)按比例縮放命爬，然后居中顯示曹傀，圖片不會(huì)變形，超出顯示空間部分會(huì)被剪裁饲宛。
-
-
none：圖片沒(méi)有適應(yīng)策略皆愉，會(huì)在顯示空間內(nèi)顯示圖片，如果圖片比顯示空間大艇抠，則顯示空間只會(huì)顯示圖片中間部分幕庐。
3-15
-
color和colorBlendMode：在圖片繪制時(shí)可以對(duì)每一個(gè)像素進(jìn)行顏色混合處理，color指定混合色家淤，而colorBlendMode指定混合模式异剥，下面是一個(gè)簡(jiǎn)單的示例：
Image(
image: AssetImage("images/avatar.png"),
width: 100.0,
color: Colors.blue,
colorBlendMode: BlendMode.difference,
);
運(yùn)行效果如圖3-19所示（彩色）:
-
repeat：當(dāng)圖片本身大小小于顯示空間時(shí)，指定圖片的重復(fù)規(guī)則絮重。簡(jiǎn)單示例如下：
Image(
image: AssetImage("images/avatar.png"),
width: 100.0,
height: 200.0,
repeat: ImageRepeat.repeatY ,
)
