官方Icon
Flutter本身自帶了MaterialDesign的圖標集,在pubspec.yaml中有如下配置
...
flutter:
users-material-design: true
...
通過以上配置,就可以在代碼中引用任何MD的官方圖標(需翻牆)。這些圖片都定義在了IconDatas中。
Icon(Icons.favorite)
第三方Icon
第三方圖標庫和MD的圖片庫在使用上沒有區別,但需要手動引入和配置路徑。爲了方便複用,我們可以把圖標製作爲一個第三方庫來調用。例如:
...
import 'package:my_icon/my_icon.dart';
...
Icon icon = Icon(MyIcon.zhihu); # 知乎LOGO
製作Icon庫
1.製作ttf文件
一般我們會在iconfont.cn上去尋找合適的圖標集或自行繪製,完成後打包下載,壓縮包裏有製作好的ttf文件。
2.編寫配置文件
作爲示例,在/lib目錄下創建一個名爲my_font的文件夾,文件夾中的pubspec.yaml內容如下:
name: my_font
description: The font for my application
author: Lynx <[email protected]>
homepage: http://www.a-lightyear.com/
version: 1.0.0
environment:
sdk: ">=2.0.0-dev.28.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
dev_dependencies:
recase: "^2.0.0+1"
flutter:
fonts:
- family: MyIcon
fonts:
- asset: lib/fonts/iconfont.ttf
weight: 400
從配置文件看出,iconfont下載的ttf文件放在/lib/my_font/lib/fonts/下面,該路徑可以自行設置。
3.編寫庫文件
library font_social_flutter;
import 'package:flutter/widgets.dart';
class MyIcon {
static const IconData zhihu = const _MyIconData(0xe6a2);
static const IconData wechat = const _MyIconData(0xe697);
static const IconData alipay = const _MyIconData(0xe698);
static const IconData weibo = const _MyIconData(0xe6ab);
static const IconData wechat_friends = const _MyIconData(0xe6ae);
static const IconData qq = const _MyIconData(0xe6ac);
}
class _MyIconData extends IconData {
const _MyIconData(int codePoint)
: super(
codePoint,
fontFamily: 'MyIcon',
fontPackage: 'my_icon',
);
}
這裏的0xe6a2即爲每個Icon的unicode字符。在iconfont下載包裏有一個html文件,打開後可以看到每個圖片的unicode值。
使用Icon
引入Icon庫
在使用之前,需要把該庫引入到當前flutter工程中。編輯flutter項目的pubspec.yaml,添加如下內容:
...
dependencies:
flutter:
sdk: flutter
...
my_icon:
path: lib/my_icon/ # 在這裏引入第三方icon庫
...
...
使用Icon
如開篇所述,在做好以上準備工作後,即可以如MD圖標一般方便的引入自制的圖標集。
...
import 'package:my_icon/my_icon.dart';
...
Icon icon = Icon(MyIcon.zhihu); # 知乎LOGO