Flutter：Icon

MaterialDesign的图标库

https://material.io/tools/icons/?style=baseline

阿里巴巴的图标库

https://www.iconfont.cn/

IconData 创建一个具体的字体图标

const IconData(
    this.codePoint, //该图标在字体中的编码  
    {
        this.fontFamily,//所属字体
        this.fontPackage,//字体所属的包
        this.matchTextDirection = false,//是否启用镜像，向左还是向右
    }
);

Icons 定义了一系列IconData的枚举值，包含了material design的所有内置图标

class Icons {
    Icons._();
    static const IconData threesixty = IconData(0xe577, fontFamily: 'MaterialIcons');
    static const IconData threed_rotation = IconData(0xe84d, fontFamily: 'MaterialIcons');
    ......
}

Icon 字体图标

const Icon(
    this.icon, //IconData类型，flutter内置了一系列的枚举值，使用Icons.xxx，或创建IconData
    {
        Key key,
        this.size,//图标显示的大小，固定是正方形，默认24,
        this.color,//图标颜色，如果不设置，默认是黑色图标
        this.semanticLabel,//?帮助盲人或者视力有障碍的用户提供语言辅助描述,还未用到过
        this.textDirection,//图标显示的方向，是向左还是向右，IconData的matchTextDirection为true时有效，matchTextDirection默认值为false，因此只设置textDirection无效
    }
)

示例：

Icon(Icons.accessible,),//默认是黑色
Icon(Icons.accessible,color: Colors.green,),//设置图标为绿色
Icon(Icons.accessible,color: Colors.red,),//设置图标为红色

Icon(Icons.accessible,color: Colors.red,size: 10,),//设置图标大小
Icon(Icons.accessible,color: Colors.red,),//size默认24
Icon(Icons.accessible,color: Colors.red,size: 30,),//设置图标大小

Icon(IconData(0xe914, fontFamily: 'MaterialIcons',matchTextDirection: true),color: Colors.red,size: 30,textDirection: TextDirection.ltr,),
Icon(IconData(0xe914, fontFamily: 'MaterialIcons',matchTextDirection: true),color: Colors.red,size: 30,textDirection: TextDirection.rtl,),

ImageIcon

将png的图片 使用图标形式显示，可以更改其显示颜色

const ImageIcon(
    this.image, //ImageProvider类型  用于加载具体的图片
    {
        Key key,
        this.size,//大小
        this.color,//想要显示的颜色
        this.semanticLabel,
    }
)

ImageProvider是一个抽象类，其子类包括

• AssetImage 资源图片
• FileImage 文件图片
• NetworkImage 网络图片
• MemoryImage 内存图片
  如：

ImageIcon(AssetImage("images/img06.png"),size: 40,),//默认显示原色
ImageIcon(AssetImage("images/img06.png"),color: Colors.red,size: 40,),//红色
ImageIcon(AssetImage("images/img06.png"),color: Colors.green,size: 40,),//绿色

IconButton 图标按钮

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//长按后的提示语
})

示例：

点击时 闪烁的颜色blue（忽略内部的黑色圆圈，截屏问题）

长按后的颜色 绿色

长按提示语

IconButton(
    icon: Icon(
        Icons.accessible,
        color: Colors.green,
    ),
    onPressed: () {},//点击触发的方法
    highlightColor: Colors.green,//长按后不松手时显示的颜色
    splashColor: Colors.blue,//点击一下时闪烁的颜色
    disabledColor: Colors.grey,//不可用时的颜色
    tooltip: "sss",//长按后的提示语
),