案例概述

IconButton 是一个只显示图标的按钮。它常用于工具栏、AppBar 等位置。本案例展示了如何创建各种样式的图标按钮。

核心概念

1. IconButton 基础

IconButton 是一个简单的图标按钮，没有文本。

2. 图标库

Flutter 提供了丰富的图标库。

3. 样式自定义

可以自定义图标按钮的颜色、大小等。

代码详解

示例 1：基础图标按钮

class BasicIconButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.favorite),
      onPressed: () {},
    );
  }
}

代码解释： 这是最基础的图标按钮。通过 icon 参数设置图标。

示例 2：自定义颜色

class ColoredIconButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.favorite),
      color: Colors.red,
      onPressed: () {},
    );
  }
}

代码解释： 这个示例展示了自定义颜色的图标按钮。

示例 3：自定义大小

class SizedIconButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.favorite),
      iconSize: 32,
      onPressed: () {},
    );
  }
}

代码解释： 这个示例展示了自定义大小的图标按钮。

示例 4：禁用图标按钮

class DisabledIconButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.favorite),
      onPressed: null,
    );
  }
}

代码解释： 这个示例展示了禁用的图标按钮。设置 onPressed 为 null。

示例 5：带背景的图标按钮

class BackgroundIconButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue.shade100,
      ),
      child: IconButton(
        icon: const Icon(Icons.favorite),
        color: Colors.blue,
        onPressed: () {},
      ),
    );
  }
}

代码解释： 这个示例展示了带背景的图标按钮。通过 Container 添加背景。

高级话题

1. 动态/响应式设计

根据屏幕大小调整图标按钮。

2. 动画与过渡

自定义图标按钮动画。

3. 搜索/过滤/排序

图标按钮可以触发搜索。

4. 选择与批量操作

支持批量操作。

5. 加载与缓存

显示加载状态。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义样式。

9. 数据持久化/导出

保存状态。

10. 单元测试与集成测试

测试功能。

PC 端适配要点

• 根据屏幕大小调整图标按钮大小
• 支持键盘快捷键
• 提供清晰的操作指示

实际应用场景

• 工具栏：显示工具按钮
• AppBar：显示操作按钮
• 列表项：显示操作按钮
• 快速操作：快速执行操作

扩展建议

• 学习高级图标库
• 研究性能优化
• 探索自定义动画
• 集成快捷键库

总结

图标按钮是简洁的用户交互方式。通过灵活使用 IconButton，可以创建各种图标按钮效果。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net