Flutter控件——常用控件:Icon

Posted wzj_what_why_how

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter控件——常用控件:Icon相关的知识,希望对你有一定的参考价值。

Icon

  • Icon 是将图标做成字体文件,然后通过指定不同的字符而显示不同的图片。
  • 在字体文件中,每一个字符都对应一个位码,而每一个位码对应一个显示字形,不同的字体就是指字形不同,即字符对应的字形是不同的。

在Flutter开发中,iconfont和图片相比有如下优势:

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

1.使用Material Design字体图标

Flutter默认包含了一套Material Design的字体图标,在pubspec.yaml文件中的配置如下

flutter:
  uses-material-design: true

Material Design所有图标可以在其官网查看:https://material.io/tools/icons/

例子:

String icons = "";
// accessible: 0xe03e
icons += "\\uE03e";
// error:  0xe237
icons += " \\uE237";
// fingerprint: 0xe287
icons += " \\uE287";

Text(
  icons,
  style: TextStyle(
    fontFamily: "MaterialIcons",
    fontSize: 24.0,
    color: Colors.green,
  ),
);

通过这个示例可以看到,使用图标就像使用文本一样,但是这种方式需要我们提供每个图标的码点,这并对开发者不友好,
所以,Flutter封装了IconData和Icon来专门显示字体图标,上面的例子也可以用如下方式实现:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.accessible,color: Colors.green),
    Icon(Icons.error,color: Colors.green),
    Icon(Icons.fingerprint,color: Colors.green),
  ],
)

Icons类中包含了所有Material Design图标的IconData静态变量定义。

2. 使用自定义字体图标

  • 我们也可以使用自定义字体图标。iconfont.cn上有很多字体图标素材,我们可以选择自己需要的图标打包下载后,会生成一些不同格式的字体文件,在Flutter中,我们使用ttf格式即可。

  • 假设我们项目中需要使用一个书籍图标和微信图标,我们打包下载后导入:

  • 导入字体图标文件;这一步和导入字体文件相同,假设我们的字体图标文件保存在项目根目录下,路径为"fonts/iconfont.ttf":

      fonts:
        - family: myIcon  #指定一个字体名
          fonts:
            - asset: fonts/iconfont.ttf
    

为了使用方便,定义一个MyIcons类,功能和Icons类一样:将字体文件中的所有图标都定义成静态变量:

class MyIcons
  // book 图标
  static const IconData book = const IconData(
      0xe614,
      fontFamily: 'myIcon',
      matchTextDirection: true
  );
  // 微信图标
  static const IconData wechat = const IconData(
      0xec7d,
      fontFamily: 'myIcon',
      matchTextDirection: true
  );

使用

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(MyIcons.book,color: Colors.purple),
    Icon(MyIcons.wechat,color: Colors.green),
  ],
)

以上是关于Flutter控件——常用控件:Icon的主要内容,如果未能解决你的问题,请参考以下文章

Flutter小部件之图片(Image)和图标(Icon)

Flutter控件——常用控件:ListView

Flutter控件——常用控件:StatelessWidget和Context

Flutter控件——常用控件:Text

Flutter控件——常用控件:GridView

Flutter控件——常用控件:GridView