1分钟
08 矢量图标库
矢量图标对笔者是必不可少的，比起一般的 png 图片文件，矢量图标在开发过程中：可以轻松定义颜色，并且任意调整大小不模糊。矢量图标库是引入 ttf 字体库文件实现，在 Flutter 中通过 Icon 控件，加载对应的 IconData 显示即可。
Flutter 中默认内置的 Icons 类就提供了丰富的图标，直接通过 Icons 对象即可使用，同时个人推荐阿里爸爸的 iconfont 。如下代码，通过在 pubspec.yaml 中添加字体库支持，然后在代码中创建 IconData 指向字体库名称引用即可。
fonts:
- family: wxcIconFont
fonts:
- asset: static/font/iconfont.ttf
··················
///使用Icons
new Tab(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[new Icon(Icons.list, size: 16.0), new Text("趋势")],
),
),
///使用iconfont
new Tab(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[new Icon(IconData(0xe6d0, fontFamily: "wxcIconFont"), size: 16.0), new Text("我的")],
),
)
学员评价