基础组件:ICON

news/2024/11/17 8:24:40/文章来源:https://www.cnblogs.com/linuxAndMcu/p/18375912

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

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

在 Flutter 开发中,iconfont 和图片相比有如下优势:

  1. 体积小:可以减小安装包大小。
  2. 矢量的:iconfont 都是矢量图标,放大不会影响其清晰度。
  3. 可以应用文本样式:可以像文本一样改变字体图标的颜色、大小对齐等。
  4. 可以通过 TextSpan 和文本混用。

一、使用Material Design字体图标

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

flutter:uses-material-design: true

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

我们看一个简单的例子:

String icons = "";
// accessible: 0xe03e
icons += "\uE03e";
// error:  0xe237
icons += " \uE237";
// fingerprint: 0xe287
icons += " \uE287";Text(icons,style: TextStyle(fontFamily: "MaterialIcons",fontSize: 24.0,color: Colors.green,),
);

运行效果如下图所示:

Flutter_icon_E.png


通过这个示例可以看到,使用图标就像使用文本一样,但是这种方式需要我们提供每个图标的码点,这对开发者并不友好,所以,Flutter 封装了IconDataIcon来专门显示字体图标,上面的例子也可以用如下方式实现:

Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Icon(Icons.accessible,color: Colors.green),Icon(Icons.error,color: Colors.green),Icon(Icons.fingerprint,color: Colors.green),],
)

Icons类中包含了所有 Material Design 图标的IconData静态变量定义。

二、使用自定义字体图标

我们也可以使用自定义字体图标。iconfont.cn 上有很多字体图标素材,我们可以选择自己需要的图标打包下载后,会生成一些不同格式的字体文件,在 Flutter 中,我们使用 ttf 格式即可。

假设我们项目中需要使用一个书籍图标和微信图标,我们打包下载后导入:

(1)导入字体图标文件;这一步和导入字体文件相同,假设我们的字体图标文件保存在项目根目录下,路径为 "fonts/iconfont.ttf":

fonts:- family: myIcon  #指定一个字体名fonts:- asset: fonts/iconfont.ttf

(2)为了使用方便,我们定义一个MyIcons类,功能和Icons类一样:将字体文件中的所有图标都定义成静态变量:

class MyIcons{// book 图标static const IconData book = const IconData(0xe614, fontFamily: 'myIcon', matchTextDirection: true);// 微信图标static const IconData wechat = const IconData(0xec7d,  fontFamily: 'myIcon', matchTextDirection: true);
}

(3)使用

Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Icon(MyIcons.book,color: Colors.purple),Icon(MyIcons.wechat,color: Colors.green),],
)

运行后效果如下图所示:

Flutter_icon_F.png


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/786077.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker部署Nginx,无法访问的解决办法

最近用阿里云的服务器部署了一下Nginx,发现无法通过外网访问,排除掉防火墙和端口映射的问题,最终在阿里云官方发现解决办法,docker0网桥的网段与内网eth0网段冲突,可能导致Nginx无法访问,修改Docker的网段后正常访问. 1.运行以下命令,查看docker0和eth0网段是否冲突 route …

一起单测引起的项目加载失败惨案

一、前言最近在开发一个功能模块时,在功能自测阶段,通过使用单测测试功能的完整性,在测试单测联通性使用到静态方法测试时,发现单测报错,通过查阅解决方案发现需要对Javaassist包进行排包或者升版本处理。通过排包解决掉单测报错,在部署项目时发现频繁报bean注入失败问题…

基础组件:图片

Flutter 中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。 ImageProvider ImageProvider 是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvider ,如AssetImage是实现了从Asset中…

第6篇 好用免费的开发AI:FittenCode Chart,功能类似chatgpt

你所不知道的免费,又好用的AI,帮助你提高工作效率; 1.打开vs,点击扩展》管理工具,然后搜索Fitten Code,安装下载完成后,重新打开vs2.打开vs,管理工具,就会出现Fitten Code ,选择 open chat window,解决方案管理下就会出现Fittencode Chart,3.输入问题,就可以对话,…

SonarQube 安装及使用

简介 SonarQube是一款用于代码质量管理的开源工具,是静态代码检查工具,采用 B/S 架构它主要用于管理源代码的质量,可以支持众多计算机语言,比如 php,java, C#, go,C/C++, Cobol, JavaScrip, Groovy 等。sonar 可以通过 PMD,CheckStyle,Findbugs 等等代码规则检测工具来…

基础组件:按钮

Material 组件库中提供了多种按钮组件如ElevatedButton、TextButton、OutlinedButton等,它们都是直接或间接对RawMaterialButton组件的包装定制,所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观,而按钮的外观大都可以通过属性来自定义,…

线性dp:最长公共子串

最长公共子串本文讲解的题与leetcode718.最长重复子数组,题意一模一样,阅读完本文以后可以去挑战这题。力扣链接 题目叙述: 给定两个字符串,输出其最长公共子串的长度。 输入 ABACCB AACCAB输出 3解释 最长公共子串是ACC,其长度为3。 与最长公共子序列的区别公共子串:字符…

【matplotlib教程】数据可视化

@TOC显示中文和负号matplotlib默认使用英文字库,汉字会乱码,要指定中文字库matplotlib.rcParams[font.family]=simHei #黑体 matplotlib.pyplot.rcParams[axes.unicode_minus] = False # 显示负号1.各种绘图函数 1.1 matplotlib.pyplot.plot def plot(*args, scalex=True, s…

Charles 抓包工具安装下载

下载 下载地址:https://www.charlesproxy.com/latest-release/download.do 激活 激活地址:https://www.zzzmode.com/mytools/charles/ 激活 help-》Register Charles 作者:陈彦斌 出处:https://www.cnblogs.com/chenyanbin/关注: 点我哟(^U^)ノ~YO

api调用工具推荐__hoppscotch(postwomen)

下载地址https://hoppscotch.com/downloadhoppscotch是一款开源api调用工具,该api调用工具之前叫postwomen,大概率是为了蹭postman热度,后来确实在开发者群体中被广泛使用,已经不再需要这种热度了,因此改名hoppscotch 官方给出改名的理由如下Similarity in name with &quo…