纪念我第一次引入阿里矢量图标库
之前看了好多教程,觉得很麻烦就一直没有动手手,之前用vue,每次加图标就要去配置里面改东西,还是很麻烦的,flutter会更简单吗?不可能,连加个图片都要配置的框架你以为加icon不需要吗?
1.
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下载到本地之后将下载的文件夹打开
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
将.ttf文件放入新建的icons文件,这是我的文件路径
在这里插入图片描述
找到你的配置文件的文件,就是配置图片文件的文件,与图片配置同一级别
在这里插入图片描述
fonts与assets同级别

fonts:
    - family: MyIcons
      fonts:
        - asset: assets/icons/iconfont.ttf

不会写没关系,在上图flutter下面找,有注释的地方,文件自动生成好的示例
在这里插入图片描述
我就是直接用的注释,ctrl+‘/’可取消注释,这就是引用了
然后在文件中的引用

new IconButton(
  icon:const Icon(IconData(0xe641, fontFamily: 'MyIcons')),
   //tooltip: 'Add Alarm',
   onPressed: () {
     print('点击了搜索按钮');
   }),

0xe641实在阿里矢量图中找到的,每个图标会对哦应一串字符
在这里插入图片描述
发现规律了吗?就是把 &# 换成 0 后面的字符串不变
在这里插入图片描述
鼠标移入之后就会出现复制代码
暂时每次想新加入图标都需要更新.ttf文件,引入图标嘛,都是一样的麻烦…欢迎大佬指正

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐