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:  or 0xE914 or E914
icons += "\uE914";
// error:  or 0xE000 or E000
icons += " \uE000";
// fingerprint:  or 0xE90D or E90D
icons += " \uE90D";
Text(icons,
style: TextStyle(
fontFamily: "MaterialIcons",
fontSize: 24.0,
color: Colors.green
),
);
运行效果如图3-21所示：
图3-21
通过这个示例可以看到，使用图标就像使用文本一样，但是这种方式需要我们提供每个图标的码点，这并对开发者不友好，所以，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格式即可。
假设我们项目中需要使用一个书籍图标和微信图标，我们打包下载后导入：
-
导入字体图标文件；这一步和导入字体文件相同，假设我们的字体图标文件保存在项目根目录下，路径为"fonts/iconfont.ttf"：
fonts: - family: myIcon #指定一个字体名 fonts: - asset: fonts/iconfont.ttf -
为了使用方便，我们定义一个
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 ); } -
使用
Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(MyIcons.book,color: Colors.purple,), Icon(MyIcons.wechat,color: Colors.green,), ], )运行后效果如图3-22所示：
图3-22
事例
使用阿里巴巴 iconfont图标
1.在https://www.iconfont.cn中选择自己使用的图标添加至购物车, 在购物车中将需要的图标添加到项目
图片.png
2.可以在项目中看到我们刚添加的图标, (需要记住图标下面的编码, flutter加载图标的时候会用到) 下载至本地, 并解压
图片.png
解压后的目录
我们这里用iconfont.ttf就好, 添加到flutter工程目录中, 路径可以自定义然后在pubspec.yaml中添加到字体中即可, 路径要正确哦
图片.png
图片.png
然后就可以根据上面所述方法在项目中使用了
class MyIcons {
// 加号 图标
static const IconData add =
const IconData(0xe600, fontFamily: 'self', matchTextDirection: true);
// 圆圈禁止3D图标
static const IconData no3D =
const IconData(0xe601, fontFamily: 'self', matchTextDirection: true);
}
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
MyIcons.book,
color: Colors.purple,
),
Icon(
MyIcons.wechat,
color: Colors.green,
),
],
)
加载效果
图片.png
网友评论