一、引言从单设备到分布式协同OpenHarmony 的核心愿景之一是“超级终端”—— 多个物理设备无缝协同形成一个逻辑上的统一工作空间。例如在手机上开始编辑文档走到平板前自动续写车机导航途中到家后由智慧屏继续播报智能手表接收通知点击后在电视上播放视频。这种“任务接力”Task Continuity 能力依赖于设备间的任务注册、状态同步与用户授权。虽然底层由 OpenHarmony 分布式软总线实现但前端 UI 必须清晰表达任务的流转状态与操作入口。本文将构建一个模拟页面「跨设备任务协同中心」。它具备以下特性展示当前设备正在处理的任务如“编辑报告”、“播放音乐”列出附近可信设备手机、平板、车机等提供“推送任务”按钮将当前任务发送至其他设备实时反馈任务状态已推送 / 接收中 / 已完成响应式布局手机竖屏为列表横屏/平板为双栏桌面为三栏信息面板。这不仅是一个 UI 演示更是对分布式场景下用户心智模型的可视化探索。二、完整可运行代码// lib/main.dartimportpackage:flutter/material.dart;voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:OpenHarmony 任务协同中心,debugShowCheckedModeBanner:false,theme:ThemeData(useMaterial3:true,colorScheme:ColorScheme.fromSeed(seedColor:Colors.indigo),appBarTheme:constAppBarTheme(centerTitle:true),),home:constTaskContinuityPage(),);}}/// 任务状态枚举enumTaskStatus{active,pushed,received,completed}/// 任务类型classTask{finalStringid;finalStringtitle;finalStringdescription;finalIconDataicon;lateTaskStatusstatus;Task({requiredthis.id,requiredthis.title,requiredthis.description,requiredthis.icon,TaskStatus?status,}):statusstatus??TaskStatus.active;}/// 设备类型用于模拟附近设备classNearbyDevice{finalStringid;finalStringname;finalStringtype;// phone, tablet, car, tvfinalbool isTrusted;constNearbyDevice({requiredthis.id,requiredthis.name,requiredthis.type,this.isTrustedtrue,});}/// 模拟数据源finalListTask_mockActiveTasks[Task(id:task_001,title:编辑Q3财报,description:使用WPS编辑季度财务报告,icon:Icons.description,),Task(id:task_002,title:播放播客,description:《科技早知道》第128期,icon:Icons.podcasts,),];finalListNearbyDevice_mockNearbyDevices[constNearbyDevice(id:dev_1,name:我的手机,type:phone,isTrusted:true),constNearbyDevice(id:dev_2,name:办公平板,type:tablet,isTrusted:true),constNearbyDevice(id:dev_3,name:家庭智慧屏,type:tv,isTrusted:true),constNearbyDevice(id:dev_4,name:车载系统,type:car,isTrusted:false),];classTaskContinuityPageextendsStatefulWidget{constTaskContinuityPage({super.key});overrideStateTaskContinuityPagecreateState()_TaskContinuityPageState();}class_TaskContinuityPageStateextendsStateTaskContinuityPage{lateListTask_tasks;lateListNearbyDevice_devices;overridevoidinitState(){super.initState();// 深拷贝模拟数据避免修改原始列表_tasks_mockActiveTasks.map((t)Task(id:t.id,title:t.title,description:t.description,icon:t.icon,status:t.status,)).toList();_devicesList.of(_mockNearbyDevices);}/// 模拟推送任务到设备异步Futurevoid_pushTaskTo(Tasktask,NearbyDevicedevice)async{if(task.status!TaskStatus.active)return;// 更新本地任务状态为“已推送”setState((){task.statusTaskStatus.pushed;});// 模拟网络延迟awaitFuture.delayed(constDuration(seconds:1));// 模拟设备接收成功实际应通过分布式软总线回调if(device.isTrusted){setState((){task.statusTaskStatus.received;});awaitFuture.delayed(constDuration(seconds:1));setState((){task.statusTaskStatus.completed;});}else{// 不可信设备回滚状态awaitFuture.delayed(constDuration(seconds:1));setState((){task.statusTaskStatus.active;});}}/// 获取设备方向与尺寸决定布局模式boolget_isLandscapeOrLarge{finalsizeMediaQuery.sizeOf(context);returnsize.widthsize.height||size.shortestSide600;}overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(任务协同中心)),body:_isLandscapeOrLarge?_buildDualPaneLayout():_buildSingleColumnLayout(),);}/// 单列布局手机竖屏Widget_buildSingleColumnLayout(){returnListView.builder(padding:constEdgeInsets.all(16),itemCount:_tasks.length,itemBuilder:(context,index){finaltask_tasks[index];returnColumn(children:[_buildTaskCard(task),constSizedBox(height:16),_buildDeviceSelector(task),constSizedBox(height:24),],);},);}/// 双栏/三栏布局横屏、平板、桌面Widget_buildDualPaneLayout(){returnRow(children:[Expanded(flex:2,child:Padding(padding:constEdgeInsets.all(16),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(当前任务,style:TextStyle(fontSize:20,fontWeight:FontWeight.bold)),constSizedBox(height:16),Expanded(child:ListView.builder(itemCount:_tasks.length,itemBuilder:(context,index)_buildTaskCard(_tasks[index]),),),],),),),constVerticalDivider(width:1),Expanded(flex:3,child:Padding(padding:constEdgeInsets.all(16),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(推送至设备,style:TextStyle(fontSize:20,fontWeight:FontWeight.bold)),constSizedBox(height:16),..._tasks.map((task)Column(children:[Text(${task.title}→,style:constTextStyle(fontWeight:FontWeight.w500)),constSizedBox(height:8),_buildDeviceSelector(task),constSizedBox(height:20),],)),],),),),],);}/// 构建任务卡片Widget_buildTaskCard(Tasktask){finalstatusInfo_getStatusInfo(task.status);returnCard(child:Padding(padding:constEdgeInsets.all(16),child:Row(children:[Icon(task.icon,size:24,color:Theme.of(context).colorScheme.primary),constSizedBox(width:16),Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(task.title,style:Theme.of(context).textTheme.titleMedium),constSizedBox(height:4),Text(task.description,style:Theme.of(context).textTheme.bodySmall),constSizedBox(height:8),Container(padding:constEdgeInsets.symmetric(horizontal:8,vertical:4),decoration:BoxDecoration(color:statusInfo.color.withOpacity(0.15),borderRadius:BorderRadius.circular(4),),child:Text(statusInfo.text,style:TextStyle(color:statusInfo.color,fontSize:12,fontWeight:FontWeight.bold),),),],),),],),),);}/// 构建设备选择器带推送按钮Widget_buildDeviceSelector(Tasktask){returnWrap(spacing:8,runSpacing:8,children:_devices.map((device){finalisDisabledtask.status!TaskStatus.active;returnActionChip(label:Text(device.name),avatar:_getDeviceIcon(device.type),onPressed:isDisabled?null:()_pushTaskTo(task,device),backgroundColor:isDisabled?Colors.grey.shade200:(device.isTrusted?Colors.blue.shade50:Colors.red.shade50),disabledColor:Colors.grey.shade200,);}).toList(),);}/// 根据设备类型返回图标Widget_getDeviceIcon(Stringtype){switch(type){casephone:returnconstIcon(Icons.phone_android,size:18);casetablet:returnconstIcon(Icons.tablet_android,size:18);casetv:returnconstIcon(Icons.tv,size:18);casecar:returnconstIcon(Icons.directions_car,size:18);default:returnconstIcon(Icons.devices,size:18);}}/// 获取任务状态显示信息({Colorcolor,Stringtext})_getStatusInfo(TaskStatusstatus){switch(status){caseTaskStatus.active:return(color:Colors.blue,text:进行中);caseTaskStatus.pushed:return(color:Colors.orange,text:已推送);caseTaskStatus.received:return(color:Colors.purple,text:接收中);caseTaskStatus.completed:return(color:Colors.green,text:已完成);}}}✅ 此代码无需额外依赖可直接在 Flutter 3.24 环境中运行完美适配 OpenHarmony 模拟器。三、页面创新点与设计思想解析1. 全新交互范式任务为中心而非设备或能力前三篇文章分别聚焦于设备类型识别主题切换硬件能力检测。而本文以“任务”为核心实体设备只是任务的载体。这更贴近 OpenHarmony “服务化”与“原子化”的设计理念——应用功能被拆解为可流转的服务单元。2. 动态布局策略基于方向与尺寸的智能切换boolget_isLandscapeOrLarge{finalsizeMediaQuery.sizeOf(context);returnsize.widthsize.height||size.shortestSide600;}手机竖屏采用ListView单列布局任务与设备选择器垂直堆叠适合单手操作横屏/平板/桌面切换为Row双栏布局左侧任务列表右侧设备推送区信息密度更高不依赖固定断点而是结合屏幕方向与最小边长更符合真实使用场景。 这种“情境感知布局”比单纯按设备类型划分更智能。四、核心组件深度剖析1.Task与NearbyDevice领域模型定义classTask{finalStringid;finalStringtitle;finalStringdescription;finalIconDataicon;lateTaskStatusstatus;}Task是有状态的业务对象其status会随用户操作变化NearbyDevice包含isTrusted字段模拟 OpenHarmony 的设备认证机制——只有可信设备才能接收任务。 这些类构成了页面的数据骨架UI 完全由它们驱动。2. 任务状态机TaskStatus与状态流转enumTaskStatus{active,pushed,received,completed}active任务在当前设备运行pushed已发出推送请求received目标设备确认接收completed任务在目标设备完成。状态流转通过_pushTaskTo方法模拟可信设备active → pushed → received → completed不可信设备active → pushed → active回滚。✅ 这种状态机设计为未来接入真实分布式 API 提供了清晰接口。3. 响应式布局实现_buildSingleColumnLayoutvs_buildDualPaneLayout单列布局使用ListView.builder每个任务项包含卡片 设备选择器双栏布局使用RowExpanded左侧固定任务列表右侧动态生成“任务→设备”映射VerticalDivider提供视觉分隔增强信息分区。 布局切换无动画过渡为简化但可通过AnimatedSwitcher优化。4. 交互控件ActionChip的巧妙运用ActionChip(label:Text(device.name),avatar:_getDeviceIcon(device.type),onPressed:isDisabled?null:()_pushTaskTo(task,device),backgroundColor:device.isTrusted?Colors.blue.shade50:Colors.red.shade50,)ActionChip比Button更轻量适合多选项场景图标 文字快速识别设备类型背景色区分可信度蓝色可信红色不可信禁用状态当任务非 active 时所有芯片置灰不可点。✅ 这种设计让用户一眼识别可操作项与风险项。5. 状态反馈颜色编码与文本提示({Colorcolor,Stringtext})_getStatusInfo(TaskStatusstatus){switch(status){caseTaskStatus.active:return(color:Colors.blue,text:进行中);// ...}}蓝色进行中主操作色橙色已推送等待中紫色接收中跨设备同步绿色已完成成功状态。颜色心理学在此得到应用用户无需阅读文字仅凭颜色即可理解状态。五、工程价值与扩展性1. 易于对接 OpenHarmony 分布式能力将_pushTaskTo中的Future.delayed替换为finalresultawaitMethodChannel(ohos/distributed_task).invokeMethod(pushTask,{taskId:task.id,targetDeviceId:device.id},);监听分布式回调更新Task.status。2. 支持任务历史与撤销新增TaskHistoryPage展示已完成任务在pushed状态下提供“取消推送”按钮。3. 多任务并发处理当前一次只处理一个任务可扩展为支持批量推送使用Future.wait并行推送至多个设备。4. 安全与权限提示对不可信设备点击时弹出授权对话框集成 OpenHarmony 权限管理 API。六、用户体验思考1. 降低认知负荷用户无需理解“分布式软总线”等技术概念通过“推送至设备”这一动作直观表达任务流转意图。2. 提供即时反馈点击后立即变色pushed告知操作已受理模拟进度received→completed减少等待焦虑。3. 防错设计不可信设备用红色背景警示非 active 任务自动禁用操作防止误触。七、结语协同是未来的 UI 范式本文构建的「跨设备任务协同中心」超越了传统单设备 UI 的局限进入了“多设备协同”的新维度。它不仅是 OpenHarmony 分布式能力的前端体现更是对未来人机交互方式的一次探索。在万物互联的时代应用不再是孤立的程序而是流动的服务。作为开发者我们有责任设计出能清晰表达这种流动性的界面。欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net/在这里您将获得OpenHarmony 分布式任务开发指南Flutter 跨设备状态同步最佳实践实战项目模板与社区支持。让我们携手打造真正无缝的超级终端体验