企业官网建设流程全解析

基于 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(){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: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))),);}),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(){finalitems=const[[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){finalc=it[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 桌面卡片；把"在智慧屏播放相册"接入超级终端能力。下一篇是第九组的最后一块——读书会社交应用。