Flutter图标
1.Flutter自带图标
Flutter自带图标使用方式:通过Icon类,其中必选参数是icon: IconData,可以用Icons类来选择图标:
Icon(Icons.xxx)
Icon类的主要参数
参数名称 | 功能 |
---|---|
icon: IconData | 必选参数,可以用Icons.xxx来指定图标 |
size: double | 指定图标尺寸 |
color: Color | 指定图标颜色 |
2.使用自定义图标(iconfont)
这里演示了从iconfont中导入多个图标素材的方式
- 将图标素材加入iconfont的购物车中
- 点击下载,会下载一个压缩包,压缩包中包含.ttf文件,图标都在这里,可以通过引入这个.ttf来使用图标
1.下面是导入.ttf到flutter项目中的步骤
- 将.ttf放入项目目录下
- 在pubspec.yaml中添加font的选项,如下:
fonts:
- family: MyIconFonts
fonts:
- asset: fonts/iconfont.ttf
style: italic
其中,family是导入的字体的名称,asset是导入字体的地址
2.编写font.dart,即自定义图标的文件
import 'package:flutter/material.dart';
class Font {
static const IconData a1 = IconData(
//codePoint是图标的unicode编码,iconfont会在压缩包中的json中提供。注意0x开头
0xe63b,
//字体名称,是在pubspec.yaml中配置的font->family名称
fontFamily: "MyIconfonts",
//根据文字方向绘制图标(从左向右-从右向左)
matchTextDirection: true,
);
static const IconData a2 = IconData(
0xe63c,
fontFamily: "MyIconfonts",
matchTextDirection: true,
);
}
以上部分内容总结自课程 https://www.bilibili.com/video/BV1S4411E7LY
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 【.NET】调用本地 Deepseek 模型