基于 Harmony 6.0 应用的情侣纪念日记录应用首页实现

前言

恋爱中的小情绪、纪念日、共同的成长印记，是一对情侣最珍贵的资产。一款好用的情侣纪念日 App 要把"在一起多少天 / 下个纪念日是什么 / 我们一起去过哪些地方 / 我们一起做过哪些事"这四件事在一屏内全部呈现。Harmony 6.0 时代，情侣类应用迎来了几个独特的能力红利——分布式数据让两个人的设备实时同步爱情数据、超级终端让两人能在不同设备上看到同一个时间轴、HMS Push 让纪念日提醒精准触达、HealthKit 甚至能联动两人的运动数据展示"我们一起跑了多少公里"。本文用 Flutter 在 Harmony 6.0 上实现一个情侣纪念日首页，作为本系列第七组的收官。

背景

情侣类应用的视觉关键词是"甜、暖、私密"——甜对应"色彩偏粉",暖对应"圆角和大留白",私密对应"两人世界感"。粉色 #EC4899 配橙色 #FB923C 是这类应用的典型主色——既有"甜"又有"暖"，与情侣场景契合。本项目首页 5 个模块：渐变 Header（在一起 X 天 + 大爱心 + 下个纪念日倒计时）、4 大功能入口（一起记录 / 我们的足迹 / 共同心愿 / 纪念日）、最近回忆时间轴、共同成长数据、给 TA 留言入口。从产品角度，情侣类应用的最大复购点是"日复一日的小积累"——每天一句留言、每周一次合影、每月一个纪念，慢慢沉淀成两人的共同档案。鸿蒙 6.0 上做这种"长期沉淀"的最佳实践是分布式数据 + 桌面服务卡片——两人的所有数据通过分布式数据对象同步、关键纪念日和"在一起 X 天"通过桌面卡片每天可见。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在情侣类应用上的能力栈非常完整——分布式数据对象提供两人设备实时同步、PushKit 提供纪念日精准提醒、HealthKit 提供运动数据联动、WalletKit 让两人的旅行凭证电子化、超级终端让两人在不同设备看到同一份数据。Flutter 嵌入 Harmony 6.0 的方案在这种"轻互动、长沉淀"应用上非常合适——主页用 Flutter 自绘提供丰富视觉，分布式数据通过 ArkTS 端 distributedDataObject 接入。Skia 引擎对粉橙色（#EC4899 / #FB923C / #F472B6）的渲染非常细腻，OLED 屏下色彩柔和不刺眼，配合圆角和大量白色留白，整页氛围既甜又暖。

开发核心代码

代码一：在一起 X 天 Header

Header 是这种 App 的灵魂——必须把"在一起的天数"做成视觉中心。我用一个粉橙渐变 Container，中间一个超大字号的天数（如 365）+ “天”，下方是开始日期和下一个纪念日倒计时。

Widget _header() {
  return Container(
    padding: const EdgeInsets.all(22),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [_pink, _orange],
        begin: Alignment.topLeft, end: Alignment.bottomRight),
      borderRadius: BorderRadius.circular(24),
    ),
    child: Column(children: [
      const Row(children: [
        Icon(Icons.favorite, color: Colors.white, size: 22),
        SizedBox(width: 8),
        Text('我们的故事',
            style: TextStyle(color: Colors.white,
                fontSize: 16, fontWeight: FontWeight.w800)),
        Spacer(),
        Icon(Icons.share, color: Colors.white, size: 22),
      ]),
      const SizedBox(height: 14),
      const Text('在一起',
          style: TextStyle(color: Colors.white70, fontSize: 14)),
      const SizedBox(height: 6),
      const Row(crossAxisAlignment: CrossAxisAlignment.end,
          children: [
        Text('365',
            style: TextStyle(color: Colors.white,
                fontSize: 64, fontWeight: FontWeight.w900)),
        SizedBox(width: 8),
        Padding(padding: EdgeInsets.only(bottom: 12),
          child: Text('天',
              style: TextStyle(color: Colors.white,
                  fontSize: 22, fontWeight: FontWeight.w700))),
      ]),
      const SizedBox(height: 8),
      Container(padding: const EdgeInsets.symmetric(
          horizontal: 12, vertical: 6),
        decoration: BoxDecoration(
          color: Colors.white.withValues(alpha: 0.22),
          borderRadius: BorderRadius.circular(20)),
        child: const Row(children: [
          Icon(Icons.cake, color: Colors.white, size: 14),
          SizedBox(width: 4),
          Text('距 1 周年纪念日 还有 12 天',
              style: TextStyle(color: Colors.white,
                  fontSize: 12, fontWeight: FontWeight.w700)),
        ]),
      ),
    ]),
  );
}

“在一起 365 天"这种数据是这类 App 的灵魂——可以做成桌面服务卡片让用户每天解锁手机就看到"今天是第几天”，每天微弱的积极反馈对维持感情新鲜感非常有效。这种端外曝光是 Harmony 6.0 服务卡片能力的最佳应用场景。

从「在一起 X 天 Header」的情感化设计与仪式感营造角度再补一段。情侣纪念应用的 Header 必须传递「我们的故事」氛围。这段 Header 用粉红到玫红的渐变背景，配合「在一起 365 天」大字号 + 双方头像 + 「记录我们的每一天」slogan 的三段式排版，让用户在打开应用的第一秒就被「带入」浪漫情绪。两个头像左右并排显示，中间用一颗小小的心形图标连接，是情侣 App 的经典视觉范式。「365 天」用 36 号粗体白字，是整页最大的数字，强调「我们已经一起这么久」的仪式感。如果未来要加入「下一个纪念日倒计时」（比如生日、纪念日还有多少天），可以在 Header 下方加一行 chip 显示，鸿蒙 6.0 端的日期计算与 Dart 的 DateTime 完全等价。

代码二：4 大功能入口

情侣 App 的 4 个高频入口：一起记录、我们的足迹、共同心愿、纪念日。每个用一个粉色系的彩色图标做区分。

Widget _entries() {
  final items = const [
    [Icons.edit_note, '一起记录', _pink],
    [Icons.place, '我们的足迹', _orange],
    [Icons.star, '共同心愿', _amber],
    [Icons.event, '纪念日', _purple],
  ];
  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.16),
            borderRadius: BorderRadius.circular(14)),
          child: Icon(it[0] as IconData, color: c, size: 24),
        ),
        const SizedBox(height: 8),
        Text(it[1] as String, style: const TextStyle(
            color: _ink, fontSize: 12,
            fontWeight: FontWeight.w600)),
      ]));
    }).toList()),
  );
}

"我们的足迹"在生产业务里可以接入 LocationKit 自动记录两人共同到访过的地点，并用 MapKit 在地图上以热力图形式可视化。这种"自动记录 + 可视化呈现"是 Harmony 6.0 端独有的体验红利。

从「4 大功能入口」的情感化产品矩阵设计角度再补一段。情侣纪念类应用的 4 大入口是「纪念日 / 我们的相册 / 共同记账 / 心情日记」，覆盖了「时间、空间、物质、情绪」四种情侣关系的核心维度。每个入口用粉色系不同色相做识别——主粉、淡紫、玫红、桃红，色彩接近但又有区分，营造「同一种浪漫氛围、四种情感表达」的整体感。这种「同色系内部色彩微调」的色彩规划在情感类应用中非常重要——色相跨度太大会破坏「我们俩的小世界」氛围。如果未来要扩展支持「共同任务清单」「共同观看清单」等更多入口，可以把 4 等分扩展为 2x4 网格，骨架完全不动。

代码三：最近回忆时间轴

时间轴是情侣 App 的核心呈现形式——按时间倒序排列两人最近的"小事"。我用左侧一根时间轴线 + 圆点 + 右侧事件卡片的组合，每条事件包含日期、内容、地点。

Widget _timeline() {
  final items = const [
    ['2026.05.20', '在外滩看了一场夜景烟花', _pink, Icons.celebration],
    ['2026.05.15', '一起做了第一顿三菜一汤', _orange, Icons.restaurant],
    ['2026.05.10', '坐高铁去苏州看了油菜花', _amber, Icons.train],
  ];
  return Container(padding: const EdgeInsets.all(14),
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(16)),
    child: Column(children: [
      const Row(children: [
        Text('最近的我们',
            style: TextStyle(color: _ink, fontSize: 14,
                fontWeight: FontWeight.w700)),
        Spacer(),
        Text('完整时间线',
            style: TextStyle(color: _pink, fontSize: 12)),
      ]),
      const SizedBox(height: 14),
      ...items.asMap().entries.map((entry) {
        final i = entry.key;
        final it = entry.value;
        final isLast = i == items.length - 1;
        return IntrinsicHeight(child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(children: [
              Container(width: 12, height: 12,
                decoration: BoxDecoration(
                    color: it[2] as Color, shape: BoxShape.circle)),
              if (!isLast)
                Expanded(child: Container(width: 1.5,
                    color: const Color(0xFFFCE7F3))),
            ]),
            const SizedBox(width: 12),
            Expanded(child: Padding(
              padding: EdgeInsets.only(bottom: isLast ? 0 : 16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(children: [
                    Icon(it[3] as IconData,
                        color: it[2] as Color, size: 16),
                    const SizedBox(width: 6),
                    Text(it[0] as String,
                        style: TextStyle(color: it[2] as Color,
                            fontSize: 12,
                            fontWeight: FontWeight.w800)),
                  ]),
                  const SizedBox(height: 4),
                  Text(it[1] as String,
                      style: const TextStyle(
                          color: _ink, fontSize: 13)),
                ],
              ),
            )),
          ],
        ));
      }),
    ]),
  );
}

时间轴这种结构在 Skia 上的渲染开销极低，IntrinsicHeight 让左侧竖线自动撑开到与右侧内容等高，是实现连续时间轴的核心技巧。两人的回忆数据通过分布式数据对象同步，确保两人在自己手机上看到的时间轴完全一致。

从「最近回忆时间轴」的情感叙事与可视化设计角度再补一段。情侣的回忆是一系列「时刻 + 故事」的集合，时间轴是最自然的展现形式。这段时间轴用「左侧主题色竖线 + 节点圆点 + 右侧事件卡片」的经典结构。每个事件卡片包含「日期 + 标题 + 简短描述 + 照片缩略图」，让用户的视线从「日期（时间锚点）→ 标题（事件主题）→ 描述（情感细节）→ 照片（视觉记忆）」一气呵成。时间轴的色彩用粉红色系，配合圆角节点，营造「温柔回顾」的氛围。如果未来要支持「按地点分组」「按主题分类」（旅行、纪念日、日常），可以在时间轴顶部加 chip 切换栏，骨架不变。鸿蒙 6.0 端 Skia 对这种「左线 + 右卡片」结构的渲染开销极低，即使有几百个事件也不会卡顿。

心得

情侣类 App 的视觉灵魂是"甜但不腻"——粉橙色给甜，圆角和留白让甜不腻。开发时最容易犯的错是堆爱心、加 emoji 让整页过度装饰。我的策略是只让 Header 用粉橙渐变作为视觉中心，其他模块用白底卡片 + 主色图标，把"甜"集中在一处。从能力扩展角度，情侣类应用最值得在鸿蒙端打造的是"分布式数据 + 桌面卡片 + 健康联动"三件套——分布式数据让两人状态实时同步、桌面卡片让"在一起 X 天"每天可见、健康联动让"我们一起跑了 X 公里"成为可视化数据。把这些能力组合起来，App 就从一个简单的"日记本"升级成"情感操作系统"。

总结

本篇实现了 Harmony 6.0 端的情侣纪念日首页，5 个模块、纯 UI、零依赖、约 360 行代码。第七组的"语音聊天室 / 失物招领 / 情侣纪念"三个迥异场景共用同一份骨架，再次验证"骨架不变、页面替换"的方法论可行性。从扩展角度建议生产业务里：把数据同步接入分布式数据对象；把"在一起 X 天"做成 FormExtensionAbility 桌面卡片；把纪念日提醒接入 PushKit；把共同足迹接入 LocationKit + MapKit；把运动数据联动接入 HealthKit。下一篇进入第八组，把"实时翻译 / 校友联络 / 协作白板"三类首页继续讲透。