Flutter:图标组件Icon

xiaohai 2021-08-16 08:18:41 190人围观 标签: Flutter 
简介图标组件是展示图标的组件,但是再Flutter中,Icon组件是只是起一个展示效果,不能进行交互,如果要实现交互,就需要使用图标按钮IconButton组件。

  图标组件是展示图标的组件,但是再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