基礎元件：ICON

fengMisaka發表於2024-08-23
元件

Flutter 中，可以像 Web 開發一樣使用 iconfont，iconfont 即“字型圖示”，它是將圖示做成字型檔案，然後透過指定不同的字元而顯示不同的圖片。

在字型檔案中，每一個字元都對應一個位碼，而每一個位碼對應一個顯示字形，不同的字型就是指字形不同，即字元對應的字形是不同的。而在iconfont中，只是將位碼對應的字形做成了圖示，所以不同的字元最終就會渲染成不同的圖示。

在 Flutter 開發中，iconfont 和圖片相比有如下優勢：

  1. 體積小：可以減小安裝包大小。
  2. 向量的：iconfont 都是向量圖示，放大不會影響其清晰度。
  3. 可以應用文字樣式：可以像文字一樣改變字型圖示的顏色、大小對齊等。
  4. 可以透過 TextSpan 和文字混用。

一、使用Material Design字型圖示

Flutter預設包含了一套Material Design的字型圖示，在pubspec.yaml檔案中的配置如下

flutter:
  uses-material-design: true

Material Design所有圖示可以在其官網檢視：https://material.io/tools/icons/

我們看一個簡單的例子：

String icons = "";
// accessible: 0xe03e
icons += "\uE03e";
// error:  0xe237
icons += " \uE237";
// fingerprint: 0xe287
icons += " \uE287";

Text(
  icons,
  style: TextStyle(
    fontFamily: "MaterialIcons",
    fontSize: 24.0,
    color: Colors.green,
  ),
);

執行效果如下圖所示：

Flutter_icon_E.png


透過這個示例可以看到，使用圖示就像使用文字一樣，但是這種方式需要我們提供每個圖示的碼點，這對開發者並不友好，所以，Flutter 封裝了IconData和Icon來專門顯示字型圖示，上面的例子也可以用如下方式實現：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.accessible,color: Colors.green),
    Icon(Icons.error,color: Colors.green),
    Icon(Icons.fingerprint,color: Colors.green),
  ],
)

Icons類中包含了所有 Material Design 圖示的IconData靜態變數定義。

二、使用自定義字型圖示

我們也可以使用自定義字型圖示。iconfont.cn 上有很多字型圖示素材，我們可以選擇自己需要的圖示打包下載後，會生成一些不同格式的字型檔案，在 Flutter 中，我們使用 ttf 格式即可。

假設我們專案中需要使用一個書籍圖示和微信圖示，我們打包下載後匯入：

（1）匯入字型圖示檔案；這一步和匯入字型檔案相同，假設我們的字型圖示檔案儲存在專案根目錄下，路徑為 "fonts/iconfont.ttf"：

fonts:
  - family: myIcon  #指定一個字型名
    fonts:
      - asset: fonts/iconfont.ttf

（2）為了使用方便，我們定義一個MyIcons類，功能和Icons類一樣：將字型檔案中的所有圖示都定義成靜態變數：

class MyIcons{
  // book 圖示
  static const IconData book = const IconData(
    0xe614, 
    fontFamily: 'myIcon', 
    matchTextDirection: true
  );
  // 微信圖示
  static const IconData wechat = const IconData(
    0xec7d,  
    fontFamily: 'myIcon', 
    matchTextDirection: true
  );
}

（3）使用

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(MyIcons.book,color: Colors.purple),
    Icon(MyIcons.wechat,color: Colors.green),
  ],
)

執行後效果如下圖所示：

Flutter_icon_F.png


相關文章