**欢迎加入开源鸿蒙跨平台社区： 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

# 进入项目目录
cd middle_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)

enum Gender { male, female }

class Character {
  String name;
  Gender gender;
  String hairstyle;
  String outfit;
  
  // 角色属性
  int energy;      // 精力值 (0-100)
  int happiness;   // 快乐值 (0-100)
  int grade;       // 学习成绩 (0-100)
  int day;         // 游戏天数
  
  // 统计
  int studyCount;
  int exerciseCount;
  int socialCount;
  
  Character({
    required this.name,
    required this.gender,
    required this.hairstyle,
    required this.outfit,
    this.energy = 80,
    this.happiness = 70,
    this.grade = 60,
    this.day = 1,
    this.studyCount = 0,
    this.exerciseCount = 0,
    this.socialCount = 0,
  });
  
  // 执行学习
  void study() {
    if (energy >= 15) {
      grade = (grade + 5).clamp(0, 100);
      energy = (energy - 15).clamp(0, 100);
      happiness = (happiness - 5).clamp(0, 100);
      studyCount++;
    }
  }
  
  // 执行运动
  void exercise() {
    if (energy >= 10) {
      energy = (energy - 10).clamp(0, 100);
      happiness = (happiness + 5).clamp(0, 100);
      grade = (grade - 2).clamp(0, 100);
      exerciseCount++;
    }
  }
  
  // 休息
  void rest() {
    energy = (energy + 30).clamp(0, 100);
    happiness = (happiness + 5).clamp(0, 100);
  }
  
  // 社交
  void social() {
    if (energy >= 5) {
      happiness = (happiness + 15).clamp(0, 100);
      energy = (energy - 5).clamp(0, 100);
      grade = (grade + 2).clamp(0, 100);
      socialCount++;
    }
  }
  
  // 新的一天
  void newDay() {
    day++;
    energy = (energy + 20).clamp(0, 100);
    happiness = (happiness + 5).clamp(0, 100);
    grade = (grade + 2).clamp(0, 100);
  }
  
  // 检查游戏是否结束
  bool isGameOver() {
    return energy <= 0 || happiness <= 0;
  }
  
  // 获取评价
  String getEvaluation() {
    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';

class StatBar extends StatelessWidget {
  final String label;
  final int value;
  final Color color;
  final IconData icon;
  
  const StatBar({
    super.key,
    required this.label,
    required this.value,
    required this.color,
    required this.icon,
  });
  
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Icon(icon, size: 16, color: color),
            const SizedBox(width: 4),
            Text('$label: $value/100', style: const TextStyle(fontSize: 12)),
          ],
        ),
        const SizedBox(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';

class CharacterAvatar extends StatelessWidget {
  final Character character;
  final double size;
  
  const CharacterAvatar({super.key, required this.character, this.size = 100});
  
  @override
  Widget build(BuildContext context) {
    return Column(
      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),
                  ),
                ),
              ),
            ],
          ),
        ),
        const SizedBox(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';

class GameEvent {
  final String title;
  final String description;
  final void Function(Character) applyEffect;
  
  GameEvent({required this.title, required this.description, required this.applyEffect});
}

class GameEvents {
  static final List<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++;
      },
    ),
  ];
  
  static GameEvent? getRandomEvent() {
    if (DateTime.now().millisecondsSinceEpoch % 10 < 3) {
      return _events[DateTime.now().millisecondsSinceEpoch % _events.length];
    }
    return null;
  }
}

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';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '中学生活模拟器',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const CreateCharacterScreen(),
      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 -d ohos

如下图为实际界面：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下图为利用VS code中编辑以上代码的示例：
在这里插入图片描述
首先必须注意到的一点是要先在安装dart，然后再在utils中新建新的文件夹，接着新建dart源文件，最后接下来的操作按照上面的步骤的一步步来。

注：在DevEco Studio中验证时如果遇到如下问题:hai在这里插入图片描述
一定要记得使用DevEco Studio里的自带的Code Genie帮你修改出现代码。
同时要记得多同步修改后的数据。我希望我的事例能够给大家帮助。

接下来的一篇主要围绕着如何更改APP的名字与图标的过程中遇到的问题以及如何解决的。

💡 提示：本文代码已在 Flutter 3.x + HarmonyOS SDK 5.0 环境下测试通过。如遇到问题，欢迎在评论区交流讨论。

# flutter # 经验分享 # 开源
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

鸿蒙游戏开发的正确分层方式

avatar 人工智能6S服务平台
cover

红细胞代偿性增殖与睡眠剥夺的对照演算引擎：基于鸿蒙Flutter的微观流体力学粒子渲染架构

avatar 人工智能6S服务平台

Flutter集成三方库开发鸿蒙（HarmonyOS）实战案例教程

通过本次实战，你已掌握Flutter+三方库+鸿蒙开发的核心知识点，重点记忆以下内容，为后续开发打下基础：Flutter集成三方库：核心是配置pubspec.yaml文件，执行flutter pub get安装依赖，无需复杂操作。三方库适配鸿蒙：选择Flutter生态中“已适配鸿蒙”的三方库（如本次的dio、flutter_screenutil），无需额外改造，直接使用。鸿蒙适配关键：使用尺寸适配

avatar 人工智能6S服务平台