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

posted @   KindBrave  阅读(463)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 【.NET】调用本地 Deepseek 模型
点击右上角即可分享
微信分享提示