企业官网建设流程全解析

基于 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 屏下色彩通透，配合圆角白色卡片，整页氛围既专业又有创意。

开发核心代码

代码一：在线协作 Header

Header 必须把"现在有几个白板正在协作 + 新建白板"做成视觉中心。我用一个紫青渐变 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:i==0?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(){finalitems=const[[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){finalc=it[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 骨架的前提下完成。下一篇进入第九组，把"语音日记 / 家庭相册 / 读书会"三类首页继续讲透。