基于 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的渲染非常温暖配合圆角和大量留白整页氛围既温暖又日常。开发核心代码代码一家庭 HeaderHeader 必须把家庭名 总相片数 家庭成员做出来——这是用户的归属感来源。我用一个橙粉渐变 Container顶部一行陈家相册 设置图标中部3,286 张照片大字号底部一行成员头像组爸爸、妈妈、我、宝宝。Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,_accent],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(22),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(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),]),constSizedBox(height:14),constRow(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))),]),constSizedBox(height:14),Row(children:[...List.generate(4,(i){finalcolors[_primary,_accent,_amber,_purple];finalnames[爸,妈,我,宝];returnPadding(padding:EdgeInsets.only(left:i0?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))),);}),constSizedBox(width:10),constText(全家 4 位成员,style:TextStyle(color:Colors.white70,fontSize:12)),]),],),);}家庭成员头像组在生产业务里通过 HMS Account 的家庭群组功能管理每个成员都通过实名认证后才能加入家庭群。这种可信家庭的能力是 Harmony 6.0 在生活场景的独特赋能。从「家庭 Header」的归属感与可视化设计角度再补一段。家庭相册类应用的 Header 必须传递「这是我们一家人的相册」氛围。这段 Header 用暖橙到玫红的渐变背景配合家庭成员头像组一家四口 「家庭相册」标题 已有照片数的三段式排版让用户感受到强烈的家庭归属感。多个圆形头像并排放置中间用细线连接形成「家庭群像」的视觉表达。已有照片数用大字号数字显示强化「我们已经记录了这么多回忆」的成就感。如果未来要扩展支持多家庭比如自己的小家 父母的家可以让用户在 HMS Account 绑定多个家庭群组在 Header 上 Tab 切换骨架不变。代码二智能分类入口智能分类是相册类应用的灵魂——人物、时间、地点、视频四大维度让用户能快速找到目标照片。每类用一个独立色相图标 数量统计 chip。Widget_categories(){finalitemsconst[[Icons.face,人物,12 位,_primary],[Icons.event,时间,128 天,_amber],[Icons.place,地点,38 处,_green],[Icons.videocam,视频,26 段,_purple],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:items.map((it){finalcit[3]asColor;returnExpanded(child:Column(children:[Container(width:48,height:48,decoration:BoxDecoration(color:c.withValues(alpha:0.16),borderRadius:BorderRadius.circular(14)),child:Icon(it[0]asIconData,color:c,size:24),),constSizedBox(height:8),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:13,fontWeight:FontWeight.w700)),constSizedBox(height:2),Text(it[2]asString,style:constTextStyle(color:_sub,fontSize:11)),]));}).toList()),);}人物分类背后是端侧人脸识别——通过 NeuralNetworkRuntime 上的人脸聚类模型把所有照片中的相同面孔分组。整个推理过程在端侧完成照片不出端用户隐私得到完美保护。这种端侧 AI 隐私优先的设计哲学是 Harmony 6.0 的差异化价值。从「智能分类」的 AI 驱动产品矩阵设计角度再补一段。家庭相册的智能分类人物、地点、场景、时间覆盖了照片的全部检索维度——按宝宝照片找、按上海旅行找、按生日聚会找、按 2023 年找。每个分类入口用主题色浅背景 主题色实心图标做识别人物粉、地点蓝、场景绿、时间紫让用户在视觉上快速分类。每个入口的「X 张」副文字让用户感知到「自己已经积累了这么多」。如果未来要扩展支持「相似照片合并」「重复照片清理」等增强功能可以在分类入口下方加 chip 切换鸿蒙 6.0 的端侧 AI 完全有能力处理大批量照片相似度计算。代码三今日推荐回忆今日推荐是家庭相册的惊喜元素——AI 从历年同一天的照片中挑一张作为推荐。我用一个大卡片顶部一个 160 高度的渐变占位图实际使用时换成真实照片底部3 年前的今天 拍摄地 当时人物头像组。Widget_memory(){returnContainer(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:constBorderRadius.vertical(top:Radius.circular(18)),),child:Stack(children:[constCenter(child:Icon(Icons.image,color:Colors.white,size:64)),Positioned(top:12,left:12,child:Container(padding:constEdgeInsets.symmetric(horizontal:8,vertical:3),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(6)),child:constRow(children:[Icon(Icons.auto_awesome,color:_primary,size:12),SizedBox(width:4),Text(今日回忆,style:TextStyle(color:_primary,fontSize:11,fontWeight:FontWeight.w800)),]),),),]),),Padding(padding:constEdgeInsets.all(14),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(3 年前的今天 · 海边的爸爸和宝宝,style:TextStyle(color:_ink,fontSize:16,fontWeight:FontWeight.w800)),constSizedBox(height:4),constText(青岛 · 五四广场,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 桌面卡片把在智慧屏播放相册接入超级终端能力。下一篇是第九组的最后一块——读书会社交应用。
基于 Harmony 6.0 应用的家庭相册共享应用首页实现
基于 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的渲染非常温暖配合圆角和大量留白整页氛围既温暖又日常。开发核心代码代码一家庭 HeaderHeader 必须把家庭名 总相片数 家庭成员做出来——这是用户的归属感来源。我用一个橙粉渐变 Container顶部一行陈家相册 设置图标中部3,286 张照片大字号底部一行成员头像组爸爸、妈妈、我、宝宝。Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,_accent],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(22),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(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),]),constSizedBox(height:14),constRow(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))),]),constSizedBox(height:14),Row(children:[...List.generate(4,(i){finalcolors[_primary,_accent,_amber,_purple];finalnames[爸,妈,我,宝];returnPadding(padding:EdgeInsets.only(left:i0?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))),);}),constSizedBox(width:10),constText(全家 4 位成员,style:TextStyle(color:Colors.white70,fontSize:12)),]),],),);}家庭成员头像组在生产业务里通过 HMS Account 的家庭群组功能管理每个成员都通过实名认证后才能加入家庭群。这种可信家庭的能力是 Harmony 6.0 在生活场景的独特赋能。从「家庭 Header」的归属感与可视化设计角度再补一段。家庭相册类应用的 Header 必须传递「这是我们一家人的相册」氛围。这段 Header 用暖橙到玫红的渐变背景配合家庭成员头像组一家四口 「家庭相册」标题 已有照片数的三段式排版让用户感受到强烈的家庭归属感。多个圆形头像并排放置中间用细线连接形成「家庭群像」的视觉表达。已有照片数用大字号数字显示强化「我们已经记录了这么多回忆」的成就感。如果未来要扩展支持多家庭比如自己的小家 父母的家可以让用户在 HMS Account 绑定多个家庭群组在 Header 上 Tab 切换骨架不变。代码二智能分类入口智能分类是相册类应用的灵魂——人物、时间、地点、视频四大维度让用户能快速找到目标照片。每类用一个独立色相图标 数量统计 chip。Widget_categories(){finalitemsconst[[Icons.face,人物,12 位,_primary],[Icons.event,时间,128 天,_amber],[Icons.place,地点,38 处,_green],[Icons.videocam,视频,26 段,_purple],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:items.map((it){finalcit[3]asColor;returnExpanded(child:Column(children:[Container(width:48,height:48,decoration:BoxDecoration(color:c.withValues(alpha:0.16),borderRadius:BorderRadius.circular(14)),child:Icon(it[0]asIconData,color:c,size:24),),constSizedBox(height:8),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:13,fontWeight:FontWeight.w700)),constSizedBox(height:2),Text(it[2]asString,style:constTextStyle(color:_sub,fontSize:11)),]));}).toList()),);}人物分类背后是端侧人脸识别——通过 NeuralNetworkRuntime 上的人脸聚类模型把所有照片中的相同面孔分组。整个推理过程在端侧完成照片不出端用户隐私得到完美保护。这种端侧 AI 隐私优先的设计哲学是 Harmony 6.0 的差异化价值。从「智能分类」的 AI 驱动产品矩阵设计角度再补一段。家庭相册的智能分类人物、地点、场景、时间覆盖了照片的全部检索维度——按宝宝照片找、按上海旅行找、按生日聚会找、按 2023 年找。每个分类入口用主题色浅背景 主题色实心图标做识别人物粉、地点蓝、场景绿、时间紫让用户在视觉上快速分类。每个入口的「X 张」副文字让用户感知到「自己已经积累了这么多」。如果未来要扩展支持「相似照片合并」「重复照片清理」等增强功能可以在分类入口下方加 chip 切换鸿蒙 6.0 的端侧 AI 完全有能力处理大批量照片相似度计算。代码三今日推荐回忆今日推荐是家庭相册的惊喜元素——AI 从历年同一天的照片中挑一张作为推荐。我用一个大卡片顶部一个 160 高度的渐变占位图实际使用时换成真实照片底部3 年前的今天 拍摄地 当时人物头像组。Widget_memory(){returnContainer(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:constBorderRadius.vertical(top:Radius.circular(18)),),child:Stack(children:[constCenter(child:Icon(Icons.image,color:Colors.white,size:64)),Positioned(top:12,left:12,child:Container(padding:constEdgeInsets.symmetric(horizontal:8,vertical:3),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(6)),child:constRow(children:[Icon(Icons.auto_awesome,color:_primary,size:12),SizedBox(width:4),Text(今日回忆,style:TextStyle(color:_primary,fontSize:11,fontWeight:FontWeight.w800)),]),),),]),),Padding(padding:constEdgeInsets.all(14),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(3 年前的今天 · 海边的爸爸和宝宝,style:TextStyle(color:_ink,fontSize:16,fontWeight:FontWeight.w800)),constSizedBox(height:4),constText(青岛 · 五四广场,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 桌面卡片把在智慧屏播放相册接入超级终端能力。下一篇是第九组的最后一块——读书会社交应用。
