Flutter自定义Card Widget中如何添加图标与文本并居中？

你的问题核心是Card组件没有设置child属性，导致你定义的FaIcon和title无法在Card内部渲染。之前把Card放到Column里的思路搞反了，正确的做法是让Card的child成为包含图标和文本的Column组件。

修改后的完整代码如下：

class CardWidget extends StatelessWidget {
  final String title;
  final Color color;
  final FaIcon icon;
  final Function()? onTap;
  const CardWidget(
      {super.key,
      required this.title,
      required this.color,
      this.onTap,
      required this.icon});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Card(
        elevation: 4,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(25.0),
        ),
        color: color,
        // 给Card添加child，用Column包裹图标和文本
        child: Padding(
          // 加内边距避免内容贴Card边缘
          padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
          child: Column(
            // 限制Column高度为内容所需，避免占满父组件
            mainAxisSize: MainAxisSize.min,
            // 让图标和文本垂直居中
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 渲染传入的图标
              icon,
              // 图标和文本之间加间距
              const SizedBox(height: 12),
              // 渲染标题文本
              Text(
                title,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键修改点说明： #

• 给Card添加了child属性，将图标和文本放在Card内部
• 用Padding包裹Column，避免内容紧贴Card的边缘
• Column设置mainAxisSize: MainAxisSize.min，让Column高度仅包裹内容，不会过度拉伸
• mainAxisAlignment: MainAxisAlignment.center确保图标和文本在Card内垂直居中
• 通过SizedBox给图标和文本之间添加间距，提升视觉效果

这样修改后，你传入的FaIcon会显示在标题文本上方，且都位于Card组件内部，点击事件也能正常触发。

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