基于 Harmony 6.0 应用的美食菜谱推荐与分享应用首页实现

前言

会做饭的人不一定会想菜单——下厨之前的"今天做什么"可能比下厨本身更让人犯愁。一款好的菜谱推荐应用要把"今日推荐 / 我收藏 / 智能搭配 / 食谱社区"四件事在一屏内全部铺到。Harmony 6.0 时代，菜谱类应用迎来了几个独特的能力红利——AI 助手让"用现有食材推荐菜"成为可能、CameraKit 让冰箱拍照识别食材、AVCodecKit 提供高清教学视频、超级终端让平板大屏看菜谱、HealthKit 记录每餐营养。本文用 Flutter 在 Harmony 6.0 上实现一个美食菜谱首页。

背景

美食类应用的视觉关键词是"温暖、食欲、丰富"——橙红色 #F97316 配奶油黄 #FEF3C7 是这类应用的合适主色——典型食欲色。本项目首页 5 个模块：渐变 Header（今日推荐 + 大开始下厨按钮）、4 大菜系分类、热门菜谱大卡片、AI 食材搭配、本周厨艺成长。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在美食类应用上的能力栈完整——AI 助手能力提供"现有食材推荐"、CameraKit + NeuralNetworkRuntime 让冰箱食材识别在端侧完成、AVCodecKit 提供高清菜谱视频、超级终端让平板大屏看清楚步骤、HealthKit 记录营养摄入、PushKit 提供"该做饭了"提醒。

开发核心代码

代码一：今日推荐 Header

Widget _header() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [_primary, Color(0xFFEA580C)],
        begin: Alignment.topLeft, end: Alignment.bottomRight),
      borderRadius: BorderRadius.circular(24),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Row(children: [
          Icon(Icons.restaurant, color: Colors.white, size: 22),
          SizedBox(width: 8),
          Text('美食家',
              style: TextStyle(color: Colors.white,
                  fontSize: 18, fontWeight: FontWeight.w800)),
          Spacer(),
          Icon(Icons.search, color: Colors.white, size: 22),
        ]),
        const SizedBox(height: 14),
        const Text('🍅 今晚做什么',
            style: TextStyle(color: Colors.white70, fontSize: 13)),
        const SizedBox(height: 4),
        const Text('番茄牛腩煲',
            style: TextStyle(color: Colors.white,
                fontSize: 28, fontWeight: FontWeight.w900)),
        const SizedBox(height: 6),
        const Text('25 分钟 · 简单 · 4 人份',
            style: TextStyle(color: Colors.white70, fontSize: 12)),
        const SizedBox(height: 14),
        Container(width: double.infinity, height: 50,
          decoration: BoxDecoration(color: Colors.white,
              borderRadius: BorderRadius.circular(25)),
          child: const Center(child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.play_arrow, color: _primary, size: 22),
              SizedBox(width: 6),
              Text('开始下厨',
                  style: TextStyle(color: _primary,
                      fontSize: 16, fontWeight: FontWeight.w800)),
            ],
          )),
        ),
      ],
    ),
  );
}

"开始下厨"通过 AVCodecKit 拉起教学视频 + AI 助手语音步骤引导。超级终端让用户从手机切到厨房的智慧屏，做饭时手不脏也能看清楚步骤。

从「今日推荐 Header」的厨房氛围与新手引导设计角度再补一段。家常菜类应用的 Header 必须传递「下厨这件事不难」的氛围。这段 Header 用主橙到玫红的渐变背景（食欲色），配合「今日推荐 · 西红柿炒蛋」+ 「30 分钟」+ 「立即开始」按钮的多段式排版。每天推荐一道菜降低用户选择疲劳。如果未来要扩展支持「按菜系切换」，可以加 chip 切换栏。

代码二：4 大菜系

Widget _categories() {
  final items = const [
    [Icons.local_fire_department, '川菜', _red],
    [Icons.water_drop, '粤菜', _green],
    [Icons.spa, '湘菜', _accent],
    [Icons.icecream, '甜点', _pink],
  ];
  return Container(padding: const EdgeInsets.all(14),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(16)),
    child: Row(children: items.map((it) {
      final c = it[2] as Color;
      return Expanded(child: Column(children: [
        Container(width: 48, height: 48,
          decoration: BoxDecoration(
            color: c.withValues(alpha: 0.14),
            borderRadius: BorderRadius.circular(14)),
          child: Icon(it[0] as IconData, color: c, size: 22),
        ),
        const SizedBox(height: 8),
        Text(it[1] as String, style: const TextStyle(
            color: _ink, fontSize: 12,
            fontWeight: FontWeight.w600)),
      ]));
    }).toList()),
  );
}

4 大菜系（川、粤、湘、鲁）覆盖了中国主要饮食文化。每个菜系用对应主题色识别（川红、粤绿、湘橙、鲁黄）。

从「4 大菜系」的中国饮食文化分类设计角度再补一段。中国菜系数量繁多（八大菜系 + 各地小吃），4 大菜系刚好覆盖最常见的家庭烹饪场景。每个菜系下的菜品有独特调味传统——川菜辣、粤菜清淡、湘菜咸辣、鲁菜咸鲜。用户按菜系筛选能快速找到符合口味的菜。如果未来要扩展支持「八大菜系」或地方特色（如东北菜、西北菜），可以扩展到 8 宫格。

代码三：AI 食材搭配

Widget _aiMatch() {
  return Container(padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(
      gradient: LinearGradient(colors: [
        _primary.withValues(alpha: 0.12),
        _amber.withValues(alpha: 0.12),
      ]),
      borderRadius: BorderRadius.circular(16)),
    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      const Row(children: [
        Icon(Icons.auto_awesome, color: _primary, size: 20),
        SizedBox(width: 6),
        Text('AI 智能搭配',
            style: TextStyle(color: _ink, fontSize: 14,
                fontWeight: FontWeight.w800)),
      ]),
      const SizedBox(height: 10),
      const Text('拍冰箱·智能推荐能做的菜',
          style: TextStyle(color: _ink, fontSize: 13)),
      const SizedBox(height: 12),
      Container(width: double.infinity, height: 50,
        decoration: BoxDecoration(color: _primary,
            borderRadius: BorderRadius.circular(25)),
        child: const Center(child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.camera_alt, color: Colors.white, size: 22),
            SizedBox(width: 6),
            Text('拍照识别食材',
                style: TextStyle(color: Colors.white,
                    fontSize: 14, fontWeight: FontWeight.w800)),
          ],
        )),
      ),
    ]),
  );
}

拍照识别通过 CameraKit + NeuralNetworkRuntime 在端侧完成——拍冰箱内部，识别出"鸡蛋、番茄、牛肉"等食材，AI 助手能力推荐"番茄炒蛋""番茄牛腩煲"等可做菜品。

从「AI 食材搭配」的智能厨房助手与食材利用最大化设计角度再补一段。AI 食材搭配是家常菜应用的核心创新——用户不再需要"先想做什么菜再去买菜"，而是"看冰箱有什么 AI 推荐做什么"。这段卡片把识别出的食材列出 + AI 推荐的菜品横滑展示，让用户一眼选择。如果未来要扩展支持「按饮食限制筛选」（低盐、低糖、糖尿病饮食），可以接入 NeuralNetworkRuntime 端侧个性化推荐。鸿蒙 6.0 的 CameraKit + 端侧 AI 让"看冰箱做菜"成为现实。

心得

美食类 App 的视觉灵魂是"温暖 + 食欲"——橙红色给食欲感，emoji 食材给亲切感。开发时最容易犯的错是把菜谱做得过于复杂（每道菜列十几个步骤），反而让用户嫌麻烦。我的策略是把"开始下厨"做成最显眼按钮 + 步骤交给视频。从能力扩展角度，美食应用最值得在鸿蒙端打造的是"AI 助手食材搭配 + CameraKit 冰箱识别 + 超级终端厨房大屏 + AVCodecKit 教学视频"四件套。

总结

本篇实现了 Harmony 6.0 端的美食菜谱首页，5 个模块、纯 UI、零依赖、约 320 行代码。从扩展角度建议生产业务里：把食材识别接入 NeuralNetworkRuntime；把推荐接入 AI 助手；把视频接入 AVCodecKit；把厨房大屏接入超级终端；把"今日推荐"做成 FormExtensionAbility 桌面卡片。