Icon

Icon 用于显示 Material Design 或自定义图标。

构造函数

Icon(
  IconData? icon, {                                       // 图标数据（必填）
  Key? key,                                               // 组件标识
  double? size,                                           // 图标大小（默认 24）
  Color? color,                                           // 图标颜色
  String? semanticLabel,                                  // 语义标签（用于无障碍）
  TextDirection? textDirection,                            // 图标方向（影响镜像翻转）
  List<Shadow>? shadows,                                  // 图标阴影
})

属性速查

属性	类型	默认值	说明
icon	IconData?	必填	图标数据
size	double?	24	图标大小
color	Color?	主题色	图标颜色
shadows	List<Shadow>?	null	图标阴影
semanticLabel	String?	null	语义标签
textDirection	TextDirection?	null	图标方向
fill	double?	0	填充比例 0~1（Material 3）

快速示例

基本用法

import 'package:flutter/material.dart';

class IconBasicExample extends StatelessWidget {
  const IconBasicExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Icon 基本用法')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            // ─── ★ size + color ──────────────
            Icon(Icons.home, size: 24, color: Colors.blue),
            // ─── ☆ size + color ──────────────
            SizedBox(height: 8),
            Icon(Icons.favorite, size: 32, color: Colors.red),
            SizedBox(height: 8),
            Icon(Icons.settings, size: 40, color: Colors.grey),
          ],
        ),
      ),
    );
  }
}

常用 Material 图标速查

分类	图标
导航	Icons.home、Icons.search、Icons.settings、Icons.person、Icons.menu
操作	Icons.add、Icons.remove、Icons.edit、Icons.delete、Icons.share
反馈	Icons.check、Icons.close、Icons.info、Icons.warning、Icons.error、Icons.check_circle
箭头	Icons.arrow_back、Icons.arrow_forward、Icons.arrow_upward、Icons.arrow_downward
媒体	Icons.camera、Icons.phone、Icons.email、Icons.notifications
状态	Icons.visibility、Icons.visibility_off、Icons.lock、Icons.lock_open
文件	Icons.download、Icons.upload、Icons.refresh
收藏	Icons.favorite、Icons.star、Icons.star_border、Icons.bookmark
其他	Icons.calendar_today、Icons.location_on、Icons.cancel、Icons.logout、Icons.dark_mode、Icons.light_mode

完整图标列表：https://api.flutter.dev/flutter/material/Icons-class.html

IconButton — 可点击图标

构造函数

IconButton({
  Key? key,                                               // 组件标识
  double? iconSize,                                       // 图标大小（默认 24）
  VisualDensity? visualDensity,                           // 视觉密度
  EdgeInsetsGeometry padding = const EdgeInsets.all(8),   // 内边距
  EdgeInsetsGeometry? alignment,                          // 对齐方式
  double? splashRadius,                                   // 水波纹半径
  Color? color,                                           // 图标颜色
  Color? focusColor,                                      // 聚焦颜色
  Color? hoverColor,                                      // 悬浮颜色
  Color? highlightColor,                                  // 高亮颜色
  Color? splashColor,                                     // 水波纹颜色
  Color? disabledColor,                                    // 禁用颜色
  required VoidCallback? onPressed,                       // 点击回调（必填，null 则禁用）
  MouseCursor? mouseCursor,                               // 鼠标指针样式
  FocusNode? focusNode,                                   // 焦点节点
  bool autofocus = false,                                 // 是否自动聚焦
  String? tooltip,                                        // 长按提示文字
  bool? enableFeedback,                                   // 是否启用反馈
  BoxConstraints? constraints,                            // 按钮约束
  Widget? icon,                                           // 图标组件（必填）
})

属性速查

属性	类型	默认值	说明
icon	Widget?	必填	图标组件
onPressed	VoidCallback?	必填	点击回调（null 则禁用）
iconSize	double?	24	图标大小
color	Color?	主题色	图标颜色
padding	EdgeInsetsGeometry	all(8)	按钮内边距
constraints	BoxConstraints?	null	按钮约束
tooltip	String?	null	长按提示文字
splashRadius	double?	null	水波纹半径
style	ButtonStyle?	null	按钮样式

快速示例

IconButton(
  icon: const Icon(Icons.favorite),
  color: Colors.red,
  iconSize: 32,
  onPressed: () {
    print('点击了收藏');
  },
  tooltip: '收藏',
)

图标按钮变体速查

构造方式	说明
IconButton(...)	标准图标按钮
IconButton.filled(...)	填充背景图标按钮
IconButton.outlined(...)	描边图标按钮
IconButton.tonal(...)	色调图标按钮
FilledIconButton(...)	Material 3 填充图标按钮

// 标准 IconButton
IconButton(icon: const Icon(Icons.search), onPressed: () {})

// Material 3 变体
IconButton.filled(onPressed: () {}, icon: const Icon(Icons.delete))
IconButton.outlined(onPressed: () {}, icon: const Icon(Icons.edit))
IconButton.tonal(onPressed: () {}, icon: const Icon(Icons.share))

自定义图标

使用图标字体

// 使用自定义图标字体中的图标
const Icon(
  IconData(0xe800, fontFamily: 'MyIconFont'),
  size: 24,
  color: Colors.blue,
)

在 pubspec.yaml 中声明

flutter:
  fonts:
    - family: MyIconFont
      fonts:
        - asset: fonts/MyIconFont.ttf

图标与文字组合

Row(
  mainAxisSize: MainAxisSize.min,
  children: const [
    Icon(Icons.star, color: Colors.amber, size: 16),
    SizedBox(width: 4),
    Text('4.5'),
  ],
)