当前位置: 首页 > article >正文

Flutter自定义Icon的简易使用(两种)

方式一:利用第三方库(建议)

1、在阿里图标库(iconfont-阿里巴巴矢量图标库)上,加载购物车后,点击“下载素材”svg。

2、把下载的图片放入asstes目录下。​​​​​​​

3、修改yaml配置文件,设置Icon图标所在路径,导入插件,并Pub一下。

flutter:
  uses-material-design: true
  assets:
     - assets/icons/        //设置图标目录路径
dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_svg: ^2.0.10+1    //导入插件

4、在任意地方使用自定义类

方式二:纯手动集成使用(有概率显示"?X")

1、 在阿里图标库(iconfont-阿里巴巴矢量图标库)上,加载购物车后,点击“下载代码”。

2、把下载好的文件字体放入asstes目录下,并查看“iconfont.json”对应的图标unicode码。

3、修改yaml配置文件,给字体命名,设置Icon图标所在路径,并Pub一下。​​​​​​​

fonts:
     - family: HeiseIcon  # 自定义的字体家族名字
       fonts:
         - asset: assets/fonts/iconfont.ttf   # 字体文件路径

4、在任意地方使用自定义类

//一:用IconData生成Icon
Icon(IconData(0xf00a1, fontFamily: "MyIcon", matchTextDirection: true))

注释:0xf00a1  0x表示的是十六进制的前缀编码    f00a1表示的是unicode编码

//二:或者用Text生成Icon
Text(
    String.fromCharCode(0xf00a1),
    style: TextStyle(
    fontSize: 30,
    fontFamily: "MyIcon"
)

注意: 显示出现 "X  ?" 等情况,情况有多种:

        一:是配置文件yaml里引用地址、文件名没有一一对应。

        二:是修改配置文件后忘记pub。

        三:没有清除缓存,在项目中执行"flutter clean"。

        四:机器识别不了。


http://www.kler.cn/a/303814.html

相关文章:

  • 如何在手机上完整下载B站视频并保存到相册?
  • PyTorch深度学习与企业级项目实战-预训练语言模型GPT
  • @ComponentScan:Spring Boot中的自动装配大师
  • 2024-11-13 学习人工智能的Day26 sklearn(2)
  • 【STM32F1】——无线收发模块RF200与串口通信
  • 【JVM】关于JVM的内部原理你到底了解多少(八股文面经知识点)
  • 项目——负载均衡OJ
  • 【数据库】瀚高数据库Windows/Linux、下载安装、高级用法、数据迁移(保姆篇)
  • MongoDB设置系统服务启动教程
  • c/c++ *和后置++的优先级
  • YOLOv8+Deepsort+PyQt+GUI 语义分割+目标检测+姿态识别 三者合一(集成于一套系统)综合视觉分析系统
  • 数据库设计中的需求分析
  • TCPIP网络编程(尹圣雨)UDP 轮流收发消息(windows)
  • CSS 新特性查漏补缺,快来看看你用过几个?
  • C#使用TCP-S7协议读写西门子PLC(一)
  • SAM 2:分割图像和视频中的任何内容
  • ERP进销存多仓库管理系统源码 带完整的安装代码包以及搭建部署教程
  • Unity Timeline
  • HTTP 协议和 APACHE 服务
  • 零基础国产GD32单片机编程入门(二十五)USB口介绍及CDC类虚拟串口通讯详解及源码
  • 【深入浅出Redis】Redis常见问题以及解决方案,可用于面试
  • RK_android8.1在设置中去掉Bluetooth功能
  • 学习笔记 - 知识图谱的符号表示方法
  • Python去除图片中的白色像素点背景
  • David Baker 任科学顾问,初创公司发布世界最大蛋白质相互作用数据库,已获 8 轮融资
  • WPS如何删除表格下的空白页