企业官网建设流程全解析

Flutter for OpenHarmony 实战：独木桥问题模拟系统完整开发指南

摘要

独木桥问题是经典的并发同步问题，展示了资源互斥访问的场景。本文将详细介绍如何使用Flutter for OpenHarmony框架开发一款独木桥问题模拟系统。文章涵盖了人物数据模型、桥状态管理、异步队列处理、Future延迟模拟等核心技术点。通过本文学习，读者将掌握Flutter在鸿蒙平台上的异步编程技巧，了解并发模拟与资源管理的实现方法。

一、项目背景与功能概述

1.1 独木桥问题背景

独木桥问题是操作系统中的经典同步问题：

• 南侧和北侧各有若干人要过桥
• 桥一次只能容纳一个人
• 需要保证所有人安全过桥
• 展示了互斥锁和队列管理的概念

1.2 应用功能规划

1.3 人物参数设计

二、独木桥问题规则

2.1 桥的约束条件

桥是一个共享资源，具有以下约束：

• 桥一次只能容纳一个人
• 同一时刻只能有一人过桥
• 其他人必须等待桥空闲

2.2 过桥流程

2.3 人物分布

三、技术选型与架构设计

3.1 核心技术栈

UI组件

• ListView：显示人员列表
• Card：人员卡片展示
• SnackBar：完成提示

状态管理

• StatefulWidget管理模拟状态
• setState更新UI

异步处理

• Future.delayed：模拟过桥时间
• async/await：异步队列处理

3.2 应用架构

BridgeCrossingApp (应用根组件) └── BridgeCrossingPage (模拟页面) ├── AppBar (导航栏 + 进度显示) ├── 控制面板 │ ├── 开始按钮 │ └── 重置按钮 ├── 桥状态显示 │ ├── 空闲状态 │ └── 占用状态 └── 人员列表 └── PersonCard (17个)

3.3 数据流设计

四、数据模型设计

4.1 人物类定义

classPerson{finalStringid;// 唯一标识finalStringname;// 显示名称finalStringside;// 'south' 或 'north'bool isOnBridge;// 是否在桥上bool hasCrossed;// 是否已过桥int crossingSpeed;// 过桥速度（毫秒）Person({requiredthis.id,requiredthis.name,requiredthis.side,this.isOnBridge=false,this.hasCrossed=false,this.crossingSpeed=1000,});Colorgetcolor=>side=='south'?Colors.blue:Colors.orange;}

4.2 桥状态枚举

enumBridgeStatus{idle,// 空闲occupied,// 被占用}

4.3 人物初始化

void_initializePeople(){_people.clear();// 南侧9人for(int i=1;i<=9;i++){_people.add(Person(id:'S$i',name:'南$i',side:'south',crossingSpeed:1000+(i*200),// 不同速度));}// 北侧8人for(int i=1;i<=8;i++){_people.add(Person(id:'N$i',name:'北$i',side:'north',crossingSpeed:1000+(i*150),// 不同速度));}setState((){_crossedCount=0;_hasStarted=false;});}

五、UI界面实现

5.1 控制面板

Container(padding:constEdgeInsets.all(16),color:Colors.teal.shade50,child:Row(children:[ElevatedButton.icon(onPressed:_hasStarted?null:_startSimulation,icon:constIcon(Icons.play_arrow),label:constText('开始模拟'),style:ElevatedButton.styleFrom(backgroundColor:Colors.green,foregroundColor:Colors.white,),),constSizedBox(width:12),ElevatedButton.icon(onPressed:_resetSimulation,icon:constIcon(Icons.refresh),label:constText('重置'),style:ElevatedButton.styleFrom(backgroundColor:Colors.grey,),),],),)

5.2 桥状态显示

Container(padding:constEdgeInsets.all(16),color:Colors.grey.shade100,child:Row(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(_bridgeStatus==BridgeStatus.occupied?Icons.block:Icons.check_circle,color:_bridgeStatus==BridgeStatus.occupied?Colors.red:Colors.green,),constSizedBox(width:8),Text(_bridgeStatus==BridgeStatus.occupied?'桥被占用：${_currentCrosser?.name}正在过桥':'桥空闲',style:constTextStyle(fontSize:16,fontWeight:FontWeight.bold),),],),)

5.3 人员卡片

Widget_buildPersonCard(Personperson){StringstatusText;ColorstatusColor;if(person.isOnBridge){statusText='正在过桥...';statusColor=Colors.orange;}elseif(person.hasCrossed){statusText='已过桥 ✓';statusColor=Colors.green;}else{statusText='等待中';statusColor=Colors.grey;}returnCard(margin:constEdgeInsets.only(bottom:8),child:ListTile(leading:CircleAvatar(backgroundColor:person.color,child:Text(person.name.substring(1),style:constTextStyle(color:Colors.white,fontWeight:FontWeight.bold,),),),title:Text(person.name,style:constTextStyle(fontWeight:FontWeight.bold),),subtitle:Text('速度:${person.crossingSpeed}ms'),trailing:Container(padding:constEdgeInsets.symmetric(horizontal:12,vertical:6),decoration:BoxDecoration(color:statusColor,borderRadius:BorderRadius.circular(12),),child:Text(statusText,style:constTextStyle(color:Colors.white,fontWeight:FontWeight.bold,),),),),);}

六、异步队列处理

6.1 开始模拟

void_startSimulation(){if(_hasStarted)return;setState((){_hasStarted=true;});_processQueue();}

6.2 队列处理核心

void_processQueue()async{// 按顺序过桥for(varpersonin_people){if(!person.hasCrossed){await_crossBridge(person);setState((){_crossedCount++;});// 滚动到底部if(_scrollController.hasClients){_scrollController.animateTo(_scrollController.position.maxScrollExtent,duration:constDuration(milliseconds:300),curve:Curves.easeInOut,);}}}// 全部完成if(mounted){setState((){_bridgeStatus=BridgeStatus.idle;});ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('所有人都已安全过桥！'),backgroundColor:Colors.green,),);}}

算法要点

• 使用async/await实现异步顺序处理
• await确保每个人完成后才开始下一个
• mounted检查避免内存泄漏
• 自动滚动跟踪当前过桥人

6.3 过桥模拟

Future<void>_crossBridge(Personperson)async{setState((){_bridgeStatus=BridgeStatus.occupied;_currentCrosser=person;person.isOnBridge=true;});// 模拟过桥时间awaitFuture.delayed(Duration(milliseconds:person.crossingSpeed));if(mounted){setState((){person.isOnBridge=false;person.hasCrossed=true;_bridgeStatus=BridgeStatus.idle;_currentCrosser=null;});}}

异步处理要点

• Future.delayed模拟时间消耗
• 多次setState更新不同状态
• mounted检查确保组件存在

6.4 重置模拟

void_resetSimulation(){setState((){_hasStarted=false;_bridgeStatus=BridgeStatus.idle;_currentCrosser=null;_crossedCount=0;for(varpersonin_people){person.isOnBridge=false;person.hasCrossed=false;}});_initializePeople();}

七、完整代码实现

7.1 应用入口

voidmain(){runApp(constBridgeCrossingApp());}classBridgeCrossingAppextendsStatelessWidget{constBridgeCrossingApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'独木桥问题',theme:ThemeData(colorScheme:ColorScheme.fromSeed(seedColor:Colors.teal),useMaterial3:true,),home:constBridgeCrossingPage(),);}}

7.2 状态管理

class_BridgeCrossingPageStateextendsState<BridgeCrossingPage>{finalList<Person>_people=[];BridgeStatus_bridgeStatus=BridgeStatus.idle;Person?_currentCrosser;int _crossedCount=0;finalScrollController_scrollController=ScrollController();bool _hasStarted=false;@overridevoidinitState(){super.initState();_initializePeople();}@overridevoiddispose(){_scrollController.dispose();super.dispose();}}

7.3 AppBar设计

AppBar(title:constText('独木桥问题'),backgroundColor:Theme.of(context).colorScheme.inversePrimary,actions:[Center(child:Padding(padding:constEdgeInsets.only(right:16),child:Text('已过桥:$_crossedCount/17',style:constTextStyle(fontSize:16,fontWeight:FontWeight.bold),),),),],)

八、运行效果与测试

8.1 项目运行命令

cdE:\HarmonyOS\oh.code\bridge_crossing flutter run -d ohos

8.2 功能测试清单

初始化测试

• 南侧显示9人（蓝色）
• 北侧显示8人（橙色）
• 所有人状态为"等待中"

模拟流程测试

• 点击"开始模拟"后按钮禁用
• 第一人上桥，状态变为"正在过桥"
• 桥状态显示"被占用"
• 过桥完成后状态变为"已过桥"
• 自动开始下一人

状态显示测试

• 桥状态实时更新
• 当前过桥人正确显示
• 已过桥计数准确

重置功能测试

• 点击"重置"恢复初始状态
• 所有进度清零
• 可重新开始模拟

完成提示测试

• 17人全部过桥后显示提示
• 提示内容：“所有人都已安全过桥！”

九、总结

本文详细介绍了使用Flutter for OpenHarmony开发独木桥问题模拟系统的完整过程，涵盖了以下核心技术点：

1. 数据模型：Person类、桥状态枚举、多属性管理
2. 状态管理：桥状态、人物状态、进度统计
3. 异步编程：Future.delayed、async/await、队列处理
4. UI设计：ListView、Card、状态指示器
5. 用户交互：开始/重置控制、自动滚动
6. 资源管理：ScrollController生命周期

这个项目展示了Flutter在并发模拟和异步编程方面的完整流程。读者可以基于此项目添加更多功能，如：

• 双向过桥（南北对开）
• 优先级队列
• 并行模拟多座桥
• 性能统计与分析

通过本文的学习，读者应该能够理解异步编程的基本概念，掌握Flutter在鸿蒙平台上的异步处理技巧，为开发更复杂的并发应用打下基础。

欢迎加入开源鸿蒙跨平台社区: 开源鸿蒙跨平台开发者社区