如何在Flutter中创建圆形图标按钮及类FloatingActionButton组件？

嘿，我来帮你搞定这两个Flutter组件的问题！

其实有好几种灵活的实现方式，你可以根据需求的样式（实心、空心、带阴影等）来选：

1. 带纯色背景的基础圆形图标按钮 #

如果需要一个简单的带背景色圆形按钮，用Container包裹IconButton是最直接的方案：

Container(
  width: 52,
  height: 52,
  decoration: const BoxDecoration(
    color: Colors.blueAccent,
    shape: BoxShape.circle,
  ),
  child: IconButton(
    icon: const Icon(Icons.add, color: Colors.white),
    iconSize: 28,
    onPressed: () {
      // 这里编写你的点击逻辑
      print('圆形按钮被触发啦');
    },
  ),
)

2. 带阴影质感的圆形图标按钮 #

想要类似Material风格的阴影和按压反馈？用ElevatedButton配合CircleBorder更省心：

ElevatedButton(
  onPressed: () {
    // 点击事件逻辑
  },
  style: ElevatedButton.styleFrom(
    shape: const CircleBorder(),
    padding: const EdgeInsets.all(16),
    backgroundColor: Colors.pink,
    elevation: 4, // 控制阴影的深浅大小
  ),
  child: const Icon(Icons.favorite, color: Colors.white, size: 28),
)

3. 空心圆形图标按钮 #

如果需要空心边框的样式，直接用OutlinedButton就能实现：

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    shape: const CircleBorder(),
    padding: const EdgeInsets.all(16),
    side: const BorderSide(color: Colors.green, width: 2),
  ),
  child: const Icon(Icons.share, color: Colors.green, size: 28),
)

Flutter自带的FloatingActionButton本身就支持大量自定义，但如果想要完全定制或者实现类似效果，有两种思路：

1. 直接自定义原生FAB #

不用从零造轮子，原生FAB可以通过属性调整成你想要的样子：

• 迷你尺寸的FAB：

FloatingActionButton(
  onPressed: () {},
  backgroundColor: Colors.orange,
  mini: true, // 开启迷你模式
  child: const Icon(Icons.edit),
)

• 带文字的扩展型FAB：

FloatingActionButton.extended(
  onPressed: () {},
  icon: const Icon(Icons.send),
  label: const Text('发送消息'),
  backgroundColor: Colors.teal,
)

2. 完全自定义类似FAB的组件 #

如果需要更个性化的样式（比如渐变背景、特殊阴影），可以用InkWell+Container实现，还能保留Material的水波纹反馈：

InkWell(
  borderRadius: BorderRadius.circular(32), // 圆角大小，接近圆形
  onTap: () {
    // 点击逻辑
  },
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [Colors.deepPurple, Colors.purpleAccent],
      ),
      borderRadius: BorderRadius.circular(32),
      boxShadow: const [
        BoxShadow(
          color: Colors.black26,
          blurRadius: 8,
          offset: Offset(0, 3),
        ),
      ],
    ),
    child: const Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.add_circle, color: Colors.white),
        SizedBox(width: 8),
        Text('新建项目', style: TextStyle(color: Colors.white, fontSize: 16)),
      ],
    ),
  ),
)

这些方法覆盖了大部分常见场景，你可以根据自己的UI需求来选择合适的实现方式～

内容的提问来源于stack exchange，提问作者Edmand Looi