如何在 Flutter 中使用 IconFont ?

我的个人博客同步更新,阅读体验会好一点,欢迎访问。

简书:https://www.jianshu.com/u/762002465748

掘金:https://juejin.im/user/5a3127da5188251c11409f0a

个人博客:https://wuht.coding.me/

废话

距离上一次更新博客已经半年了,实在是有点忙,期间还换了了个工作,很多的事情,但是非常感谢有的网友还跟我联系,自己写的东西还有人觉得有价值,这感觉挺好的。

正文

2018年2月世界移动大会Google发布了 Flutter beat1,现在 Flutter 已经更新到v0.5.2 了,是时候学习一波了。主要是最近在搞 Weex 被坑的不行了。

Iconfont 的使用自己去看一下文档了,我就不说了。

目前在 Flutter 中使用图标的几种方式

内置图标

目前在 Flutter 使用图标的话,可以使用 Icons :

  icon: Icon( Icons.home)
复制代码

内置图标还是挺多的,基本上还是够用的。

fontawesome

除了Icons,还有国外比较流行了 fontawesome 可以使用,已经有人做了个包了,依赖一下font_awesome_flutter这个包,使用也比较简单:

  icon: new Icon(FontAwesomeIcons.gamepad), 
复制代码

使用图片

这个主要就是配置一下 pubspec.yaml里的assets,使用的话跟图片一样,缺点就是大小和颜色不太好控制,而且会增加项目的体积。

iconfont

国内用的多,但是还没有人做 Flutter 的package,所以只能自己搞一下了。

教程开始了

从iconfont网站上下载ttf文件

放到某个目录下,比如说 fonts 文件夹下:

project/
  lib/
  	...
  fonts/
    iconfont.ttf
  pubspec.yaml  
复制代码

配置 pubspec.yaml 下的 fonts:

  fonts:
    - family: iconfont
      fonts:
        - asset: fonts/iconfont.ttf
复制代码

然后就可以使用了

Icon( IconData(0xe6bb, fontFamily: 'iconfont'),color: Colors.blue,size: 89.0)
复制代码

0xe6bb 这个十六进制是从这里拿到的:

不同的十六进制代表不同的图标。

本来教程到这里就结束了,但在实际做的过程中我是有一个疑问的,就是为啥下面的代码不可以正常显示图标,而且 字符 x,会被转换成一个键盘的图标,这个问题之前在vue使用v-text设置iconfont图标就会出现,但是一直不知道为啥,希望有大佬能评论区解答一下。

Text("#0xe7b7;",style: TextStyle(fontFamily: 'iconfont'))// 可以正常换字体,但图标不行
复制代码

转载于:https://juejin.im/post/5b1bb68c6fb9a01e4508cbf5

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值