工具中心是猫咪管家的一个重要模块，集合了各种实用工具，包括记账管理、日程管理、计算工具、健康助手、知识百科等。今天来实现这个功能入口页面。

一、页面整体结构

工具中心不需要状态管理，用 StatelessWidget：

class ToolsTab extends StatelessWidget {
  const ToolsTab({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('实用工具'),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.w),

标题简洁明了，用户一眼就知道这是工具页面。
SingleChildScrollView 支持内容超出屏幕时滚动。

页面内容分组展示：

child: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    _buildSection(
      '记账管理',
      [
        _ToolItem(...),
        _ToolItem(...),
      ],
    ),
    SizedBox(height: 20.h),
    _buildSection(
      '日程管理',
      [...],
    ),

工具按功能分组，每组有标题和工具列表。
组与组之间用 SizedBox 留出间距。

二、记账管理分组

支出记录和统计：

_buildSection(
  '记账管理',
  [
    _ToolItem(
      icon: Icons.account_balance_wallet,
      title: '支出记录',
      subtitle: '记录养猫花费',
      color: Colors.green,
      onTap: () => Navigator.push(context, MaterialPageRoute(
        builder: (_) => const ExpenseListScreen(),
      )),
    ),
    _ToolItem(
      icon: Icons.pie_chart,
      title: '支出统计',
      subtitle: '分析消费情况',
      color: Colors.blue,
      onTap: () => Navigator.push(context, MaterialPageRoute(
        builder: (_) => const ExpenseStatisticsScreen(),
      )),
    ),
  ],
),

支出记录用钱包图标，绿色代表金钱。
支出统计用饼图图标，蓝色代表数据分析。

三、日程管理分组

日历视图：

_buildSection(
  '日程管理',
  [
    _ToolItem(
      icon: Icons.calendar_month,
      title: '日历视图',
      subtitle: '查看所有事件',
      color: Colors.purple,
      onTap: () => Navigator.push(context, MaterialPageRoute(
        builder: (_) => const CalendarScreen(),
      )),
    ),
  ],
),

日历用紫色，和其他分组的颜色区分开。
副标题说明功能用途。

四、计算工具分组

年龄和喂食计算器：

_buildSection(
  '计算工具',
  [
    _ToolItem(
      icon: Icons.cake,
      title: '年龄计算器',
      subtitle: '猫咪年龄换算',
      color: Colors.orange,
      onTap: () => Navigator.push(context, MaterialPageRoute(
        builder: (_) => const AgeCalculatorScreen(),
      )),
    ),
    _ToolItem(
      icon: Icons.restaurant,
      title: '喂食计算器',
      subtitle: '计算每日食量',
      color: Colors.teal,
      onTap: () => Navigator.push(context, MaterialPageRoute(
        builder: (_) => const FoodCalculatorScreen(),
      )),
    ),
  ],
),

年龄计算器用蛋糕图标，橙色是 App 主题色。
喂食计算器用餐具图标，青色代表健康饮食。

五、健康助手分组

急救指南：

_buildSection(
  '健康助手',
  [
    _ToolItem(
      icon: Icons.emergency,
      title: '急救指南',
      subtitle: '紧急情况处理',
      color: Colors.redAccent,
      onTap: () => Navigator.push(context, MaterialPageRoute(
        builder: (_) => const EmergencyGuideScreen(),
      )),
    ),
  ],
),

急救用红色，强调紧急和重要。
emergency 图标是感叹号，很醒目。

六、知识百科分组

品种图鉴：

_buildSection(
  '知识百科',
  [
    _ToolItem(
      icon: Icons.pets,
      title: '品种图鉴',
      subtitle: '了解猫咪品种',
      color: Colors.indigo,
      onTap: () => Navigator.push(context, MaterialPageRoute(
        builder: (_) => const BreedGuideScreen(),
      )),
    ),
  ],
),

品种图鉴用爪印图标，靛蓝色代表知识。
副标题说明可以了解不同品种的特点。

七、分组构建方法

通用的分组组件：

Widget _buildSection(String title, List<_ToolItem> items) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        title,
        style: TextStyle(
          fontSize: 16.sp,
          fontWeight: FontWeight.bold,
          color: Colors.grey[800],
        ),
      ),
      SizedBox(height: 12.h),
      ...items.map((item) => _buildToolCard(item)),
    ],
  );
}

标题加粗显示，和工具卡片区分开。
用展开运算符把工具项列表展开。

标题样式：

16 号字加粗，深灰色。
不用纯黑，视觉上更柔和。

八、工具卡片组件

卡片布局：

Widget _buildToolCard(_ToolItem item) {
  return Card(
    margin: EdgeInsets.only(bottom: 8.h),
    child: ListTile(
      leading: Container(
        padding: EdgeInsets.all(10.w),
        decoration: BoxDecoration(
          color: item.color.withOpacity(0.1),
          borderRadius: BorderRadius.circular(10.r),
        ),
        child: Icon(item.icon, color: item.color, size: 24.sp),
      ),

图标放在带背景色的容器里，更突出。
背景色是主色的 10% 透明度。

标题和副标题：

title: Text(
  item.title,
  style: TextStyle(fontWeight: FontWeight.w500, fontSize: 15.sp),
),
subtitle: Text(
  item.subtitle,
  style: TextStyle(fontSize: 12.sp, color: Colors.grey[600]),
),

标题用中等字重，比正常稍粗。
副标题用小字号灰色，补充说明。

右箭头：

trailing: Icon(Icons.chevron_right, color: Colors.grey[400]),
onTap: item.onTap,

箭头暗示可以点击跳转。
灰色不抢视觉，但能起到引导作用。

九、工具项数据类

定义数据结构：

class _ToolItem {
  final IconData icon;
  final String title;
  final String subtitle;
  final Color color;
  final VoidCallback onTap;

  _ToolItem({
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.color,
    required this.onTap,
  });
}

私有类只在当前文件使用。
包含图标、标题、副标题、颜色、点击回调。

为什么用类：

类有类型检查，IDE 能自动补全。
比 Map 更安全，不会写错 key。

十、颜色的选择

每个分组用不同颜色：

// 记账管理
Colors.green   // 支出记录
Colors.blue    // 支出统计

// 日程管理
Colors.purple  // 日历视图

// 计算工具
Colors.orange  // 年龄计算器
Colors.teal    // 喂食计算器

// 健康助手
Colors.redAccent  // 急救指南

// 知识百科
Colors.indigo  // 品种图鉴

颜色选择有一定的语义关联。
同一分组内的颜色也不重复。

十一、图标的选择

图标要和功能匹配：

Icons.account_balance_wallet  // 支出记录 - 钱包
Icons.pie_chart               // 支出统计 - 饼图
Icons.calendar_month          // 日历视图 - 日历
Icons.cake                    // 年龄计算器 - 蛋糕
Icons.restaurant              // 喂食计算器 - 餐具
Icons.emergency               // 急救指南 - 紧急
Icons.pets                    // 品种图鉴 - 爪印

用户看图标就能大概知道是什么功能。
Material Icons 库很丰富，基本都能找到合适的。

十二、间距的处理

分组之间：

SizedBox(height: 20.h),

分组之间用 20 的间距，明显区分。
比卡片之间的 8 要大。

卡片之间：

Card(
  margin: EdgeInsets.only(bottom: 8.h),

卡片底部留 8 的间距。
同一分组内的卡片紧凑一些。

十三、页面底部留白

最后一个分组后：

SizedBox(height: 20.h),

底部留一些空白，滚动到底时不会太挤。
这是个小细节，但能提升体验。

十四、导航跳转

点击跳转到对应页面：

onTap: () => Navigator.push(context, MaterialPageRoute(
  builder: (_) => const ExpenseListScreen(),
)),

Navigator.push 跳转到新页面。
MaterialPageRoute 是 Material 风格的页面切换动画。

为什么用 const：

如果页面构造函数是 const，实例可以复用。
能减少内存分配，提升性能。

十五、扩展性考虑

添加新工具：

只需要在对应分组的列表里添加新的 _ToolItem。
或者新建一个分组。

代码结构清晰：

分组和工具项分离，修改方便。
新增功能不影响现有代码。

小结

工具中心是一个功能入口页面，把各种工具按类别分组展示。每个工具用不同颜色的图标，视觉上容易区分。代码上用私有类封装工具项数据，用通用方法构建分组，结构清晰易维护。这种设计模式在很多 App 的"更多"或"工具"页面都能看到。

---

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