工具卡片组件是工具页面中展示各个工具的核心组件。它使用Card和Column来显示工具的图标和标题，提供了一个简洁而美观的界面。工具卡片组件的设计与功能卡片组件类似，但专门为工具页面的网格布局优化。

工具卡片组件的基础结构

工具卡片组件是一个StatelessWidget，它接收三个参数：图标、标题和点击回调。这样的设计使得组件高度可复用。

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

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

这个组件定义了三个参数。icon 是Material Design中的图标数据，用来显示工具的视觉标识。title 是工具的名称，比如"二维码生成"。onTap 是用户点击组件时的回调函数，用来处理点击事件。

组件的完整实现

工具卡片组件的核心是使用GestureDetector来处理点击事件，Card提供了卡片的基础样式。

@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,
            ),
          ],
        ),
      ),
    ),
  );
}

这个实现的设计思路很清晰。GestureDetector 用来处理点击事件。当用户点击卡片时，onTap回调会被触发。Card 组件为内容提供了卡片的基础样式，包括圆角和阴影效果。elevation: 2 设置了卡片的阴影深度，使卡片看起来有立体感。

Padding 为卡片内容添加了内边距。Column 用来垂直排列图标和标题。mainAxisAlignment: MainAxisAlignment.center 使内容居中对齐，这对于网格布局中的卡片非常重要。

图标的显示和样式

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

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

这里的关键点是：size: 40.sp 使用flutter_screenutil的适配单位，确保在不同尺寸的设备上都有合适的大小。color: Colors.blue 使用蓝色作为图标颜色，与应用的主题色保持一致。这样的设计提供了良好的视觉统一性。

标题的显示和样式

标题使用Text组件显示。我们使用粗体字体和居中对齐来突出标题。

Text(
  title,
  style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.bold),
  textAlign: TextAlign.center,
),

fontSize: 14.sp 设置了标题的字体大小。fontWeight: FontWeight.bold 使标题看起来更加突出和重要。textAlign: TextAlign.center 使文本居中对齐。这样的设计使用户能够快速识别工具。

卡片的样式和布局

Card组件提供了卡片的基础样式。Padding为卡片内容添加了内边距。

Card(
  elevation: 2,
  child: Padding(
    padding: EdgeInsets.all(12.w),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 卡片内容
      ],
    ),
  ),
)

elevation: 2 设置了卡片的阴影深度。这个值不会太大，使卡片看起来有适度的立体感。padding: EdgeInsets.all(12.w) 为卡片内容添加了统一的内边距，确保内容不会贴着卡片边缘。

点击事件的处理

GestureDetector的onTap属性绑定了点击事件。当用户点击卡片时，onTap回调会被触发。

GestureDetector(
  onTap: onTap,
  child: Card(
    // 卡片内容
  ),
)

这个回调通常会打开一个对话框，让用户使用相应的工具。通过将onTap作为参数传入，我们使得组件完全独立于具体的业务逻辑，提高了代码的复用性。

在工具页面中的使用

工具卡片组件在工具页面中被使用。工具页面使用GridView来展示所有工具卡片。

children: tools.map((tool) {
  return ToolCard(
    icon: tool['icon'] as IconData,
    title: tool['title'] as String,
    onTap: () => _showToolDetail(context, tool['title'] as String),
  );
}).toList(),

map 函数将工具列表中的每个元素转换为一个ToolCard。as 操作符用来进行类型转换，确保从Map中取出的值具有正确的类型。toList() 将Iterable转换为List，这是GridView所需的。

这样的设计使得添加新工具变得非常简单。只需要在tools列表中添加新的Map，GridView会自动创建对应的ToolCard。

组件的可复用性

工具卡片组件是一个高度可复用的组件。它可以用来展示任何工具，只需要传入不同的icon、title和onTap即可。这样的设计有以下优势。

首先，参数化设计 使得组件非常灵活。其次，独立性强 使得组件可以在应用的任何地方使用。最后，易于维护 使得如果需要修改工具卡片的样式，只需要修改ToolCard组件，所有使用这个组件的地方都会自动更新。

组件的样式定制

工具卡片组件的样式可以通过修改Card和Icon的属性来定制。例如，可以修改Card的elevation属性来改变阴影深度，可以修改Icon的color属性来改变图标颜色。

Card(
  elevation: 3,  // 可以修改这个值来改变阴影深度
  child: Padding(
    padding: EdgeInsets.all(16.w),  // 可以修改这个值来改变内边距
    child: Column(
      // ...
    ),
  ),
)

这样的设计使得组件具有很好的可定制性，可以根据不同的需求进行调整。

与FeatureCard的对比

工具卡片组件与功能卡片组件（FeatureCard）有相似之处，但也有重要的区别。FeatureCard包含了subtitle（副标题），而ToolCard只包含title（标题）。这样的设计使得ToolCard更加简洁，适合在工具页面的网格布局中使用。

总结

工具卡片组件是一个简单但功能完整的组件。通过使用GestureDetector、Card和Column，我们创建了一个美观且易于使用的工具卡片。这个组件展示了如何在Flutter中设计可复用的UI组件。它不仅提供了良好的用户体验，还提高了代码的可维护性和可扩展性。

---

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