图标组件是展示图标的组件，但是再Flutter中，Icon组件是只是起一个展示效果，不能进行交互，如果要实现交互，就需要使用图标按钮IconButton组件。

图标组件有如下几个组件：

  1. IconButton：可以交互的Icon
  2. Icons：Flutter自带的Icon集合
  3. IconTheme：Icon主题
  4. ImageIcon：通过AssetImage或其他图片显示Icon

Flutter的Icon组件和图片的对比：

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

Icon的常用属性：

  • color：Color类型，设置图标的颜色
  • size：Double类型，设置图标的尺寸
1、Icon的基本使用
return Icon(Icons.add);

图片alt

2、Icon设置颜色和尺寸
return Icon(
  Icons.add,
  color: Colors.blue,
  size: 100.0,
);

图片alt

3、使用Text显示Icon
String icons = "";
icons += "\ue145";//这里根据图标Icons.add去查找对应的16进制，必须替换0x为\u
icons += " \ue0cd";
icons += " \uE90D";

return Text(
  icons,
  style: TextStyle(
    fontFamily: "MaterialIcons",//必须要添加该属性才能显示
    fontSize: 50.0,
    color: Colors.blue,
  ),
);

图片alt

4、自定义图标

在实际工作中，系统自带的图标完全不能满足我们的需求，所以我们可以在www.iconfont.cn上去下载自己需要的库，在Flutter中只需要ttf的格式。

4.1、首先去iconfont.cn上去打包下载自己需要的图标
4.2、在项目的根目录下新建一个icons目录，将上一步下载里的ttf格式的文件拷贝进去
4.3、修改pubspec.yaml文件，添加或修改如下内容：
  fonts:
     - family: hiIcon
       fonts:
         - asset: fonts/iconfont.ttf
4.4、定义一个Icon类型，内容如下：
import 'package:flutter/material.dart';

class HiIcons {
  static const IconData shuaxin = const IconData(
    0xe63a,//这个需要在第一步下载的包中去找到iconfont.css文件，里面有对应图标的编码
    fontFamily: 'hiIcon',//这个必须跟pubspec.yaml里的名字保持一致
    matchTextDirection: true,
  );

  static const IconData macdizhiguizheng = const IconData(
    0xe6f3,
    fontFamily: 'hiIcon',
    matchTextDirection: true,
  );
}
4.5、导入第四步的类，然后进行使用即可
import '../HiCoins.dart';

return Column(
  children: <Widget>[
    Icon(
      HiIcons.shuaxin,
      color: Colors.blue,
      size: 50.0,
    ),
    Icon(
      HiIcons.macdizhiguizheng,
      color: Colors.blue,
      size: 50.0,
    ),
  ],
);

重新编译下，即可看到下面的效果图

图片alt

5、图标按钮组件(IconButton)

在前面我们已经说过，如果想要Icon具有交互操作，那么就需要使用IconButton组件，图标按钮组件是基于Material Design风格的组件，所以在按下的时候会有水波纹效果。如果设置onPressed回调函数为null，这个按钮就处于禁用状态。

return Center(
  child: IconButton(
    icon: Icon(
      Icons.volume_up,
      color: Colors.green[600],
      size: 40.0,
    ),
    tooltip: '按下显示',
    onPressed: () {
      print("按下打印");
    },
  ),
);

图片alt