[Flutter 基础] - Flutter基础组件 - Icon

Flutter 的 Icon 组件用于显示图标，支持 Material Icons （默认）、Cupertino Icons （iOS 风格）和 自定义图标 。图标通过 IconData 对象定义，通常来自 Icons 类（Material）或 CupertinoIcons 类（iOS）。

一、基本用法

Icon的一般用法和image有点类似，只是Icon不支持通过url的方式去加载。

1. 直接使用

dart 复制代码

Icon(
  Icons.home, // 图标名称
  size: 64.0,  // 图标大小（逻辑像素）
  color: Colors.blue, // 图标颜色
  semanticLabel: '首页', // 无障碍标签（屏幕阅读器）
),
Icon(
  Icons.home, // 图标名称
  size: 64.0,  // 图标大小（逻辑像素）
  color: Colors.red, // 图标颜色
  semanticLabel: '首页', // 无障碍标签（屏幕阅读器）
);

2. 阴影效果

Icon是支持阴影效果的，但是不支持颜色渐变效果。

dart 复制代码

Icon(
  Icons.star,
  shadows: [
    Shadow(
      color: Colors.black.withOpacity(0.5),
      offset: Offset(2, 2),
      blurRadius: 4.0,
    ),
  ],
);

3. 无障碍支持

设置 semanticLabel ：

dart 复制代码

Icon(
  Icons.accessibility,
  semanticLabel: '无障碍模式',
  size: 32,
);

二. 常用属性

属性	类型	说明
`icon`	`IconData`	必填，指定要显示的图标（如 `Icons.star`）。
`size`	`double`	图标大小，默认 `24.0`。
`color`	`Color`	图标颜色，默认继承主题色。
`semanticLabel`	`String`	辅助功能标签，用于屏幕阅读器描述图标功能。
`textDirection`	`TextDirection`	图标绘制方向（如 `TextDirection.rtl`）。
`shadows`	`List<Shadow>`	添加阴影效果，增强视觉层次。

三、图标库的使用

Material官方图标库虽然也有不少图标，但是大多数项目都是有自己的一套图标库Flutter也是支持导入自定义的图标库的。

方法1：使用图片文件

这个的用法和image的用法有点类似，通过单张导入的方式把icon放在assets资源文件夹下

步骤：

在 pubspec.yaml 中配置图片路径：

yaml 复制代码

flutter:
  assets:
    - assets/icons/collection.png //配置icon存放的路径

通过 ImageIcon 显示：

dart 复制代码

ImageIcon(
  AssetImage('assets/icons/collection.png'),//这个路径是pubspec中声明的路径
  size: 64,
  color: Colors.red,
);

方法2：自定义字体图标

由于项目中一般使用图标数量都会比较多，而且通过迭代的方式经常会更换图标，所以单个导入多方式维护成本也非常的高。所以一般都会采用自定义字体图标的方式去引入图标库。将字体图标文件（如 .ttf）添加到项目。很多设计平台都支持导出ttf格式的文件，文件里会包含所有需要的图标。然后通过pubspec配置文件路径。

步骤：

在 pubspec.yaml 中声明字体：

yaml 复制代码

fonts:
  - family: Iconfont
    fonts:
      - asset: assets/fonts/iconfont.ttf

创建对应的Dart文件,并声明一下对应的icon。

ini 复制代码

class IconFont {
    static IconData add = IconData(0xE664, fontFamily:'iconfont');
    static IconData arrowRight = IconData(0xE664, fontFamily:'iconfont');
}

使用自定义图标：

dart 复制代码

Icon(IconFont.add, size: 64, color: Colors.orange);

使用 SVG 图标（需第三方库）

Icon组件目前不支持直接使用Svg的图标，如果想要使用svg的话，就得用第三方插件的方式去使用。

依赖：添加 flutter_svg 库：
yaml 复制代码
```
dependencies:
  flutter_svg: ^1.1.6
```

使用示例 ：

dart 复制代码

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/icons/custom_icon.svg',
  width: 32,
  height: 32,
  color: Colors.purple,
);

四、与组件的组合

项目中经常遇到一些组件中会包含一些icon之类的，Flutter中也是支持icon结合其它组件一起使用，比如带icon的button.

1. 在按钮中使用图标

示例：带图标和文字的按钮(ElevatedButton)：

dart 复制代码

ElevatedButton.icon(
  icon: Icon(Icons.add), // 图标
  label: Text('添加'), // 文本
  onPressed: () { /* 处理逻辑 */ },
);

只有图标的按钮组件(IconButton)：

dart 复制代码

IconButton(
  icon: Icon(Icons.search),
  onPressed: () { /* 搜索功能 */ },
  color: Colors.blue,
  iconSize: 30,
);

总结

Icon组件的一般用法类似Image，但是只支持加载本地icon，不支持通过网络url的方式加载。
Icon支持阴影效果，但是不支持渐变效果。
如果项目中icon数量较少，可以单个引入，如果icon数量比较多的话，可以通过ttf导入字体图标的方式去使用，方便管理和维护。
Icon组件可以结合ElevatedButton组合使用，还可以直接使用IconButton展示带点击事件的icon。