在flutter使用多色圖示，以iconfont為例

ncer發表於2020-07-17
Flutter

使用flutter寫的電影播放軟體：github.com/Mockingbird…

開源不易，感興趣的小夥伴給個star吧。

多色圖示

flutter中自定義了很多圖示，我一般都會在這個網站找flutter中的圖示：www.fluttericon.com/

這種圖示只支援純色，如果你不會設計而且還需要多色圖示，那麼就可以使用阿里巴巴的圖示庫：www.iconfont.cn/

在flutter中使用iconfont

下面以我專案中使用iconfont的多色圖示進行講解，主要用了githut一個開源專案：github.com/iconfont-cl…，可以閱讀這個開源專案的readme檔案進行一步步搭建使用。

1.在專案檔案pubspec.yml中加入flutter外掛 flutter_svg

{
  ...

  dependencies:
    # 版本號請以官方庫的為準：https://github.com/dnfield/flutter_svg/tags
    flutter_svg: ^0.14.1
  ...
}
複製程式碼

注意：這裡的flutter_svg最好使用0.17.3版本，經測試這個版本不會出現什麼問題，其他版本可能會有報錯。

然後執行flutter外掛安裝操作

flutter packages get
複製程式碼

接著安裝全域性外掛（基於nodeJs）

npm install flutter-iconfont-cli -g
複製程式碼

2.生成配置檔案

npx iconfont-init
複製程式碼

此時專案根目錄會生成一個iconfont.json的檔案，內容如下：

{
    "symbol_url": "請參考README.md，複製官網提供的JS連結",
    "save_dir": "./lib/iconfont",
    "trim_icon_prefix": "icon",
    "default_icon_size": 18,
    "summary_component_name": "IconFont"
}
複製程式碼

配置引數說明：

symbol_url:請直接複製iconfont官網提供的專案連結。請務必看清是.js字尾而不是.css字尾。如果你現在還沒有建立iconfont的倉庫，那麼可以填入這個連結去測試：http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js

save_dir:根據iconfont圖示生成的元件存放的位置。每次生成元件之前，該資料夾都會被清空。

trim_icon_prefix:如果你的圖示有通用的字首，而你在使用的時候又不想重複去寫，那麼可以通過這種配置這個選項把字首統一去掉。

default_icon_size:我們將為每個生成的圖示元件加入預設的字型大小，當然，你也可以通過傳入props的方式改變這個size值。

summary_component_name:就是彙總元件的名稱，預設名稱為IconFont，您也可以改成Icon或者您喜歡的名字。記住，它是一個類名，您必須遵守Dart中關於類名的語法規則，請儘量以大寫字母開頭。

3.開始生成React標準元件

npx iconfont-flutter
複製程式碼

生成後檢視您設定的儲存目錄中是否含有所有的圖示

4.使用

圖示尺寸

根據配置default_icon_size，每個圖示都會有一個預設的尺寸，你可以隨時覆蓋。

class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return IconFont(IconNames.alipay, size: 100);
    }
}
複製程式碼

圖示單色

單色圖示，如果不指定顏色值，圖示將渲染原本的顏色。如果你想設定為其他的顏色，那麼設定一個你想要的顏色即可。

注意：如果你在props傳入的color是字串而不是陣列，那麼即使原本是多色彩的圖示，也會變成單色圖示。

IconFont(IconNames.alipay, color: 'red');
複製程式碼

圖示多色彩

多色彩的圖示，如果不指定顏色值，圖示將渲染原本的多色彩。如果你想設定為其他的顏色，那麼設定一組你想要的顏色即可

IconFont(IconNames.alipay, colors: ['green', 'orange']);
複製程式碼

顏色組的數量以及排序，需要根據當前圖示的資訊來確定。您需要進入圖示元件中檢視並得出結論。

更新圖示

當您在iconfont.cn中的圖示有變更時，只需更改配置symbol_url，然後再次執行Step 3即可生成最新的圖示元件

# 修改 symbol_url 配置後執行：
npx iconfont-flutter
複製程式碼

以上內容均來自github.com/iconfont-cl…

效果展示

S00716-12584084.jpg

更多效果歡迎到github.com/Mockingbird…下載軟體的realease版本檢視。

相關文章