一艘绍、圖片
圖片類似UIImageView，在Flutter中兩種方式加載圖片诱鞠，本地與網(wǎng)絡(luò)。
1. 從asset即本地加載圖片
在工程根目錄下創(chuàng)建一個(gè)images目錄蕉朵，并將所需要的圖片xxx.png拷貝到該目錄阳掐。
在pubspec.yaml中的flutter部分添加如下內(nèi)容（默認(rèn)此文件下面會(huì)有注釋，只需要將圖片相關(guān)的注釋打開即可）如下：
assets:
- images/xxx.png
- images/xxxx.png
注意這里有個(gè)坑: 由于 yaml 文件對(duì)縮進(jìn)嚴(yán)格觅闽，所以必須嚴(yán)格按照每一層兩個(gè)空格的方式進(jìn)行縮進(jìn)蛉拙，此處assets前面應(yīng)有兩個(gè)空格彻亲。否則圖片不能正常的顯示
2.從網(wǎng)絡(luò)加載圖片
- 使用構(gòu)造函數(shù) Image.network 從網(wǎng)絡(luò)加載、顯示圖片
相關(guān)圖片的類官方簡(jiǎn)介
Image
Image widget有一個(gè)必選的image參數(shù)苞尝，它對(duì)應(yīng)一個(gè)ImageProvider宙址。
ImageProvider
ImageProvider 是一個(gè)抽象類，主要定義了圖片數(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: AssetImage('images/1.jpeg'),
width: 300.0,
height: 200.0,
),
Image(
image: NetworkImage(
'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2153937626,1074119156&fm=27&gp=0.jpg'),
width: 200.0,
height: 200.0,
),
參數(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ù)方式
...
})
這里引用一張官方的關(guān)于fit的參數(shù)的圖顽冶，比較直觀
二、ICON
Flutter中绞呈，icon是將圖標(biāo)做成字體文件间景，然后通過指定不同的字符而顯示不同的圖片。在字體文件中圾亏，每一個(gè)字符都對(duì)應(yīng)一個(gè)位碼，而每一個(gè)位碼對(duì)應(yīng)一個(gè)顯示字形夭问，不同的字體就是指字形不同曹铃，即字符對(duì)應(yīng)的字形是不同的。
簡(jiǎn)單的說陕见，將這些圖標(biāo)當(dāng)做文字一樣去使用评甜。
在Flutter開發(fā)中，iconfont和圖片相比有如下優(yōu)勢(shì)：
- 體積腥炭馈：可以減小安裝包大小佩研。
- 矢量的：iconfont都是矢量圖標(biāo)，放大不會(huì)影響其清晰度嘉抒。
- 可以應(yīng)用文本樣式：可以像文本一樣改變字體圖標(biāo)的顏色袍暴、大小對(duì)齊等。
- 可以通過TextSpan和文本混用政模。
使用Material Design字體圖標(biāo)
在pubspec.yaml文件中,Flutter默認(rèn)包含了一套Material Design的字體圖標(biāo)淋样，配置如下,Material Design所有圖標(biāo)可以在其官網(wǎng)查看：https://material.io/tools/icons/
flutter:
uses-material-design: true
我們看一個(gè)簡(jiǎn)單的例子：
String icons = "";
icons += "\uE914";
icons += " \uE000";
icons += " \uE90D";
Text(icons,
style: TextStyle(
fontFamily: "MaterialIcons",
fontSize: 24.0,
color: Colors.green
),
);
上面的如\uE000一樣的不知符號(hào)并不友好刊咳，所以儡司，F(xiàn)lutter封裝了一個(gè)IconData和Icon來專門顯示字體圖標(biāo),（在開發(fā)的時(shí)候會(huì)有提示），更改代碼如下：
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessible,color: Colors.green,),
Icon(Icons.error,color: Colors.green,),
Icon(Icons.fingerprint,color: Colors.green,),
],
)
使用自定義字體圖標(biāo)
如果默認(rèn)的不能滿足捕犬，我們也可以使用自定義字體圖標(biāo)酵镜。iconfont.cn上有很多字體圖標(biāo)素材柴钻，步驟也很簡(jiǎn)單贴届，這里不再重復(fù)，可參考https://book.flutterchina.club/chapter3/img_and_icon.html
