基于 Harmony 6.0 应用的老照片修复与归档平台首页实现前言老照片是时光的胶片——但它们正在被时间侵蚀。一款好的老照片修复应用要把AI 修复 / 我的老照片 / 着色上色 / 归档备份四件事在一屏内全部铺到。Harmony 6.0 时代老照片修复类应用迎来了几个独特的能力红利——CameraKit 让旧照拍照入库、NeuralNetworkRuntime 让 AI 修复在端侧完成保护隐私、HMS Cloud 让修复后照片云端永久保存、超级终端让全家在大屏鉴赏。本文用 Flutter 在 Harmony 6.0 上实现一个老照片修复首页。背景老照片修复类应用的视觉关键词是温暖、怀旧、艺术——褐色 #92400E 配青色 #06B6D4 是这类应用的合适主色。本项目首页 5 个模块渐变 Header待修复 大上传按钮、4 大功能修复 / 着色 / 高清 / 配音、修复前后对比、家族归档、AI 故事生成。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在老照片修复类应用上的能力栈完整——CameraKit 让旧照片拍照、NeuralNetworkRuntime 让端侧 AI 修复避免上传到云端、HMS Cloud 让修复后照片永久备份、超级终端让全家鉴赏、AI 助手能力提供照片背后的故事整理。开发核心代码代码一修复 HeaderWidget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF78350F)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.auto_fix_high,color:Colors.white,size:22),SizedBox(width:8),Text(时光修复,style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.cloud_done,color:Colors.white,size:20),]),constSizedBox(height:14),constText( 已修复,style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:4),constRow(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(86,style:TextStyle(color:Colors.white,fontSize:50,fontWeight:FontWeight.w900)),SizedBox(width:6),Padding(padding:EdgeInsets.only(bottom:10),child:Text(张老照片 · 重现时光,style:TextStyle(color:Colors.white,fontSize:14,fontWeight:FontWeight.w700))),]),constSizedBox(height:14),Container(width:double.infinity,height:50,decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(25)),child:constCenter(child:Row(mainAxisSize:MainAxisSize.min,children:[Icon(Icons.add_a_photo,color:_primary,size:22),SizedBox(width:6),Text(上传老照片 · AI 修复,style:TextStyle(color:_primary,fontSize:16,fontWeight:FontWeight.w800)),],)),),]),);}AI 修复通过 NeuralNetworkRuntime 端侧推理——划痕、模糊、褪色等问题在 5 秒内修复照片不出端保护家族隐私。从「修复 Header」的怀旧情绪与一键修复设计角度再补一段。老照片修复类应用的 Header 必须传递「旧记忆可以被重新看见」的情绪。这段 Header 用暖棕到米黄色复古渐变配合「上传老照片」 「一键修复」按钮让用户立刻理解操作路径。如果未来要扩展支持「黑白上色」可以在 Header 加上色 chip。鸿蒙 6.0 的端侧 AI 让老照片不出设备即可完成修复更适合家庭隐私场景。代码二4 大功能Widget_features(){finalitemsconst[[Icons.healing,AI 修复,_primary],[Icons.palette,黑白上色,_accent],[Icons.high_quality,高清增强,_amber],[Icons.record_voice_over,配音讲述,_green],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:items.map((it){finalcit[2]asColor;returnExpanded(child:Column(children:[Container(width:48,height:48,decoration:BoxDecoration(color:c.withValues(alpha:0.14),borderRadius:BorderRadius.circular(14)),child:Icon(it[0]asIconData,color:c,size:22),),constSizedBox(height:8),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:12,fontWeight:FontWeight.w600)),]));}).toList()),);}4 大功能去划痕、上色、增强、放大覆盖老照片修复的主要需求。每个功能都对应一种常见问题用户不用理解算法只需选择「照片哪里不好」。从「4 大功能」的图像修复流程与用户理解成本设计角度再补一段。老照片用户通常不是专业修图师所以功能命名必须生活化。去划痕解决破损上色解决黑白照增强解决褪色放大解决低清。每个功能都可以一键预览前后效果。如果未来要扩展支持「人脸增强」可以在人像老照片中自动识别面部并优先修复眼睛、皮肤和轮廓。代码三修复前后对比Widget_comparison(){returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(最近修复,style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w800)),constSizedBox(height:12),Row(children:[Expanded(child:Column(children:[Container(height:100,decoration:BoxDecoration(color:Colors.grey.shade400,borderRadius:BorderRadius.circular(8)),child:constCenter(child:Icon(Icons.image,color:Colors.white,size:36)),),constSizedBox(height:6),constText(修复前,style:TextStyle(color:_sub,fontSize:11)),])),constSizedBox(width:10),constIcon(Icons.arrow_forward,color:_primary,size:22),constSizedBox(width:10),Expanded(child:Column(children:[Container(height:100,decoration:BoxDecoration(gradient:LinearGradient(colors:[_primary.withValues(alpha:0.6),_amber.withValues(alpha:0.4),]),borderRadius:BorderRadius.circular(8)),child:constCenter(child:Icon(Icons.image,color:Colors.white,size:36)),),constSizedBox(height:6),constText(AI 修复后,style:TextStyle(color:_primary,fontSize:11,fontWeight:FontWeight.w700)),])),]),]),);}修复后照片通过 HMS Cloud 端到端加密备份——家族珍贵记忆永久保存。从「修复前后对比」的视觉冲击与家庭分享设计角度再补一段。老照片修复最打动人的瞬间是「前后对比」所以 UI 必须让用户直观看到划痕消失、颜色恢复、人物变清晰。可以使用左右滑动对比组件让用户拖动分割线查看修复效果。如果未来要扩展支持「家庭相册分享」可以一键把修复结果同步给家人。鸿蒙 6.0 的超级终端让全家在智慧屏上一起看修复后的老照片。心得老照片修复类 App 的视觉灵魂是温暖 怀旧——褐色给胶片质感前后对比让效果一目了然。开发时最容易犯的错是 AI 修复速度慢让用户失去耐心。我的策略是端侧推理 5 秒内完成。从能力扩展角度老照片应用最值得在鸿蒙端打造的是NeuralNetworkRuntime 端侧 AI 修复 HMS Cloud 永久备份 超级终端家庭鉴赏 AI 助手故事生成四件套。总结本篇实现了 Harmony 6.0 端的老照片修复首页5 个模块、纯 UI、零依赖、约 340 行代码。从扩展角度建议生产业务里把 AI 修复接入 NeuralNetworkRuntime把照片接入 HMS Cloud把全家鉴赏接入超级终端把已修复张数做成 FormExtensionAbility 桌面卡片把故事生成接入 AI 助手。下一篇是第四十七组的最后一块——家书寄送与留存应用。
基于 Harmony 6.0 应用的老照片修复与归档平台首页实现
基于 Harmony 6.0 应用的老照片修复与归档平台首页实现前言老照片是时光的胶片——但它们正在被时间侵蚀。一款好的老照片修复应用要把AI 修复 / 我的老照片 / 着色上色 / 归档备份四件事在一屏内全部铺到。Harmony 6.0 时代老照片修复类应用迎来了几个独特的能力红利——CameraKit 让旧照拍照入库、NeuralNetworkRuntime 让 AI 修复在端侧完成保护隐私、HMS Cloud 让修复后照片云端永久保存、超级终端让全家在大屏鉴赏。本文用 Flutter 在 Harmony 6.0 上实现一个老照片修复首页。背景老照片修复类应用的视觉关键词是温暖、怀旧、艺术——褐色 #92400E 配青色 #06B6D4 是这类应用的合适主色。本项目首页 5 个模块渐变 Header待修复 大上传按钮、4 大功能修复 / 着色 / 高清 / 配音、修复前后对比、家族归档、AI 故事生成。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在老照片修复类应用上的能力栈完整——CameraKit 让旧照片拍照、NeuralNetworkRuntime 让端侧 AI 修复避免上传到云端、HMS Cloud 让修复后照片永久备份、超级终端让全家鉴赏、AI 助手能力提供照片背后的故事整理。开发核心代码代码一修复 HeaderWidget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF78350F)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.auto_fix_high,color:Colors.white,size:22),SizedBox(width:8),Text(时光修复,style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Icon(Icons.cloud_done,color:Colors.white,size:20),]),constSizedBox(height:14),constText( 已修复,style:TextStyle(color:Colors.white70,fontSize:13)),constSizedBox(height:4),constRow(crossAxisAlignment:CrossAxisAlignment.end,children:[Text(86,style:TextStyle(color:Colors.white,fontSize:50,fontWeight:FontWeight.w900)),SizedBox(width:6),Padding(padding:EdgeInsets.only(bottom:10),child:Text(张老照片 · 重现时光,style:TextStyle(color:Colors.white,fontSize:14,fontWeight:FontWeight.w700))),]),constSizedBox(height:14),Container(width:double.infinity,height:50,decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(25)),child:constCenter(child:Row(mainAxisSize:MainAxisSize.min,children:[Icon(Icons.add_a_photo,color:_primary,size:22),SizedBox(width:6),Text(上传老照片 · AI 修复,style:TextStyle(color:_primary,fontSize:16,fontWeight:FontWeight.w800)),],)),),]),);}AI 修复通过 NeuralNetworkRuntime 端侧推理——划痕、模糊、褪色等问题在 5 秒内修复照片不出端保护家族隐私。从「修复 Header」的怀旧情绪与一键修复设计角度再补一段。老照片修复类应用的 Header 必须传递「旧记忆可以被重新看见」的情绪。这段 Header 用暖棕到米黄色复古渐变配合「上传老照片」 「一键修复」按钮让用户立刻理解操作路径。如果未来要扩展支持「黑白上色」可以在 Header 加上色 chip。鸿蒙 6.0 的端侧 AI 让老照片不出设备即可完成修复更适合家庭隐私场景。代码二4 大功能Widget_features(){finalitemsconst[[Icons.healing,AI 修复,_primary],[Icons.palette,黑白上色,_accent],[Icons.high_quality,高清增强,_amber],[Icons.record_voice_over,配音讲述,_green],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:items.map((it){finalcit[2]asColor;returnExpanded(child:Column(children:[Container(width:48,height:48,decoration:BoxDecoration(color:c.withValues(alpha:0.14),borderRadius:BorderRadius.circular(14)),child:Icon(it[0]asIconData,color:c,size:22),),constSizedBox(height:8),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:12,fontWeight:FontWeight.w600)),]));}).toList()),);}4 大功能去划痕、上色、增强、放大覆盖老照片修复的主要需求。每个功能都对应一种常见问题用户不用理解算法只需选择「照片哪里不好」。从「4 大功能」的图像修复流程与用户理解成本设计角度再补一段。老照片用户通常不是专业修图师所以功能命名必须生活化。去划痕解决破损上色解决黑白照增强解决褪色放大解决低清。每个功能都可以一键预览前后效果。如果未来要扩展支持「人脸增强」可以在人像老照片中自动识别面部并优先修复眼睛、皮肤和轮廓。代码三修复前后对比Widget_comparison(){returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(最近修复,style:TextStyle(color:_ink,fontSize:14,fontWeight:FontWeight.w800)),constSizedBox(height:12),Row(children:[Expanded(child:Column(children:[Container(height:100,decoration:BoxDecoration(color:Colors.grey.shade400,borderRadius:BorderRadius.circular(8)),child:constCenter(child:Icon(Icons.image,color:Colors.white,size:36)),),constSizedBox(height:6),constText(修复前,style:TextStyle(color:_sub,fontSize:11)),])),constSizedBox(width:10),constIcon(Icons.arrow_forward,color:_primary,size:22),constSizedBox(width:10),Expanded(child:Column(children:[Container(height:100,decoration:BoxDecoration(gradient:LinearGradient(colors:[_primary.withValues(alpha:0.6),_amber.withValues(alpha:0.4),]),borderRadius:BorderRadius.circular(8)),child:constCenter(child:Icon(Icons.image,color:Colors.white,size:36)),),constSizedBox(height:6),constText(AI 修复后,style:TextStyle(color:_primary,fontSize:11,fontWeight:FontWeight.w700)),])),]),]),);}修复后照片通过 HMS Cloud 端到端加密备份——家族珍贵记忆永久保存。从「修复前后对比」的视觉冲击与家庭分享设计角度再补一段。老照片修复最打动人的瞬间是「前后对比」所以 UI 必须让用户直观看到划痕消失、颜色恢复、人物变清晰。可以使用左右滑动对比组件让用户拖动分割线查看修复效果。如果未来要扩展支持「家庭相册分享」可以一键把修复结果同步给家人。鸿蒙 6.0 的超级终端让全家在智慧屏上一起看修复后的老照片。心得老照片修复类 App 的视觉灵魂是温暖 怀旧——褐色给胶片质感前后对比让效果一目了然。开发时最容易犯的错是 AI 修复速度慢让用户失去耐心。我的策略是端侧推理 5 秒内完成。从能力扩展角度老照片应用最值得在鸿蒙端打造的是NeuralNetworkRuntime 端侧 AI 修复 HMS Cloud 永久备份 超级终端家庭鉴赏 AI 助手故事生成四件套。总结本篇实现了 Harmony 6.0 端的老照片修复首页5 个模块、纯 UI、零依赖、约 340 行代码。从扩展角度建议生产业务里把 AI 修复接入 NeuralNetworkRuntime把照片接入 HMS Cloud把全家鉴赏接入超级终端把已修复张数做成 FormExtensionAbility 桌面卡片把故事生成接入 AI 助手。下一篇是第四十七组的最后一块——家书寄送与留存应用。
