Flutter Icon、ImageIcon、IconButton参数详解

1.继承关系

Icon:            Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Icon

ImageIcon:  Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > ImageIcon

IconButton: Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > IconButton

2.Icon

2.1 介绍

图形图标，来自于所述的字体的字形绘制。图标不可交互式。

创建Icon对象要有IconData成员，而IconData可以从Icons类中直接获取!

如：new Icon(Icons.menu);

 

在配置文件pubspec.yaml里有说明：

  # The following line ensures that the Material Icons font is included with your application, so that you can use the icons in the material Icons class.（下面一行确保应用程序中包含了Material Icons字体，以便您可以在Material Icons类中使用图标。）

  uses-material-design: true

 

要使用flutter提供的icon要配置上面一行，才能使用Material Icons字体，如new Icon(Icons.menu);

icon有以下图标，图标对应值查看https://material.io/tools/icons/?style=baseline或者Icons文档：

图片地址：https://raw.githubusercontent.com/flutter/cupertino_icons/master/map.png

2.2 参数详解

  const Icon(this.icon, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
    this.textDirection,
  }) : super(key: key);

2.2.1 Key key

参数Key key:官方解释：https://flutterchina.club/widgets-intro/#key

2.2.2 double size

逻辑像素中图标的大小(pt.dp)。由于图标是正方形，设置size等于同时设置了宽高。

默认为当前IconTheme大小（如果有）。如果没有 IconTheme，或者它没有指定显式大小，则默认为24.0（带逻辑像素单位）。

2.2.3 Color color

设置图标颜色，如果没设置以主题是黑色则图标颜色默认为白色，如果主题较浅则图标颜色默认为黑色。

2.2.4 String semanticLabel

帮助盲人或者视力有障碍的用户提供语言辅助描述

2.2.5 TextDirection textDirection

渲染图标的方向,前提需要IconData.matchTextDirection字段设置为true，如Icons类里：

  static const IconData backspace = IconData(0xe14a, fontFamily: 'MaterialIcons', matchTextDirection: true);

  static const IconData backup = IconData(0xe864, fontFamily: 'MaterialIcons');

backup不支持，而backspace 支持textDirection

2.3 意外收获

从下面的地址下载和使用google提供的fonts，使用不同字体，丰富APP！

https://github.com/google/fonts

https://fonts.google.com/

推荐从阿里巴巴矢量图库：http://www.iconfont.cn/

相关使用教程：http://www.iconfont.cn/help/detail?helptype=code

3 ImageIcon

3.1 介绍

自定义图形图标，来自于图片绘制。图标不可交互式。

3.2 参数详解

  const ImageIcon(this.image, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
  }) : super(key: key);

比起Icon，不同之处就是用自定义ImageProvider来定义图标

ImageProvider在文章：《Flutter Image 参数详解》讲解过，有五种

示例： ImageIcon(AssetImage('images/test.png'), color: Colors.red,);

说明一下，图片一定要png，加载出来是纯色的背景图片，颜色通过color定义

如原图test.png：

输出效果图：

 

4 IconButton

4.1 介绍

图形图标，可交互式的

4.2 参数详解

  const IconButton({
    Key key,
    this.iconSize = 24.0,
    this.padding = const EdgeInsets.all(8.0),
    this.alignment = Alignment.center,
    @required this.icon,
    this.color,
    this.highlightColor,
    this.splashColor,
    this.disabledColor,
    @required this.onPressed,
    this.tooltip
  }) : assert(iconSize != null),
       assert(padding != null),
       assert(alignment != null),
       assert(icon != null),
       super(key: key);

4.2.1 EdgeInsetsGeometry  padding

在《Flutter Container 参数详解》2.3详解过，略

4.2.2 AlignmentGeometry alignment

在《Flutter Container 参数详解》2.2详解过，略

4.2.3 Widget icon

一个任意Widget控件做为icon

4.2.4 Color color

如果设置了图标点击回调，则用于按钮内图标的颜色。(笔者试不出color效果！！！)

4.2.5 Color highlightColor

按钮处于向下（按下）状态时按钮的辅助颜色。

4.2.6 Color splashColor

按钮处于向下（按下）状态时按钮的主要颜色。

初始叠加层的中心点与用户触摸事件的生命点相匹配。如果触摸持续足够长的时间，飞溅叠加将扩展以填充按钮区域。如果初始颜色具有透明度，则突出显示和按钮颜色将显示。

4.2.7 Color disabledColor

如果没设置图标点击回调，则用于按钮内图标的颜色。(笔者试不出disabledColor效果！！！)

4.2.8 VoidCallback onPressed

点击或以其他方式激活按钮时调用的回调。

如果将其设置为null，则将禁用该按钮。

4.2.9 String tooltip

描述按下按钮时将发生的操作的文本。

当用户长按按钮并用于辅助功能时，将显示此文本。

如下示例『I is IconButton tooltip』

5.示例

 

代码：

 Widget getIconRow() {
    return new Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
      new Expanded(flex: 1, child: getIcon()),
      new Expanded(flex: 1, child: getIconWithColor()),
      new Expanded(flex: 1, child: getImageIcon()),
      new Expanded(flex: 1, child: getIconButtonText()),
      new Expanded(flex: 1, child: getIconButtonImage())
    ]);
  }

  Widget getIcon() {
    return Icon(
      Icons.backup,
    );
  }

  Widget getIconWithColor() {
    return Icon(
      Icons.backspace,
      color: Colors.blue,
      textDirection: TextDirection.ltr,
    );
  }

  Widget getImageIcon() {
    return ImageIcon(
      AssetImage('images/test.png'),
      color: Colors.red,
      size: 50,
    );
  }

  Widget getIconButtonText() {
    return IconButton(
//      onPressed: pressedIconBtn,
      icon: getTextRich(),
      color: Colors.blue,
      iconSize: 50,
      highlightColor: Color(0x991B5E20),
      splashColor: Color(0x990D47A1),
      disabledColor: Color(0xFF0D47A1),
      tooltip: "I is IconButton tooltip",
    );
  }

  Widget getIconButtonImage() {
    return IconButton(
//      onPressed: null,
      onPressed: pressedIconBtn,
      icon: getImage(),
//      color: Colors.blue,  // 无用！！！
      iconSize: 50,
      highlightColor: Color(0x991B5E20),
      splashColor: Color(0x990D47A1),
      disabledColor: Color(0xFF0D47A1), // 无用！！！
    );
  }

  void pressedIconBtn() {}

  Widget getImage() {
    return new Image.asset(
      'images/test.png',
//      width: 300.0,
//      height: 300.0,
      matchTextDirection: false,
      fit: BoxFit.fitWidth,
//      repeat: ImageRepeat.repeat,
//      filterQuality: FilterQuality.high,
//          color: Colors.black,
//          colorBlendMode: BlendMode.xor,
    );
  }

  Widget getTextRich() {
    List children = new List<TextSpan>();
    children.add(TextSpan(text: "Chen", style: TextStyle(color: Colors.black)));
    children.add(TextSpan(text: "Ying", style: TextStyle(color: Colors.red)));
    children.add(TextSpan(text: "you", style: TextStyle(color: Colors.blue)));
    List children1 = new List<TextSpan>();
    children1.add(
        TextSpan(text: "  Is  ", style: TextStyle(color: Colors.blueAccent)));
    children1.add(
        TextSpan(text: "Androider", style: TextStyle(color: Colors.amber)));
    children.add(
        TextSpan(children: children1, style: TextStyle(color: Colors.blue)));
    TextSpan textSpan = new TextSpan(children: children);
    return Text.rich(
      textSpan,
    );
  }

6.参考：

https://docs.flutter.io/flutter/widgets/Icon-class.html

https://docs.flutter.io/flutter/material/Icons-class.html

https://docs.flutter.io/flutter/material/IconButton-class.html

sdk源码