Flutter開發中使用Icon圖標介紹。
一 Icon概述
Icon是支持material design的一系列圖標
Icon類似于iconfont即字體圖標,它是將圖標做成字體文件,然后通過指定不同的字符顯示不同圖片
二 Icon說明
2.1 說明
在字體文件中,每一個字符都對應一個位碼,而每一個位碼對應一個顯示字形,不同的字體就是指字形不同,即字符對應的字形是不同的。而在iconfont中,只是將位碼對應的字形做成了圖標,所以不同的字符最終就會渲染成不同的圖標
2.2 icon與Image相比的優勢
體積?。嚎梢詼p小安裝包大小。
矢量的:iconfont都是矢量圖標,放大不會影響其清晰度。
可以應用文本樣式:可以像文本一樣改變字體圖標的顏色、大小對齊等。
可以通過TextSpan和文本混用。
三 Icon如何使用
3.1 使用Material Design字體圖標
Flutter默認包含了一套Material Design的字體圖標,在pubspec.yaml文件中的配置如下
flutter:
uses-material-design: true
3.2 Icon單獨作為圖標使用
Icon(Icons.favorite, color: Colors.pink, size: 24.0, semanticLabel: 'Text to announce in accessibility modes',),
Icon(Icons.audiotrack, color: Colors.green, size: 30.0,),
Icon(Icons.beach_access, color: Colors.blue, size: 36.0,),
3.3 Icon作為圖標字體使用
String icons = "字符串:"+"\uf396" + " \uE000" + " \uE90D";
Text(icons, style: TextStyle(
fontFamily: "MaterialIcons",
fontSize: 24.0,
color: Colors.green),
)
說明:
static const IconData favorite = IconData(0xe721, fontFamily: 'MaterialIcons')
Icons.favorite對應的16進制字符編碼為0xe721
``\u`后面鏈接的是16進制Unicode編碼,用于將16進制編碼轉換成中文、英文字母、標點符號、特殊特號等字符串
轉換前 轉換后
0xf396 \uf396
0xe000 \ue000
0xe90d \ue90d