Flutter 自定義矢量圖標(biāo)

使用系統(tǒng)的自帶的 Icon

const Icon(Icons.star, color: Colors.red,)

Icons 是系統(tǒng)圖標(biāo)的集合

自定義 Icon

  1. 去阿里圖標(biāo)庫搜索對(duì)應(yīng)的圖標(biāo)，選擇之后然后點(diǎn)擊下載代碼 https://www.iconfont.cn/
  2. 解壓之后就是圖標(biāo)的一些文件，里面包含字體文件(ttf) 和 json 配置文件
  3. 項(xiàng)目新建一個(gè) fonts 文件夾，將 iconfont.ttf 字體文件拖入 fonts 文件夾
  4. 在 pubspac.yaml 文件中配置 fonts 
    fonts:
- family: AppIcons
  fonts:
    - asset: fonts/iconfont.ttf
    然后執(zhí)行 flutter pub get
  5. 在 lib 文件夾下面新建一個(gè) icons.dart 文件（名稱隨意）, 創(chuàng)建一個(gè) AppIcons 類（名稱隨意） 
    import 'package:flutter/material.dart';

class AppIcons {
    // 對(duì)應(yīng)圖標(biāo)的名稱，隨便你怎么起名
    static const IconData konglong = IconData(
        0xe6eb,
        fontFamily: 'AppIcons',
    );
}
    使用 IconData 自定義圖標(biāo)，第一個(gè)參數(shù)是字體編碼，在 json 配置文件中找到 unicode，這個(gè)就是對(duì)應(yīng)的字體編碼。fontFamily 是這個(gè)圖標(biāo)字體屬于哪一個(gè)字體文件，AppIcons 是在 pubspac.yaml 文件中定義的 family 標(biāo)識(shí)。

使用自定義的圖標(biāo)

const Icon(AppIcons.konglong, color: Colors.green,)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容