Flutter Icon

✨✨✨✨✨ 魏什么_多喝水 Flutter 之路

阿里图库

简介

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

iconfont 和图片相比有如下优势：

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

实例

1. Icon

class Icon extends StatelessWidget {
  /// Creates an icon.
  ///
  /// The [size] and [color] default to the value given by the current [IconTheme].
  const Icon(
    this.icon, {   
    Key key,
    this.size,           //大小
    this.color,          //颜色
    this.semanticLabel,  //语义标签
    this.textDirection,  //icon文字方向
  }) : super(key: key);

列子:

Container(
  width: 300,
  height: 300,
  color: Colors.lightGreenAccent,
  child: Icon(
    Icons.favorite,
    color: Colors.orange,
    size: 200,
  ),
),

image.png

2. IconData

class IconData {

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

列子:

 Container(
  width: 100,
  height: 100,
  color: Colors.lightGreenAccent,
  child: Icon(
    IconData(
        0xe914,
        fontFamily: 'MaterialIcons',
        matchTextDirection: true
    ),
    color: Colors.red,
    size: 30,
    textDirection: TextDirection.rtl,
  ),
),
Container(
  width: 100,
  height: 100,
  color: Colors.blueGrey,
  child: Icon(
    IconData(
        0xe914,
        fontFamily: 'MaterialIcons',
        matchTextDirection: true
    ),
    color: Colors.red,
    size: 30,
    textDirection: TextDirection.ltr,
  ),
),

image.png

3. ImageIcon

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

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

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

加载如Image一样

ImageIcon(
  AssetImage("image/flutter1.png"),
  size: 50,//默认黑色
),
ImageIcon(
  AssetImage("image/flutter1.png"),
  size: 50,
  color: Colors.orangeAccent,
),
ImageIcon(
  AssetImage("image/flutter1.png"),
  size: 50,
  color: Colors.blue,
),

image.png

4. 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.focusColor,
    this.hoverColor,
    this.highlightColor, //长按后不松手时显示的颜色
    this.splashColor,    //点击一下时闪烁的颜色
    this.disabledColor,  //不可用时的颜色
    @required this.onPressed, //点击后触发的方法
    this.focusNode,
    this.autofocus = false,
    this.tooltip,    //长按后的提示语
    this.enableFeedback = true,
  }) : assert(iconSize != null),
       assert(padding != null),
       assert(alignment != null),
       assert(autofocus != null),
       assert(icon != null),
       super(key: key);

例子:

IconButton(
  iconSize: 50,
  icon: Icon(
    Icons.android,
    color: Colors.deepPurple,
  ),
  onPressed: () {
    print(234);
  },
  highlightColor: Colors.green,//长按后不松手时显示的颜色
  splashColor: Colors.blue,//点击一下时闪烁的颜色
  disabledColor: Colors.grey,//不可用时的颜色
  tooltip: "copy",//长按后的提示语
),

我发现这个有的时候在iOS 模拟器中不好使,先留着,以后再研究下~