Flutter Icon IconFont（图标控件）

毛大姑娘

发布于 2020-09-10 15:53:48

3.3K0

发布于 2020-09-10 15:53:48

Flutter中，可以像Web开发一样使用iconfont，iconfont即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。

效果如下图：

控制不同颜色和大小的icon

1.体积小：可以减小安装包大小。 2.矢量的：iconfont都是矢量图标，放大不会影响其清晰度。 3.可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。 4.可以通过TextSpan和文本混用。

在字体文件中，每一个字符都对应一个位码，而每一个位码对应一个显示字形，不同的字体就是指字形不同，即字符对应的字形是不同的。而在iconfont中，只是将位码对应的字形做成了图标，所以不同的字符最终就会渲染成不同的图标。

Flutter默认包含了一套Material Design的字体图标，在pubspec.yaml文件中的配置如下

（默认配置就有）

flutter:
  uses-material-design: true

Material Design所有图标可以在其官网查看：https://material.io/tools/icons/

我们看一个简单的例子： String icons = ""; icons += "\uE914"; icons += " \uE000"; icons += " \uE90D"; Text( icons, style: TextStyle( fontFamily: "MaterialIcons", fontSize: 24.0, color: Colors.green), ),

完整代码如下 import 'package:flutter/material.dart'; class TextDemo extends StatelessWidget { @override Widget build(BuildContext context) { String icons = ""; icons += "\uE914"; icons += " \uE000"; icons += " \uE90D"; return new Scaffold( appBar: new AppBar( title: new Text("图标控件"), ), body: new Column( children: <Widget>[ Text( icons, style: TextStyle( fontFamily: "MaterialIcons", fontSize: 24.0, color: Colors.green), ), ], ), ); } } void main() { runApp(new MaterialApp( title: "图标案例", theme: new ThemeData(primaryColor: Colors.deepOrangeAccent), home: new TextDemo(), )); }
运行效果如下图所示：

由此可见，iconfont可以像文字一样被设置大小和颜色。

但是，像"uE914"、" uE000"、" uE90D"这样的图标码并不易懂，也不好记。所以，Flutter封装了IconData和Icon来专门显示字体图标。

上面的例子也可以用如下方式实现： Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon( Icons.accessible, color: Colors.red, size: 30.0, ), Icon( Icons.error, color: Colors.yellow, size: 30.0, ), Icon( Icons.fingerprint, color: Colors.blue, size: 30.0, ), ], )

注：Icons类中包含了所有Material Design图标的IconData静态变量定义。

我们也可以使用自定义字体图标，下面我们来展示如何使用第三方字体库。

到阿里图库挑选合适的图标，加入购物车之后，点击下载代码。

解压代码包，将iconfont.ttf文件取出。

假设我们的字体图标文件保存在项目根目录下，路径为"fonts/iconfont.ttf"。那么我们需要在pubspec.yaml文件中添加如下代码：

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

为了使用方便，我们定义一个MyIcons类，功能和Icons类一样：将字体文件中的所有图标都定义成静态变量： import 'package:flutter/widgets.dart'; class MyIcons { // 草莓 static const IconData strawberry = const IconData(0xe605, fontFamily: 'myIcon'); // 冰棒 static const IconData iceLolly = const IconData(0xe60b, fontFamily: 'myIcon', matchTextDirection: true); // 甜甜圈 static const IconData donut = const IconData(0xe606, fontFamily: 'myIcon', matchTextDirection: true); }
使用 Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon( MyIcons.strawberry, color: Colors.red[400], ), Icon( MyIcons.iceLolly, color: Colors.green, ), Icon( MyIcons.donut, color: Colors.pink[300], ), ], ) 运行后效果如下图所示： 注意：该效果只能在手机上显示，模拟器无法显示。

导入第三方字体库效果图