如何在Flutter中实现参考图片所示的Widget组件

嘿，我看了你想要的Widget样式，这在Flutter里实现起来相当简单，我给你准备了一个可复用的组件方案，直接就能用，还能根据需求自定义～

这个Widget本质是一个带交互的圆角卡片，核心用到这些Flutter组件：

• InkWell：实现点击反馈（水波纹效果），提升交互体验
• Container：用来做带圆角、背景色和阴影的容器
• Column：垂直排列内部的图标和文字
• 预留可自定义参数，让组件适配不同场景

下面是封装好的CustomFeatureWidget，你可以直接复制到项目里：

import 'package:flutter/material.dart';

class CustomFeatureWidget extends StatelessWidget {
  final IconData icon;
  final String title;
  final Color? backgroundColor;
  final VoidCallback? onTap;

  const CustomFeatureWidget({
    super.key,
    required this.icon,
    required this.title,
    this.backgroundColor,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(16), // 匹配圆角样式
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
        decoration: BoxDecoration(
          color: backgroundColor ?? Colors.blue.shade50,
          borderRadius: BorderRadius.circular(16),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.shade200,
              blurRadius: 4,
              offset: const Offset(0, 2), // 轻微阴影提升层次感
            ),
          ],
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              size: 36,
              color: Colors.blue.shade700,
            ),
            const SizedBox(height: 12),
            Text(
              title,
              style: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w500,
                color: Colors.black87,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

// 用法示例：在页面中调用组件
class DemoScreen extends StatelessWidget {
  const DemoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Custom Widget Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: GridView.count(
          crossAxisCount: 2,
          crossAxisSpacing: 16,
          mainAxisSpacing: 16,
          children: [
            CustomFeatureWidget(
              icon: Icons.shopping_cart,
              title: '购物',
              onTap: () => print('购物模块被点击'),
            ),
            CustomFeatureWidget(
              icon: Icons.book,
              title: '阅读',
              backgroundColor: Colors.green.shade50,
              onTap: () => print('阅读模块被点击'),
            ),
            CustomFeatureWidget(
              icon: Icons.fitness_center,
              title: '健身',
              backgroundColor: Colors.orange.shade50,
            ),
            CustomFeatureWidget(
              icon: Icons.music_note,
              title: '音乐',
              backgroundColor: Colors.purple.shade50,
            ),
          ],
        ),
      ),
    );
  }
}

如果想要更贴合你的需求，可以做这些调整：

• 增加subtitle参数，支持显示副标题文字
• 开放iconColor、textStyle参数，自定义图标和文字样式
• 把Column换成Row，实现横向布局的样式
• 添加点击缩放动画，增强交互反馈
• 调整borderRadius和padding数值，匹配你想要的尺寸

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