Flutter + 鸿蒙跨平台开发实战：从零构建中学生生活模拟器（初）

**欢迎加入开源鸿蒙跨平台社区 https://openharmonycrossplatform.csdn.net大家好我接下来将会继续分享关于flutter与鸿蒙跨平台开发中遇到的一些问题以及如何解决的。首先本篇主要是围绕继在完成所有前置操作后进行的要安装Git二是要装JAVA推荐安装JDK 11三是要安装DevEco Studio四是要进行Flutter-OH环境搭建。最后要出现如图然后表示成功安装了。接下来主要围绕着初步完成对一个APP的开发。我要开发的APP是一款名为中学生生活模拟器的游戏。 项目背景我打算开发一款中学生生活模拟的RPG手机游戏玩家可以创建角色、选择性别外貌、管理精力值、快乐值和学业成绩体验中学生活。技术选型为Flutter 鸿蒙HarmonyOS跨平台方案。️ 一、开发环境准备1.1 创建支持鸿蒙的Flutter项目# 创建项目并指定支持鸿蒙平台flutter create--platformsohos,android,ios middle_school_game# 进入项目目录cdmiddle_school_game1.2 项目目录结构middle_school_game/ ├── lib/ # Dart代码主目录 ├── ohos/ # 鸿蒙原生代码目录 ├── android/ # Android原生代码 ├── ios/ # iOS原生代码 └── pubspec.yaml # 依赖配置文件 二、游戏代码实现2.1 创建文件夹结构在lib/下创建以下文件夹lib/ ├── models/ # 数据模型 ├── screens/ # 页面 ├── widgets/ # 组件 └── utils/ # 工具类2.2 角色数据模型 (lib/models/character.dart)enumGender{male,female}classCharacter{Stringname;Gendergender;Stringhairstyle;Stringoutfit;// 角色属性int energy;// 精力值 (0-100)int happiness;// 快乐值 (0-100)int grade;// 学习成绩 (0-100)int day;// 游戏天数// 统计int studyCount;int exerciseCount;int socialCount;Character({requiredthis.name,requiredthis.gender,requiredthis.hairstyle,requiredthis.outfit,this.energy80,this.happiness70,this.grade60,this.day1,this.studyCount0,this.exerciseCount0,this.socialCount0,});// 执行学习voidstudy(){if(energy15){grade(grade5).clamp(0,100);energy(energy-15).clamp(0,100);happiness(happiness-5).clamp(0,100);studyCount;}}// 执行运动voidexercise(){if(energy10){energy(energy-10).clamp(0,100);happiness(happiness5).clamp(0,100);grade(grade-2).clamp(0,100);exerciseCount;}}// 休息voidrest(){energy(energy30).clamp(0,100);happiness(happiness5).clamp(0,100);}// 社交voidsocial(){if(energy5){happiness(happiness15).clamp(0,100);energy(energy-5).clamp(0,100);grade(grade2).clamp(0,100);socialCount;}}// 新的一天voidnewDay(){day;energy(energy20).clamp(0,100);happiness(happiness5).clamp(0,100);grade(grade2).clamp(0,100);}// 检查游戏是否结束boolisGameOver(){returnenergy0||happiness0;}// 获取评价StringgetEvaluation(){if(grade90)return学霸继续加油;if(grade70)return成绩不错保持进步;if(grade50)return还需要努力哦;return要加油学习了;}}2.3 属性条组件 (lib/widgets/stat_bar.dart)importpackage:flutter/material.dart;classStatBarextendsStatelessWidget{finalStringlabel;finalint value;finalColorcolor;finalIconDataicon;constStatBar({super.key,requiredthis.label,requiredthis.value,requiredthis.color,requiredthis.icon,});overrideWidgetbuild(BuildContextcontext){returnColumn(crossAxisAlignment:CrossAxisAlignment.start,children:[Row(children:[Icon(icon,size:16,color:color),constSizedBox(width:4),Text($label:$value/100,style:constTextStyle(fontSize:12)),],),constSizedBox(height:4),ClipRRect(borderRadius:BorderRadius.circular(10),child:LinearProgressIndicator(value:value/100,backgroundColor:Colors.grey[300],color:color,minHeight:8,),),],);}}2.4 角色头像组件 (lib/widgets/character_avatar.dart)importpackage:flutter/material.dart;import../models/character.dart;classCharacterAvatarextendsStatelessWidget{finalCharactercharacter;finaldouble size;constCharacterAvatar({super.key,requiredthis.character,this.size100});overrideWidgetbuild(BuildContextcontext){returnColumn(children:[Container(width:size,height:size,decoration:BoxDecoration(color:Colors.blue[100],shape:BoxShape.circle,border:Border.all(color:Colors.blue,width:3),),child:Stack(children:[Center(child:Icon(character.genderGender.male?Icons.person:Icons.person_outline,size:size*0.6,color:Colors.brown[300],),),Positioned(top:size*0.15,left:size*0.2,right:size*0.2,child:Container(height:size*0.2,decoration:BoxDecoration(color:character.hairstyle黑发?Colors.brown[800]:Colors.yellow[800],borderRadius:BorderRadius.circular(size*0.1),),),),],),),constSizedBox(height:8),Text(character.name,style:TextStyle(fontSize:size*0.18,fontWeight:FontWeight.bold)),Text(${character.gender Gender.male ? 男 : 女} ·${character.hairstyle}·${character.outfit},style:TextStyle(fontSize:size*0.12,color:Colors.grey[600]),),],);}}2.5 随机事件系统 (lib/utils/game_events.dart)import../models/character.dart;classGameEvent{finalStringtitle;finalStringdescription;finalvoidFunction(Character)applyEffect;GameEvent({requiredthis.title,requiredthis.description,requiredthis.applyEffect});}classGameEvents{staticfinalListGameEvent_events[GameEvent(title:期中考试,description:你参加了期中考试成绩还不错,applyEffect:(character){character.grade(character.grade10).clamp(0,100);character.happiness(character.happiness5).clamp(0,100);},),GameEvent(title:运动会,description:参加运动会让你充满活力,applyEffect:(character){character.energy(character.energy15).clamp(0,100);character.happiness(character.happiness10).clamp(0,100);},),GameEvent(title:生病了,description:不小心感冒了需要多休息...,applyEffect:(character){character.energy(character.energy-20).clamp(0,100);character.happiness(character.happiness-10).clamp(0,100);},),GameEvent(title:交到新朋友,description:你认识了一个新朋友很开心,applyEffect:(character){character.happiness(character.happiness20).clamp(0,100);character.socialCount;},),];staticGameEvent?getRandomEvent(){if(DateTime.now().millisecondsSinceEpoch%103){return_events[DateTime.now().millisecondsSinceEpoch%_events.length];}returnnull;}}2.6 角色创建界面 (lib/screens/create_character_screen.dart)由于代码较长核心功能包括输入角色姓名选择性别男生/女生选择发型黑发/金发/短发/长发选择服装校服/运动服/休闲服/时尚装实时预览角色形象2.7 游戏主界面 (lib/screens/game_main_screen.dart)核心功能显示角色属性精力值、快乐值、学习成绩四个行动按钮学习、运动、休息、社交每天结束触发随机事件游戏结束统计importpackage:flutter/material.dart;importscreens/create_character_screen.dart;voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:中学生活模拟器,theme:ThemeData(colorScheme:ColorScheme.fromSeed(seedColor:Colors.blue),useMaterial3:true,),home:constCreateCharacterScreen(),debugShowCheckedModeBanner:false,);}}###2.9添加依赖 在 pubspec.yaml 中添加 yaml dependencies:flutter:sdk:flutter provider:^6.0.5如下图为开机界面 三、完整项目结构middle_school_game/ ├── lib/ │ ├── main.dart │ ├── models/ │ │ └── character.dart │ ├── screens/ │ │ ├── create_character_screen.dart │ │ └── game_main_screen.dart │ ├── widgets/ │ │ ├── stat_bar.dart │ │ └── character_avatar.dart │ └── utils/ │ └── game_events.dart ├── ohos/ │ └── entry/ │ └── src/ │ └── main/ │ ├── module.json5 │ ├── ets/ │ │ └── entryability/ │ │ └── EntryAbility.ets │ └── resources/ │ └── base/ │ ├── element/ │ │ ├── string.json │ │ └── color.json │ ├── media/ │ │ └── app_icon.png │ └── profile/ │ └── main_pages.json ├── android/ ├── ios/ └── pubspec.yaml 六、运行项目# 获取依赖flutter pub get# 运行项目flutter run# 指定鸿蒙设备运行flutter run-dohos如下图为实际界面下图为利用VS code中编辑以上代码的示例首先必须注意到的一点是要先在安装dart然后再在utils中新建新的文件夹接着新建dart源文件最后接下来的操作按照上面的步骤的一步步来。注在DevEco Studio中验证时如果遇到如下问题:hai一定要记得使用DevEco Studio里的自带的Code Genie帮你修改出现代码。同时要记得多同步修改后的数据。我希望我的事例能够给大家帮助。接下来的一篇主要围绕着如何更改APP的名字与图标的过程中遇到的问题以及如何解决的。提示本文代码已在 Flutter 3.x HarmonyOS SDK 5.0 环境下测试通过。如遇到问题欢迎在评论区交流讨论。