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

**欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
大家好！我接下来将会继续分享关于flutter与鸿蒙跨平台开发中遇到的一些问题以及如何解决的。
首先本篇主要是围绕继在完成所有前置操作后进行的，要安装Git，二是要装JAVA（推荐安装JDK 11+），三是要安装DevEco Studio，四是要进行Flutter-OH环境搭建。最后要出现如图：
然后表示成功安装了。
接下来主要围绕着初步完成对一个APP的开发。我要开发的APP是一款名为"中学生生活模拟器"的游戏。

📱 项目背景

我打算开发一款中学生生活模拟的RPG手机游戏，玩家可以创建角色、选择性别外貌、管理精力值、快乐值和学业成绩，体验中学生活。技术选型为Flutter + 鸿蒙（HarmonyOS）跨平台方案。

🛠️ 一、开发环境准备

1.1 创建支持鸿蒙的Flutter项目

# 创建项目并指定支持鸿蒙平台flutter create--platforms=ohos,android,ios middle_school_game# 进入项目目录cdmiddle_school_game

1.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.energy=80,this.happiness=70,this.grade=60,this.day=1,this.studyCount=0,this.exerciseCount=0,this.socialCount=0,});// 执行学习voidstudy(){if(energy>=15){grade=(grade+5).clamp(0,100);energy=(energy-15).clamp(0,100);happiness=(happiness-5).clamp(0,100);studyCount++;}}// 执行运动voidexercise(){if(energy>=10){energy=(energy-10).clamp(0,100);happiness=(happiness+5).clamp(0,100);grade=(grade-2).clamp(0,100);exerciseCount++;}}// 休息voidrest(){energy=(energy+30).clamp(0,100);happiness=(happiness+5).clamp(0,100);}// 社交voidsocial(){if(energy>=5){happiness=(happiness+15).clamp(0,100);energy=(energy-5).clamp(0,100);grade=(grade+2).clamp(0,100);socialCount++;}}// 新的一天voidnewDay(){day++;energy=(energy+20).clamp(0,100);happiness=(happiness+5).clamp(0,100);grade=(grade+2).clamp(0,100);}// 检查游戏是否结束boolisGameOver(){returnenergy<=0||happiness<=0;}// 获取评价StringgetEvaluation(){if(grade>=90)return"学霸！继续加油！";if(grade>=70)return"成绩不错，保持进步！";if(grade>=50)return"还需要努力哦";return"要加油学习了！";}}

2.3 属性条组件 (lib/widgets/stat_bar.dart)

import'package: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)

import'package:flutter/material.dart';import'../models/character.dart';classCharacterAvatarextendsStatelessWidget{finalCharactercharacter;finaldouble size;constCharacterAvatar({super.key,requiredthis.character,this.size=100});@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.gender==Gender.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{staticfinalList<GameEvent>_events=[GameEvent(title:'期中考试',description:'你参加了期中考试，成绩还不错！',applyEffect:(character){character.grade=(character.grade+10).clamp(0,100);character.happiness=(character.happiness+5).clamp(0,100);},),GameEvent(title:'运动会',description:'参加运动会让你充满活力！',applyEffect:(character){character.energy=(character.energy+15).clamp(0,100);character.happiness=(character.happiness+10).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.happiness+20).clamp(0,100);character.socialCount++;},),];staticGameEvent?getRandomEvent(){if(DateTime.now().millisecondsSinceEpoch%10<3){return_events[DateTime.now().millisecondsSinceEpoch%_events.length];}returnnull;}}

2.6 角色创建界面 (lib/screens/create_character_screen.dart)

由于代码较长，核心功能包括：

• 输入角色姓名
• 选择性别（男生/女生）
• 选择发型（黑发/金发/短发/长发）
• 选择服装（校服/运动服/休闲服/时尚装）
• 实时预览角色形象

2.7 游戏主界面 (lib/screens/game_main_screen.dart)

核心功能：

• 显示角色属性（精力值、快乐值、学习成绩）
• 四个行动按钮：学习、运动、休息、社交
• 每天结束触发随机事件
• 游戏结束统计
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1a2fd972739146c28f11dd0724cc5ca7.png#pic_center

2.8 应用入口 (lib/main.dart)

import'package:flutter/material.dart';import'screens/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 环境下测试通过。如遇到问题，欢迎在评论区交流讨论。