在Flutter中使用Iconfont圖示、字型

iconfont.com是阿里巴巴出品的一款向量相簿

它的優點： 可編譯成 IconData 和 Icon 元件等多種選擇，可將原有的圖示檔案中的名字對映至 dart 檔案中，並且自動轉化中文至拼音；可自定義 font-family、元件名；生成的 IconData 不會有重名或特殊字元 可以在多個專案中使用。

1. 準備

1.1 首先需要在iconfont.com中加購自己需要的後者UI放上去的向量圖圖示，然後通過程式碼的方式下載下來。

1.2 解壓拷貝demo_index.html和iconfont.ttf到專案中去

目錄如下

1.3 在pubspec.yaml中增加：

fonts:
   - family: Schyler
     fonts:
       - asset: fonts/iconfont.ttf
複製程式碼

1.4 確保電腦中安裝了dart環境，若沒有安裝可以通過 brew安裝 1.5 執行pub global activate iconfont_builder，將 iconfont_builder 安裝至 dart 全域性

2.在 Flutter 中使用 Iconfont

2.1 進入專案所在目錄，使用 iconfont_builder 編譯 Iconfont.dart 檔案 $ iconfont_builder --from ./fonts --to ./lib/Iconfont.dart，會生成一個Iconfont檔案

    class Iconfont {
        // iconName: 放大鏡
      static const fangdajing = IconData(
        0xe602,
        fontFamily: 'Iconfont',
        matchTextDirection: true,
      );
      // iconName: 靜音
      static const jingyin = IconData(
        0xe60e,
        fontFamily: 'Iconfont',
        matchTextDirection: true,
      );
      // iconName: 靜音
      static const jingyin1 = IconData(
        0xe620,
        fontFamily: 'Iconfont',
        matchTextDirection: true,
      );
    }

複製程式碼

如上程式碼便是相對應圖片的對映了

2.2 使用 匯入頭 import 'package:flutterTest01/Iconfont.dart'; 使用 final theIcon = Icon(Iconfont.banquan);

3自定義字型名

iconfont_builder 預設使用 Iconfont 作為 font-family, 而有時候我們可能同時使用多個字型, 此時我們需要自定義字型名。

編譯時，新增 --family 字型名 命令，替換 Iconfont 字型名:

$ iconfont_builder --from ./fonts --to ./lib/Iconfont.dart --family OtherIcon 然後編輯 pubspec.yaml, 引用剛剛設定的字型名