You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何为IconData查找合适的代码点?代码点来源解析

如何为IconData查找合适的代码点?示例中0xe808代码点的来源是什么?

嘿,这个问题其实和自定义图标字体的工作原理直接相关,我来拆解清楚:

一、先搞懂示例代码的本质

你贴的这段代码用的是自定义图标字体TikTokIcons),不是Flutter自带的Material/Cupertino图标。这类自定义图标每个都会被映射到一个专属的Unicode代码点,而0xe808就是聊天气泡图标在这个字体里的专属编码。

二、怎么找自定义图标的代码点?

自定义图标的代码点不是凭空来的,主要有这几个获取途径:

  • 图标字体制作工具:像IconFont、IcoMoon、Fontello这类工具是制作自定义图标字体的常用选择。当你把图标打包成字体时,每个图标都会被分配一个**私有使用区域(PUA)**的代码(Unicode预留的、不会和标准字符冲突的区间,通常是0xE0000xF8FF,你的0xe808正好在这个范围内)。工具的导出页面会直接显示每个图标对应的十六进制代码,复制过来用就行。
  • 查看字体文件:用系统自带的字体查看工具(比如Mac的Font Book、Windows的Character Map)打开你的自定义字体文件,找到目标图标,就能看到它对应的十六进制编码,这就是IconData需要的数值。
  • 用工具自动生成代码:很多图标工具支持直接导出Flutter可用的dart代码,你示例里的这段代码大概率就是这么来的——工具会自动把每个图标和对应的代码点绑定好,直接复制到项目里就能用。

三、示例中0xe808的具体来源

这个0xe808是在制作TikTokIcons这个自定义字体时,给聊天气泡图标分配的专属代码点。它是图标字体制作者(或者你用的工具)指定的,目的是让这个图标在字体里有唯一的标识,不会和其他图标冲突。

举个实际场景:如果你用IcoMoon选了聊天气泡图标添加到项目,工具会自动给它分配一个PUA里的代码(比如0xe808),导出时就会生成类似你贴的那段代码,把chat_bubble和这个代码点绑定,这样你就能直接通过chat_bubble调用这个图标了。

额外提一句:系统自带图标不用自己找代码点

如果用Flutter自带的Material图标,直接用Icons.chat_bubble就行——Flutter已经把所有系统图标对应的代码点封装好了,背后也是用IconData实现,但这些代码点是Google官方分配的标准编码,不用你自己操心。

内容的提问来源于stack exchange,提问作者rozerro

火山引擎 最新活动