Flutter开发中使用的图标

介绍在Flutter开发中使用图标图标。

一、 图标概述

图标是一系列支持材质设计的图标

图标类似于图标字体，即字体图标。它将图标制作成字体文件，然后通过指定不同的字符来显示不同的图片

II图标说明

2.1说明

在字体文件中，每个字符对应一个位代码，每个位代码对应一个显示字体。不同的字体是指不同的字体，即不同的字体对应不同的字符。在iconfont中，只有与位代码相对应的字形被制作成图标，因此不同的字符最终将被渲染成不同的图标

2.2图标优于图像的优势

小尺寸：您可以减小安装包的尺寸。

矢量：iconfont是矢量图标，放大不会影响其定义。

可以应用文本样式：字体图标的颜色和大小对齐可以像文本一样更改。

可以将文本与TextSpan混合。

三、 如何使用图标

3.1使用材质设计字体图标

默认情况下，Flutter包含一组用于材质设计的字体图标。pubspec中的配置。yaml文件如下

颤振：

使用材质设计：true

3.2图标仅用作图标

图标（Icons.favorite，颜色：Colors.ink，大小：24.0，语义标签：'在可访问性模式中宣布的文本'，），

图标（Icons.audiotrack，颜色：Colors.green，大小：30.0，），

图标（Icons.beach_access，颜色：Colors.blue，大小：36.0，），

3.3图标用作图标字体

字符串图标=“字符串：”+“\uf396”+“”；\uE000“+”\uE90D“；

文本（图标，样式：TextStyle(

 nbsp； ； ； ； ； ；fontFamily:“材料图标”，

 nbsp； ； ； ； ； ；字体大小：24.0，

 nbsp； ； ； ； ； ；color:颜色.绿色），

 nbsp； ； ；）

解释：

静态常量IconData收藏夹=IconData（0xe721，fontFamily:“MaterialIcons”）

与图标对应的十六进制字符代码。收藏夹是0xe721

``\U`后跟十六进制Unicode代码，用于将十六进制代码转换为中文、英文字母、标点符号、特殊字符和其他字符串

转换前转换后

0xf396\uf396

0xe000\ue000

0xe90d\ue90d