Flutter笔记(二)：Icon，ImageIcon,以及在Flutter中使用IconFont

icon

Icon

const Icon(
    this.icon, {    //创建一个图标
    Key key,
    this.size,      //图标大小，图标是正方形，所以是同时设置了宽和高
    this.color,    //图标是纯色，这表示图标颜色
    this.semanticLabel,  //图标的语义标签
    this.textDirection,  //用于渲染图标的文本方向
})

使用

Icon(IconFont.iconcategory,size: 50,color: Colors.red,),
Icon(IconData(0xe072, fontFamily: 'MaterialIcons'),size: 50,color: Colors.red,)  //IconData主要包含Code和字体名

ImageIcon

const ImageIcon(
    this.image, {  //和Icon基本相同只是将Icon换成了Image（ImageProvider）
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
 })

ImageProvider包含5个子类

• NetworkImage
• FileImage
• MemoryImage
• ExactAssetImage
• AssetImage

使用

ImageIcon(NetworkImage("https://s2.ax1x.com/2019/08/16/mZeD4P.png"),size: 50,),
ImageIcon(AssetImage("images/other.png"),size: 50,color: Colors.red,),

注1：加载asset需要在pubspec.yaml中加入

flutter:
  assets:
    - images/

注2：如果要想使用多色图标可使用Image代替

Image.asset(
    "images/other.png",
    width: 50,
    height: 50,
),
Image.network(
     "https://s2.ax1x.com/2019/08/16/mZeD4P.png",
     width: 50,
     height: 50,
),

在Flutter中使用IconFont

阿里字体图标库https://www.iconfont.cn
1、选择或上传想要的图标
下载到本地

1.png

2、解压拿到.ttf和.css文件

2.jpg

3、iconfont.ttf放入项目中，iconfont.css文件转换为.dart种的IconData

3.jpg

转换关系

.iconhome:before {
  content: "\e600";  //css中的home图标
}

css中的“\e600”转化为IconData种的“0xe600”（code）

import 'package:flutter/widgets.dart';
class IconFont{
  static const String _family = 'iconfont';
  IconFont._();
  static const IconData iconhome = IconData(0xe600, fontFamily: _family);  //IconData的home图标
}

4、使用

Icon(IconFont.iconcategory,size: 50,color: Colors.red,)

5、关于转化
根据上面的规则写了一个转化文件，直接拖入CSS文件即可转化

5.jpg

新建一个html文件复制以下代码，用浏览器打开即可使用转化功能

    
    



    
iconfont.css 转 Flutter IconData
    
将iconfont.css文件拖放到这里
    
生成后复制以下代码到iconfont.dart即可使用
    

    

完整代码

https://github.com/leiyun1993/FlutterDemo-GankIO