我的個(gè)人博客同步更新，閱讀體驗(yàn)會(huì)好一點(diǎn)，歡迎訪問。

簡(jiǎn)書：http://www.itdecent.cn/u/762002465748

掘金：https://juejin.im/user/5a3127da5188251c11409f0a

個(gè)人博客：https://wuht.coding.me/

廢話

距離上一次更新博客已經(jīng)半年了，實(shí)在是有點(diǎn)忙，期間還換了了個(gè)工作，很多的事情，但是非常感謝有的網(wǎng)友還跟我聯(lián)系，自己寫的東西還有人覺得有價(jià)值，這感覺挺好的。

2018-06-09_190733.png

正文

2018年2月世界移動(dòng)大會(huì)Google發(fā)布了 Flutter beat1，現(xiàn)在 Flutter 已經(jīng)更新到v0.5.2 了，是時(shí)候?qū)W習(xí)一波了。主要是最近在搞 Weex 被坑的不行了。

Iconfont 的使用自己去看一下文檔了，我就不說了。

目前在 Flutter 中使用圖標(biāo)的幾種方式

內(nèi)置圖標(biāo)

目前在 Flutter 使用圖標(biāo)的話，可以使用 Icons ：

  icon: Icon( Icons.home)

內(nèi)置圖標(biāo)還是挺多的，基本上還是夠用的。

fontawesome

除了Icons，還有國外比較流行了 fontawesome 可以使用，已經(jīng)有人做了個(gè)包了，依賴一下font_awesome_flutter這個(gè)包，使用也比較簡(jiǎn)單：

  icon: new Icon(FontAwesomeIcons.gamepad), 

使用圖片

這個(gè)主要就是配置一下 pubspec.yaml里的assets，使用的話跟圖片一樣，缺點(diǎn)就是大小和顏色不太好控制，而且會(huì)增加項(xiàng)目的體積。

iconfont

國內(nèi)用的多，但是還沒有人做 Flutter 的package，所以只能自己搞一下了。

教程開始了

從iconfont網(wǎng)站上下載ttf文件

2018-06-09_184200.png

放到某個(gè)目錄下，比如說 fonts 文件夾下:

project/
  lib/
    ...
  fonts/
    iconfont.ttf
  pubspec.yaml  

配置 pubspec.yaml 下的 fonts:

  fonts:
    - family: iconfont
      fonts:
        - asset: fonts/iconfont.ttf

然后就可以使用了

Icon( IconData(0xe6bb, fontFamily: 'iconfont'),color: Colors.blue,size: 89.0)

0xe6bb 這個(gè)十六進(jìn)制是從這里拿到的：

2018-06-09_185052.png

不同的十六進(jìn)制代表不同的圖標(biāo)。

本來教程到這里就結(jié)束了，但在實(shí)際做的過程中我是有一個(gè)疑問的，就是為啥下面的代碼不可以正常顯示圖標(biāo)，而且 字符 x，會(huì)被轉(zhuǎn)換成一個(gè)鍵盤的圖標(biāo)，這個(gè)問題之前在vue使用v-text設(shè)置iconfont圖標(biāo)就會(huì)出現(xiàn)，但是一直不知道為啥，希望有大佬能評(píng)論區(qū)解答一下。

Text("#0xe7b7;",style: TextStyle(fontFamily: 'iconfont'))// 可以正常換字體，但圖標(biāo)不行

歡迎打賞，關(guān)注，點(diǎn)贊。