功能卡片是首页快速功能区的核心组件。在我们的文件转换助手应用中，首页需要展示6个快速功能入口，这些入口都是通过功能卡片组件来实现的。每个卡片展示了一个功能的图标、标题和副标题，用户可以点击卡片来快速访问相应的功能。这个组件的设计简洁但功能完整，可以在应用的多个地方复用。

功能卡片的基础结构

功能卡片是一个StatelessWidget，它接收四个必需的参数。让我们先看看这个组件的定义：

class FeatureCard extends StatelessWidget {
  final IconData icon;
  final String title;
  final String subtitle;
  final VoidCallback onTap;

  const FeatureCard({
    Key? key,
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.onTap,
  }) : super(key: key);

这里定义了四个参数：icon 是Material Design中的图标数据，用来显示功能的视觉标识。title 是功能的名称，比如"图片转换"。subtitle 是功能的简短描述，比如"快速转换"。onTap 是用户点击卡片时的回调函数，用来处理点击事件。

卡片的完整布局实现

功能卡片的核心是使用GestureDetector来处理点击事件，Card组件提供了卡片的基础样式。让我们看看完整的build方法：

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: onTap,
    child: Card(
      elevation: 2,
      child: Padding(
        padding: EdgeInsets.all(12.w),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, size: 40.sp, color: Colors.blue),
            SizedBox(height: 8.h),
            Text(
              title,
              style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 4.h),
            Text(
              subtitle,
              style: TextStyle(fontSize: 12.sp, color: Colors.grey),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    ),
  );
}

这个布局的设计思路是：GestureDetector 包裹整个卡片，用来捕获用户的点击事件。Card 组件提供了卡片的基础样式，包括圆角和阴影效果。elevation: 2 设置了卡片的阴影深度，使卡片看起来有立体感。Padding 为卡片内容添加了统一的内边距，确保内容不会贴着卡片边缘。Column 用来垂直排列图标、标题和副标题。

图标的显示和样式

图标是卡片的视觉焦点，我们使用Icon组件来显示Material Design图标：

Icon(icon, size: 40.sp, color: Colors.blue),

这里的关键点是：size: 40.sp 使用flutter_screenutil的适配单位，确保在不同尺寸的设备上都有合适的大小。color: Colors.blue 使用蓝色作为图标颜色，与应用的主题色保持一致。Icon组件是Flutter中显示Material Design图标的标准方式。

文本内容的排列和样式

标题和副标题使用Text组件显示，它们有不同的样式来区分重要程度：

Text(
  title,
  style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.bold),
  textAlign: TextAlign.center,
),
SizedBox(height: 4.h),
Text(
  subtitle,
  style: TextStyle(fontSize: 12.sp, color: Colors.grey),
  textAlign: TextAlign.center,
),

文本样式的设计考虑了以下几点：标题字体大小 14.sp，副标题字体大小 12.sp，形成了清晰的视觉层级。fontWeight: FontWeight.bold 使标题看起来更加突出和重要。color: Colors.grey 使副标题看起来不那么突出，形成了视觉对比。textAlign: TextAlign.center 使文本居中对齐，与卡片的整体设计保持一致。SizedBox(height: 4.h) 在标题和副标题之间添加了适当的间距。

屏幕适配的重要性

功能卡片使用flutter_screenutil提供的适配单位来确保在不同尺寸的设备上都能有一致的显示效果：

Icon(icon, size: 40.sp, color: Colors.blue),
Text(
  title,
  style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.bold),
  textAlign: TextAlign.center,
),

这里的 40.sp 和 14.sp 都是使用flutter_screenutil的适配单位。这个库会根据设备的屏幕尺寸自动调整这些值，确保在小屏幕设备上不会太大，在大屏幕设备上也不会太小。这对于支持多种设备尺寸的应用非常重要，特别是在鸿蒙生态中，设备尺寸差异较大。

在首页中的实际使用

功能卡片在首页中被使用。首页使用GridView来展示6个功能卡片，形成了一个2列的网格布局：

GridView.count(
  crossAxisCount: 2,
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(),
  mainAxisSpacing: 12.h,
  crossAxisSpacing: 12.w,
  children: [
    FeatureCard(
      icon: Icons.image,
      title: '图片转换',
      subtitle: '快速转换',
      onTap: () {},
    ),
    FeatureCard(
      icon: Icons.description,
      title: '文档转换',
      subtitle: '快速转换',
      onTap: () {},
    ),
    FeatureCard(
      icon: Icons.audio_file,
      title: '音频转换',
      subtitle: '快速转换',
      onTap: () {},
    ),
    FeatureCard(
      icon: Icons.video_file,
      title: '视频转换',
      subtitle: '快速转换',
      onTap: () {},
    ),
    FeatureCard(
      icon: Icons.qr_code_2,
      title: '二维码',
      subtitle: '快速生成',
      onTap: () {},
    ),
    FeatureCard(
      icon: Icons.calculate,
      title: '计算器',
      subtitle: '快速计算',
      onTap: () {},
    ),
  ],
)

GridView的配置说明：crossAxisCount: 2 表示每行显示2个卡片，这样可以充分利用屏幕宽度。shrinkWrap: true 让GridView只占用必要的高度，不会填满整个屏幕。physics: const NeverScrollableScrollPhysics() 禁用了GridView自身的滚动，因为整个首页已经由ListView处理滚动。mainAxisSpacing: 12.h 和 crossAxisSpacing: 12.w 分别设置了卡片之间的垂直和水平间距。

组件的可复用性和扩展性

功能卡片是一个高度可复用的组件。它可以用来展示任何功能，只需要传入不同的参数即可。这样的设计有以下优势：参数化设计 通过改变icon、title、subtitle和onTap参数，可以快速创建不同的卡片。独立性强 卡片组件不依赖于具体的业务逻辑，可以在应用的任何地方使用。易于维护 如果需要修改卡片的样式，只需要修改FeatureCard组件，所有使用这个组件的地方都会自动更新。

点击事件的处理

当用户点击卡片时，GestureDetector会捕获这个事件并调用onTap回调。在首页中，我们可以这样处理点击事件：

FeatureCard(
  icon: Icons.image,
  title: '图片转换',
  subtitle: '快速转换',
  onTap: () {
    // 处理点击事件，比如导航到图片转换页面
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const ConvertPage()),
    );
  },
),

这样的设计使得卡片组件完全独立于具体的业务逻辑，提高了代码的复用性。

卡片的样式定制

功能卡片的样式可以通过修改Card和Icon的属性来定制。例如，可以修改Card的elevation属性来改变阴影深度，可以修改Icon的color属性来改变图标颜色。这样的设计使得组件具有很好的可定制性。

总结

功能卡片是一个简单但功能完整的组件。通过使用GestureDetector、Card和Column等基础组件的组合，我们创建了一个美观且易于使用的功能卡片。这个组件展示了如何在Flutter中设计可复用的UI组件，它不仅提供了良好的用户体验，还提高了代码的可维护性和可扩展性。在实际开发中，这样的组件设计模式可以大大提高开发效率。

---

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