文章目录
- 概念介绍
- 实现方法
- 示例代码
- 相关推荐
我们在上一章回中字体图标相关的内容,本章回中将介绍 如何自定义字体图标.闲话休提,让我们一起Talk Flutter吧。
概念介绍
我们在本章回中说的自定义字体图标本质上是对字体图标进行封装,让它的使用方式和系统SDK中字体图标的使用方式完全一样。因此,本章回内容可以看作是对上一章回内容的扩展延伸。下面我们将介绍自定义图标的详细步骤。
实现方法
- 自定义一个字体图标类,通过该类来封装字体图标;
- 在类中通过静态常量成员封装字体图标,成员的类型是IconData;
- 在Icon组件中直接使用类中静态常量成员,这和系统SDK中的使用方式完全一致;
示例代码
///自定义图标类,方便在代码中直接使用
class CustomIcon {static const IconData char_e = const IconData(0x13ec, fontFamily: 'IconMoon', matchTextDirection: true,);static const IconData char_count = const IconData(0x2211, fontFamily: 'IconMoon', matchTextDirection: true,);static const IconData num_16 = const IconData(0x024f0, fontFamily: 'IconMoon', matchTextDirection: true,);static const IconData shap_3 = const IconData(0x2206, fontFamily: 'IconMoon', matchTextDirection: true,);
}
///使用自定义类中的字体图标,还可以修改图标和大小和颜色
Icon(CustomIcon.char_count,size: 40,color: Colors.purpleAccent,),
上面代码中只封装四个字体图标,其实文件中还有很多的字体图标,大家可以自己去封装。此外,我们还可以通过Iocn提供的属性来修改字体图标的大小和颜色。
编译并且运行上面的代码可以看到自定义字体图标中的数字,大家可以自己切换不同的字体图标,亲自体验一下自定义字体图标的过程。
相关推荐
在最后我们推荐一些好的字体图标,点击这里查看网站,该网站提供了很多开源的字体图标,不过在使用时需要遵守SIL开源协议。
选择某一类字体图标后可以下载到本地使用,字体图标的文件是ttf格式,它的使用方法我们在上一章回中介绍过了。该网站最大的优点是提供了自定义类,并且在类中封装了字体图标,类中静态常量成员的名字简洁明了,而且与ttf文件中的字体相匹配,我们可以代码中直接拿来使用。
Flttter
社区也提供了好用的字体图标,他们把字体图标封装成了三方包,包名是:font_awesome_flutter
。我们可以在yaml
配置文件中导入该包,然后像使用系统SKD提供的字体图标一样去使用该包中的字体图标。包中图标的样式可以到官方网站中查看。
看官们,关于"自定义字体图标
"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!