Flutter动态设置图标Icon,使用String/JSON/数组字符串

  • 发表于
  • flutter

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

在字体文件中,每一个字符都对应一个位码,而每一个位码对应一个显示字形,不同的字体就是指字形不同,即字符对应的字形是不同的。而在iconfont中,只是将位码对应的字形做成了图标,所以不同的字符最终就会渲染成不同的图标。

Flutter动态设置图标Icons

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

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

对应的编码在这:https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

我们看一个简单的例子:

运行效果如图3-21所示:

Flutter动态设置图标Icon,使用String/JSON/数组字符串

动态设置图标Icon示例一

我们可定义如下List

使用

动态设置图标Icon示例二:使用字符串

有如下JSON

然后这样解析