基于 Harmony 6.0 应用的宿舍报修与评价系统首页实现-编程实验室

基于 Harmony 6.0 应用的宿舍报修与评价系统首页实现

前言

宿舍是大学生第二个家——但水管漏水、空调坏掉、灯不亮等小故障层出不穷。一款好的宿舍报修应用要把"我的报修 / 进度跟踪 / 维修师傅 / 满意度评价"四件事在一屏内全部铺到。Harmony 6.0 时代，宿舍报修类应用迎来了几个独特的能力红利——HMS Account 学籍认证、CameraKit 让故障拍照入档、PushKit 提供维修师傅上门提醒、AI 助手能力提供故障预诊。本文用 Flutter 在 Harmony 6.0 上实现一个宿舍报修首页。

背景

校园报修类应用的视觉关键词是"清晰、专业、便利"——蓝色 #2563EB 配橙色 #F97316 是这类应用的合适主色。本项目首页 5 个模块：渐变 Header（待维修 + 大报修按钮）、4 大故障类型、维修中订单、维修师傅排行、本学期统计。

Flutter × Harmony 6.0 跨端开发介绍

Harmony 6.0 在校园报修类应用上的能力栈完整——HMS Account 提供学籍认证、CameraKit 让故障拍照、PushKit 提供进度推送、AI 助手能力提供"灯不亮可能是开关问题"等预诊、HMS Wallet 让维修评价电子化。

开发核心代码

代码一：报修 Header

Widget_header(){returnContainer(padding:constEdgeInsets.all(20),decoration:BoxDecoration(gradient:constLinearGradient(colors:[_primary,Color(0xFF1D4ED8)],begin:Alignment.topLeft,end:Alignment.bottomRight),borderRadius:BorderRadius.circular(24),),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constRow(children:[Icon(Icons.build,color:Colors.white,size:22),SizedBox(width:8),Text('宿舍报修',style:TextStyle(color:Colors.white,fontSize:18,fontWeight:FontWeight.w800)),Spacer(),Container(padding:EdgeInsets.symmetric(horizontal:8,vertical:3),decoration:BoxDecoration(color:Colors.white24,borderRadius:BorderRadius.all(Radius.circular(6))),child:Text('12 栋 1801',style:TextStyle(color:Colors.white,fontSize:11,fontWeight:FontWeight.w800)),),]),constSizedBox(height:14),constRow(crossAxisAlignment:CrossAxisAlignment.end,children:[Text('1',style:TextStyle(color:Colors.white,fontSize:50,fontWeight:FontWeight.w900)),SizedBox(width:6),Padding(padding:EdgeInsets.only(bottom:10),child:Text('个维修中 · 师傅 32 分钟后到',style:TextStyle(color:Colors.white,fontSize:13,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('拍照报修',style:TextStyle(color:_primary,fontSize:16,fontWeight:FontWeight.w800)),],)),),]),);}

报修通过 CameraKit 拍照故障 + AI 助手能力自动识别故障类型——比传统填写表单快 5 倍。

从「报修 Header」的校园服务效率与拍照报修设计角度再补一段。宿舍报修类应用的 Header 必须把「拍照报修」做成最大入口，因为学生最常见的痛点就是不知道该怎么描述故障。这段 Header 用主蓝到青色渐变，配合「拍照识别故障」按钮和当前待处理数量，让用户快速提交。鸿蒙 6.0 的 CameraKit + AI 助手可以识别水管漏水、灯坏、门锁损坏等类型，减少人工分类成本。

代码二：4 大故障类型

Widget_types(){finalitems=const[[Icons.electrical_services,'电路',_amber],[Icons.water_damage,'水管',_primary],[Icons.ac_unit,'空调',_accent],[Icons.lightbulb_outline,'照明',_green],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Row(children:items.map((it){finalc=it[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 大故障类型」的派单效率与校园后勤协同设计角度再补一段。宿舍报修最怕分类错导致来错师傅，所以故障类型入口必须清晰。水电通常高优先级，网络需要信息中心，家具可能需要备件，门窗涉及安全。AI 自动识别后仍应允许用户手动调整类型，避免误判。如果未来要扩展支持「故障严重程度」，可以加轻微 / 一般 / 紧急 chip。鸿蒙 6.0 的 AI 助手能帮助后勤系统减少人工分单。

代码三：维修中订单

Widget_activeOrder(){returnContainer(padding:constEdgeInsets.all(16),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16),border:Border.all(color:_primary.withValues(alpha:0.3))),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Row(children:[Container(padding:constEdgeInsets.symmetric(horizontal:8,vertical:3),decoration:BoxDecoration(color:_accent,borderRadius:BorderRadius.circular(4)),child:constText('维修中',style:TextStyle(color:Colors.white,fontSize:10,fontWeight:FontWeight.w800)),),constSizedBox(width:8),constText('R20260528-001',style:TextStyle(color:_sub,fontSize:11)),]),constSizedBox(height:10),constText('卫生间水龙头漏水',style:TextStyle(color:_ink,fontSize:16,fontWeight:FontWeight.w800)),constSizedBox(height:8),constRow(children:[Icon(Icons.engineering,color:_primary,size:18),SizedBox(width:6),Text('王师傅 · 已派单 · 32 分钟后到',style:TextStyle(color:_primary,fontSize:13,fontWeight:FontWeight.w700)),]),],),);}

师傅到达时间通过 PushKit 推送 + LocationKit 实时位置——避免学生白等。

从「维修中订单」的进度透明与校园服务体验设计角度再补一段。维修订单卡片必须展示故障类型、宿舍号、当前状态、师傅姓名、预计到达时间和联系电话。学生最关心的是「什么时候来」，所以预计到达和位置更新要突出。如果未来要扩展支持「维修完成评价」，可以在订单完成后弹出评分和反馈入口。鸿蒙 6.0 的 LocationKit + PushKit 让维修进度从黑箱变成透明流程。

心得

宿舍报修类 App 的视觉灵魂是"清晰 + 便利"——蓝色给可信，进度状态一目了然。开发时最容易犯的错是报修流程过于复杂。我的策略是用 CameraKit 拍照 + AI 自动识别简化录入。从能力扩展角度，宿舍报修最值得在鸿蒙端打造的是"CameraKit 拍照 + AI 助手预诊 + PushKit 进度推送 + HMS Account 学籍认证"四件套。

总结

本篇实现了 Harmony 6.0 端的宿舍报修首页，5 个模块、纯 UI、零依赖、约 320 行代码。从扩展角度建议生产业务里：把拍照接入 CameraKit；把预诊接入 AI 助手；把进度推送接入 PushKit；把"维修中订单"做成 FormExtensionAbility 桌面卡片；把学籍认证接入 HMS Account。下一篇是第四十八组的最后一块——校园表白墙应用。