Flutter 中,可以像 Web 开发一样使用 iconfont,iconfont 即“字体图标”,它是将图标做成字体文件,然后通过指定不同的字符而显示不同的图片。
在字体文件中,每一个字符都对应一个位码,而每一个位码对应一个显示字形,不同的字体就是指字形不同,即字符对应的字形是不同的。而在iconfont中,只是将位码对应的字形做成了图标,所以不同的字符最终就会渲染成不同的图标。
在 Flutter 开发中,iconfont 和图片相比有如下优势:
- 体积小:可以减小安装包大小。
- 矢量的:iconfont 都是矢量图标,放大不会影响其清晰度。
- 可以应用文本样式:可以像文本一样改变字体图标的颜色、大小对齐等。
- 可以通过 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 封装了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),],
)
运行后效果如下图所示: