基于 Harmony 6.0 应用的多人协作白板应用首页实现前言多人协作白板是远程办公时代最被低估的工具——比文字消息直观、比视频会议轻量、比共享屏幕灵活。一块虚拟白板可以承载头脑风暴、产品评审、教学辅导、跨团队对齐几乎任何面对面会比视频会议好的场景都能用它替代。这种应用的首页要回答四件事——“我有哪些白板 / 我和谁一起协作 / 最近修改的是哪几块 / 我能新建一块白板”。Harmony 6.0 时代协作白板应用迎来了几个独特的能力红利——分布式数据让白板内容多端实时同步、超级终端让用户从手机切换到平板或智慧屏继续协作、PushKit 让队友刚在白板上提了你精准触达、HiCloud 让白板永久云端存储。本文用 Flutter 在 Harmony 6.0 上实现一个协作白板首页作为本系列第八组的收官。背景协作白板类应用的视觉关键词是清爽、专业、协作感——清爽对应白色背景 单色图标,专业对应白板缩略图必须显著,协作感对应协作者头像组必须存在。深紫色 #6366F1 配青色 #14B8A6 是这类应用的典型主色——既有创意又有协作。本项目首页 5 个模块渐变 Header在线协作中数 新建按钮、最近白板大卡片缩略图 标题 协作者、白板分类网格思维导图 / 流程图 / 草图 / 看板 / 笔记 / 模板、模板推荐横滑、最近活动 chip 列表。从产品角度协作白板最大的复购点是队友的实时协作——用户每次打开应用都期待看到队友刚刚在白板上做了什么。这个功能依赖于强大的实时同步能力和精准的变更通知鸿蒙 6.0 的分布式数据对象 PushKit 组合恰好提供了这两件事的系统级支持。Flutter × Harmony 6.0 跨端开发介绍Harmony 6.0 在协作类应用上的能力栈非常完整——分布式数据对象提供多设备实时同步、PushKit 提供精准变更推送、HiCloud 提供云端存储、超级终端让多设备无缝切换、HMS Account 提供统一身份。Flutter 嵌入 Harmony 6.0 的方案在这种重交互、强同步的应用上需要做架构分工——主页用 Flutter 自绘提供丰富视觉白板的核心绘图编辑能力建议用 ArkTS 端 ArkUI 的 Canvas 组件原生实现性能更好、与系统手势集成更深UI 列表层用 Flutter 自绘。Skia 引擎对紫青色#6366F1 / #14B8A6 / #A78BFA的混合渲染非常清爽OLED 屏下色彩通透配合圆角白色卡片整页氛围既专业又有创意。开发核心代码代码一在线协作 HeaderHeader 必须把现在有几个白板正在协作 新建白板做成视觉中心。我用一个紫青渐变 Container顶部一行标题中部在 3 块白板上协作中大字号 chip右下角一个白色圆形按钮新建白板。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:Stack(children:[constColumn(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(协作白板,style:TextStyle(color:Colors.white,fontSize:22,fontWeight:FontWeight.w900)),SizedBox(height:6),Text(和团队一起把想法画出来,style:TextStyle(color:Colors.white70,fontSize:13)),SizedBox(height:18),Row(children:[Icon(Icons.circle,color:Colors.greenAccent,size:10),SizedBox(width:6),Text(您正在 3 块白板上协作 · 5 位队友在线,style:TextStyle(color:Colors.white,fontSize:13,fontWeight:FontWeight.w700)),]),],),Positioned(right:0,bottom:0,child:Container(width:52,height:52,decoration:BoxDecoration(color:Colors.white,shape:BoxShape.circle,boxShadow:[BoxShadow(color:Colors.black.withValues(alpha:0.16),blurRadius:12,offset:constOffset(0,4))]),child:constIcon(Icons.add,color:_primary,size:28),),),]),);}绿色小圆点配合5 位队友在线是协作类应用的标志性视觉——让用户立刻知道我不是一个人在用。这种在线状态实时呈现在生产业务里通过分布式数据对象的订阅 心跳机制实现每个用户的设备每 30 秒上报一次活跃状态。从「在线协作 Header」的实时性视觉表达与多用户感知设计角度再补一段。协作白板的核心是「让用户感受到协作正在发生」。这段 Header 用「3 块白板上协作 · 5 位队友在线」的实时数据 右下角悬浮加号按钮的组合让用户既能感知协作状态又能快速创建新白板。绿色小圆点是「在线」的全球通用视觉符号比文字「在线」更直观。Header 的色彩用主蓝色到深蓝色的渐变蓝色传递「可信、专业」的协作氛围。如果未来要扩展支持「队友头像组」显示当前在线 5 位队友的头像可以在 Header 下方加一个Wrap头像群鸿蒙 6.0 端对圆形头像群的渲染性能极优。代码二最近白板大卡片最近白板卡片是首页的视觉中心——必须把缩略图 标题 协作者头像组 最后更新时间全部塞进一张大卡片。我用一个 200 高的卡片顶部 120 高度的浅色缩略图区域 主色图标下方是标题 协作者头像组 时间。Widget_recentBoard(){returnContainer(decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Container(height:120,decoration:BoxDecoration(color:_primary.withValues(alpha:0.12),borderRadius:constBorderRadius.vertical(top:Radius.circular(16)),),child:Stack(children:[constCenter(child:Icon(Icons.account_tree,color:_primary,size:56)),Positioned(top:10,right:10,child:Container(padding:constEdgeInsets.symmetric(horizontal:8,vertical:3),decoration:BoxDecoration(color:_accent,borderRadius:BorderRadius.circular(6)),child:constRow(children:[Icon(Icons.circle,color:Colors.white,size:8),SizedBox(width:4),Text(LIVE,style:TextStyle(color:Colors.white,fontSize:10,fontWeight:FontWeight.w800)),]),),),]),),Padding(padding:constEdgeInsets.all(14),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(Q3 产品迭代脑图,style:TextStyle(color:_ink,fontSize:16,fontWeight:FontWeight.w800)),constSizedBox(height:4),constText(上次更新 · 王婷 · 12 分钟前,style:TextStyle(color:_sub,fontSize:12)),constSizedBox(height:12),Row(children:[...List.generate(4,(i){finalcolors[_primary,_accent,_amber,_purple];returnPadding(padding:EdgeInsets.only(left:i0?0:-8),child:CircleAvatar(radius:12,backgroundColor:colors[i].withValues(alpha:0.4)),);}),constSizedBox(width:10),constText( 2 人协作中,style:TextStyle(color:_sub,fontSize:11)),constSpacer(),Container(padding:constEdgeInsets.symmetric(horizontal:12,vertical:6),decoration:BoxDecoration(color:_primary,borderRadius:BorderRadius.circular(20)),child:constText(打开,style:TextStyle(color:Colors.white,fontSize:12,fontWeight:FontWeight.w700)),),]),]),),]),);}LIVE 红点是协作类应用的关键视觉——它告诉用户这块白板现在有人在编辑。点开白板后通过分布式数据对象拿到所有队友的实时光标位置用不同颜色的小圆点呈现让协作过程像在同一张纸上画一样真实。从「最近白板大卡片」的状态感知与协作可视化设计角度再补一段。最近白板列表的核心是「让用户快速回到上次工作」。这段大卡片用「白板缩略图占位 标题 协作者头像组 LIVE 红点 最后修改时间」五段信息塞在一张大卡片里。缩略图用色块 模式图标占位思维导图、流程图、草图让用户一眼识别白板类型。「LIVE」红点是协作状态的核心可视化——红点闪烁意味着「现在有人在编辑」。如果未来要扩展支持「白板版本回溯」让用户回看历史版本可以在卡片右上角加一个时钟图标配合 ArkTS 端的版本管理 API骨架不变。代码三白板分类网格白板分类用 6 宫格展开——思维导图、流程图、草图、看板、笔记、模板。每个用一个独立色相图标与上方的最近白板形成视觉层级。Widget_categories(){finalitemsconst[[Icons.account_tree,思维导图,_primary],[Icons.timeline,流程图,_amber],[Icons.brush,草图,_accent],[Icons.view_kanban,看板,_green],[Icons.description,笔记,_purple],[Icons.dashboard_customize,模板,_cyan],];returnContainer(padding:constEdgeInsets.all(14),decoration:BoxDecoration(color:_card,borderRadius:BorderRadius.circular(16)),child:GridView.count(crossAxisCount:3,shrinkWrap:true,physics:constNeverScrollableScrollPhysics(),mainAxisSpacing:12,crossAxisSpacing:8,childAspectRatio:1.2,children:items.map((it){finalcit[2]asColor;returnColumn(mainAxisAlignment:MainAxisAlignment.center,children:[Container(width:44,height:44,decoration:BoxDecoration(color:c.withValues(alpha:0.14),borderRadius:BorderRadius.circular(12)),child:Icon(it[0]asIconData,color:c,size:22),),constSizedBox(height:6),Text(it[1]asString,style:constTextStyle(color:_ink,fontSize:12,fontWeight:FontWeight.w600)),],);}).toList(),),);}每个分类点进去都会进入对应的模板选择页鸿蒙 6.0 推荐用 NavPathStack 管理这种深度导航。从「白板分类 6 宫格」的功能矩阵与模板分发设计角度再补一段。协作白板的 6 大分类思维导图、流程图、草图、看板、笔记、模板覆盖了从思考到执行的全部协作场景——思维导图用于发散、流程图用于梳理、草图用于自由表达、看板用于任务追踪、笔记用于结构化记录、模板用于快速启动。每个分类用独立色相做识别蓝、橙、青、绿、紫、青蓝让用户在视觉上快速分类。childAspectRatio: 1.2让格子比正方形稍宽给图标和文字留出舒适空间。如果未来要扩展支持「我的常用模板」「团队共享模板」等高级功能可以在 6 宫格下方加一个 chip 切换栏鸿蒙 6.0 的分布式数据对象天然支持团队级模板同步。心得协作白板类 App 的视觉灵魂是清爽 协作感——白色背景 单色图标给清爽协作者头像组给协作感。开发时最容易犯的错是把每个白板缩略图都做成相同尺寸的中等卡片反而让用户找不到我最近在用的那块。我的策略是把最近白板做成大卡片占据视觉中心分类网格做成中等密度模板推荐做成横滑卡片。三种容器形态形成清晰的视觉层级。从能力扩展角度协作白板最值得在鸿蒙端打造的是分布式数据 超级终端 隐私推送三件套——分布式数据让多端实时同步白板内容、超级终端让用户从手机画到一半切换到平板继续画、隐私推送让队友 了你的内容不被锁屏画面泄露。这套能力组合是协作类应用的体验底线。总结本篇实现了 Harmony 6.0 端的协作白板首页5 个模块、纯 UI、零依赖、约 360 行代码。第八组的实时翻译 / 校友联络 / 协作白板三个迥异的能力型应用共用同一份骨架再次验证骨架不变、页面替换的方法论可行性。从扩展角度建议生产业务里把白板核心绘图用 ArkUI Canvas 原生实现把白板内容接入分布式数据对象多端同步把白板存储接入 HiCloud把队友变更接入 PushKit 隐私推送把协作中白板数做成 FormExtensionAbility 桌面卡片把快速新建接入 AI 助手语义路由。这些扩展都可以在不动当前 UI 骨架的前提下完成。下一篇进入第九组把语音日记 / 家庭相册 / 读书会三类首页继续讲透。