基于 Harmony 6.0 应用的家庭相册共享应用首页实现

前言

家庭相册是数字时代最被低估的情感载体——爸妈的手机里存着几千张照片，但从来没整理过；爷爷奶奶的相册在家里某个抽屉里发黄；孩子的成长照片散落在每个家长的微信群里。一款好的家庭相册共享应用要把"全家人的照片汇集到一起，按时间、按人脸、按地点自动分类，谁都可以上传谁都可以看到"这件事变得轻松。Harmony 6.0 时代，家庭相册应用迎来了几个独特的能力红利——分布式数据让全家人的照片实时同步、超级终端让用户在手机、平板、智慧屏看到同一份相册、HMS Cloud 提供超大容量云端存储、NeuralNetworkRuntime 让人脸识别和场景分类在端侧推理保护隐私。本文用 Flutter 在 Harmony 6.0 上实现一个家庭相册首页，作为本系列第九组的第二篇。

背景

家庭相册类应用的视觉关键词是"温暖、丰富、亲切"——温暖对应"色彩偏暖偏柔",丰富对应"照片网格密度大",亲切对应"家庭成员头像组必须呈现"。橙红色 #F87171 配粉红 #FB7185 是这类应用的典型主色——既有"温暖"又有"日常"。本项目首页 5 个模块：渐变 Header（家庭名 + 总相片数 + 全家成员头像组）、智能分类入口（人物 / 时间 / 地点 / 视频）、近期上传瀑布流、今日推荐回忆（X 年前的今天）、家庭存储进度提示。从产品角度，家庭相册最大的复购点是"今日推荐"——AI 自动从历年照片中挑出"X 年前的今天"，让用户每天打开都能看到一张久违的回忆。鸿蒙 6.0 上做这种"日推荐"非常方便，端侧 AI 推理快速、隐私保护到位、桌面服务卡片让推荐照片每天都能被看到。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在相册类应用上的能力栈非常完整——分布式数据让多端同步、HiCloud 提供大容量云端存储、NeuralNetworkRuntime 提供端侧人脸识别和场景分类、超级终端让多设备无缝切换、HMS Account 提供家庭群组管理。Flutter 嵌入 Harmony 6.0 的方案在这种"重图片渲染 + 重 AI 推理"应用上需要做架构分工——主页用 Flutter 自绘提供丰富 UI，图片缓存通过社区适配的 cached_network_image_ohos 接入，AI 推理通过 ArkTS 端 NeuralNetworkRuntime 调用。Skia 引擎对橙红粉色（#F87171 / #FB7185 / #F472B6）的渲染非常温暖，配合圆角和大量留白，整页氛围既温暖又日常。

开发核心代码

代码一：家庭 Header

Header 必须把"家庭名 + 总相片数 + 家庭成员"做出来——这是用户的归属感来源。我用一个橙粉渐变 Container，顶部一行"陈家相册"+ 设置图标，中部"3,286 张照片"大字号，底部一行成员头像组（爸爸、妈妈、我、宝宝）。

Widget _header() {
  return Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [_primary, _accent],
        begin: Alignment.topLeft, end: Alignment.bottomRight),
      borderRadius: BorderRadius.circular(22),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Row(children: [
          Icon(Icons.family_restroom, color: Colors.white, size: 22),
          SizedBox(width: 8),
          Text('陈家相册',
              style: TextStyle(color: Colors.white,
                  fontSize: 18, fontWeight: FontWeight.w800)),
          Spacer(),
          Icon(Icons.cloud_upload, color: Colors.white, size: 22),
        ]),
        const SizedBox(height: 14),
        const Row(crossAxisAlignment: CrossAxisAlignment.end,
            children: [
          Text('3,286',
              style: TextStyle(color: Colors.white,
                  fontSize: 38, fontWeight: FontWeight.w900)),
          SizedBox(width: 6),
          Padding(padding: EdgeInsets.only(bottom: 6),
            child: Text('张照片 · 26 段视频',
                style: TextStyle(color: Colors.white,
                    fontSize: 13, fontWeight: FontWeight.w600))),
        ]),
        const SizedBox(height: 14),
        Row(children: [
          ...List.generate(4, (i) {
            final colors = [_primary, _accent, _amber, _purple];
            final names = ['爸', '妈', '我', '宝'];
            return Padding(padding: EdgeInsets.only(
                left: i == 0 ? 0 : -8),
              child: CircleAvatar(radius: 16,
                backgroundColor: Colors.white.withValues(alpha: 0.4),
                child: Text(names[i],
                    style: TextStyle(color: colors[i],
                        fontSize: 12,
                        fontWeight: FontWeight.w800))),
            );
          }),
          const SizedBox(width: 10),
          const Text('全家 4 位成员',
              style: TextStyle(color: Colors.white70, fontSize: 12)),
        ]),
      ],
    ),
  );
}

家庭成员头像组在生产业务里通过 HMS Account 的家庭群组功能管理，每个成员都通过实名认证后才能加入家庭群。这种"可信家庭"的能力是 Harmony 6.0 在生活场景的独特赋能。

从「家庭 Header」的归属感与可视化设计角度再补一段。家庭相册类应用的 Header 必须传递「这是我们一家人的相册」氛围。这段 Header 用暖橙到玫红的渐变背景，配合家庭成员头像组（一家四口）+ 「家庭相册」标题 + 已有照片数的三段式排版，让用户感受到强烈的家庭归属感。多个圆形头像并排放置，中间用细线连接，形成「家庭群像」的视觉表达。已有照片数用大字号数字显示，强化「我们已经记录了这么多回忆」的成就感。如果未来要扩展支持多家庭（比如自己的小家 + 父母的家），可以让用户在 HMS Account 绑定多个家庭群组，在 Header 上 Tab 切换，骨架不变。

代码二：智能分类入口

智能分类是相册类应用的灵魂——人物、时间、地点、视频四大维度让用户能快速找到目标照片。每类用一个独立色相图标 + 数量统计 chip。

Widget _categories() {
  final items = const [
    [Icons.face, '人物', '12 位', _primary],
    [Icons.event, '时间', '128 天', _amber],
    [Icons.place, '地点', '38 处', _green],
    [Icons.videocam, '视频', '26 段', _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[3] 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: 13,
            fontWeight: FontWeight.w700)),
        const SizedBox(height: 2),
        Text(it[2] as String, style: const TextStyle(
            color: _sub, fontSize: 11)),
      ]));
    }).toList()),
  );
}

人物分类背后是端侧人脸识别——通过 NeuralNetworkRuntime 上的人脸聚类模型把所有照片中的相同面孔分组。整个推理过程在端侧完成，照片不出端，用户隐私得到完美保护。这种"端侧 AI + 隐私优先"的设计哲学是 Harmony 6.0 的差异化价值。

从「智能分类」的 AI 驱动产品矩阵设计角度再补一段。家庭相册的智能分类（人物、地点、场景、时间）覆盖了照片的全部检索维度——按宝宝照片找、按上海旅行找、按生日聚会找、按 2023 年找。每个分类入口用主题色浅背景 + 主题色实心图标做识别（人物粉、地点蓝、场景绿、时间紫），让用户在视觉上快速分类。每个入口的「X 张」副文字让用户感知到「自己已经积累了这么多」。如果未来要扩展支持「相似照片合并」「重复照片清理」等增强功能，可以在分类入口下方加 chip 切换，鸿蒙 6.0 的端侧 AI 完全有能力处理大批量照片相似度计算。

代码三：今日推荐回忆

今日推荐是家庭相册的"惊喜元素"——AI 从历年同一天的照片中挑一张作为推荐。我用一个大卡片，顶部一个 160 高度的渐变占位图（实际使用时换成真实照片），底部"3 年前的今天"+ 拍摄地 + 当时人物头像组。

Widget _memory() {
  return Container(
    decoration: BoxDecoration(color: _card,
        borderRadius: BorderRadius.circular(18)),
    child: Column(crossAxisAlignment: CrossAxisAlignment.start,
        children: [
      Container(height: 160,
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [
            _primary.withValues(alpha: 0.6),
            _accent.withValues(alpha: 0.6),
          ]),
          borderRadius: const BorderRadius.vertical(
              top: Radius.circular(18)),
        ),
        child: Stack(children: [
          const Center(child: Icon(Icons.image,
              color: Colors.white, size: 64)),
          Positioned(top: 12, left: 12,
            child: Container(padding: const EdgeInsets.symmetric(
                horizontal: 8, vertical: 3),
              decoration: BoxDecoration(color: Colors.white,
                  borderRadius: BorderRadius.circular(6)),
              child: const Row(children: [
                Icon(Icons.auto_awesome,
                    color: _primary, size: 12),
                SizedBox(width: 4),
                Text('今日回忆',
                    style: TextStyle(color: _primary,
                        fontSize: 11,
                        fontWeight: FontWeight.w800)),
              ]),
            ),
          ),
        ]),
      ),
      Padding(padding: const EdgeInsets.all(14),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start,
            children: [
          const Text('3 年前的今天 · 海边的爸爸和宝宝',
              style: TextStyle(color: _ink,
                  fontSize: 16, fontWeight: FontWeight.w800)),
          const SizedBox(height: 4),
          const Text('青岛 · 五四广场',
              style: TextStyle(color: _sub, fontSize: 12)),
        ]),
      ),
    ]),
  );
}

“3 年前的今天"这种推荐每天会更新一次，可以通过 PushKit 在每天早上 8 点推送一次"今天的回忆已经为您备好”，让用户保持每日打开习惯。

从「今日推荐回忆」的情感化推送与 AI 智能策划角度再补一段。家庭相册的「今日推荐」是 AI 驱动的情感触发器——通过端侧算法在用户的相册中找出「N 年前的今天」「同一地点的回忆」「同一人物的成长」等专题，每天给用户一个惊喜。这段大卡片用「主图占位 + 标题（如「3 年前的今天」）+ 副标题（地点/人物） + 「查看全部」按钮」的四段式排版，让用户的视觉动线从「图片（情感触发）→ 标题（时光锚点）→ 行动（深入回顾）」一气呵成。如果未来要扩展支持「自动生成回忆视频」（用 AVCodecKit 把相关照片合成 30 秒短视频），可以在卡片上加一个「生成回忆视频」按钮，鸿蒙 6.0 的 AVCodecKit 对端侧视频合成的性能足以支持这种场景。

心得

家庭相册类 App 的视觉灵魂是"温暖 + 丰富"——橙粉色给温暖，照片网格密度给丰富。开发时最容易犯的错是把家庭成员管理做得太隐蔽，反而稀释了"全家共享"的核心心智。我的策略是把家庭成员头像组放在 Header 最显著位置，让用户一眼看到"我和谁在一个相册里"。从能力扩展角度，家庭相册最值得在鸿蒙端打造的是"端侧人脸识别 + 分布式数据 + 超级终端"三件套——端侧人脸识别让分类智能且隐私安全、分布式数据让全家照片实时同步、超级终端让相册可以在智慧屏大画面上观看。

总结

本篇实现了 Harmony 6.0 端的家庭相册首页，5 个模块、纯 UI、零依赖、约 340 行代码。骨架可直接迁移到旅行相册、宝宝成长相册、宠物相册等多种垂直场景。从扩展角度建议生产业务里：把人脸识别接入 NeuralNetworkRuntime；把照片存储接入 HiCloud；把家庭成员接入 HMS Account 群组；把今日推荐接入 PushKit；把"今日回忆"做成 FormExtensionAbility 桌面卡片；把"在智慧屏播放相册"接入超级终端能力。下一篇是第九组的最后一块——读书会社交应用。