一、前言

随着移动应用开发技术的不断发展，跨平台开发已经成为一种趋势。鸿蒙系统作为华为推出的全场景分布式操作系统，具有广阔的应用前景。而Flutter作为Google推出的跨平台UI框架，以其高性能、高保真的UI渲染能力受到了广泛关注。

本项目结合鸿蒙系统和Flutter框架，实现了一个简易的猜数字竞猜游戏。通过这个项目，我们可以学习到如何使用Flutter进行跨平台开发，以及如何将Flutter应用运行在鸿蒙系统上。项目虽然简单，但涵盖了Flutter开发的核心知识点，适合初学者学习和参考。

二、效果展示

三、项目结构

本项目采用简洁的结构设计，主要包含以下文件：

guess_number_game/
├── lib/                  # Flutter代码目录
│   └── main.dart         # 主程序入口，包含游戏逻辑和UI
├── pubspec.yaml          # 项目依赖配置文件
└── README.md             # 项目说明文档

核心代码位于lib/main.dart文件中，包含了游戏的所有逻辑和UI实现。

四、核心代码实现

1. 项目配置

在pubspec.yaml文件中，我们需要添加Flutter的依赖：

name: guess_number_game
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0

flutter:
  uses-material-design: true

2. 主程序入口

在main.dart文件中，我们首先导入必要的包，并定义主函数：

import 'dart:math';
import 'package:flutter/material.dart';

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

3. 应用根组件

定义应用的根组件GuessNumberGame，设置应用的标题和主题：

/// 猜数字游戏主应用
class GuessNumberGame extends StatelessWidget {
  const GuessNumberGame({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '猜数字游戏',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const GuessNumberPage(),
    );
  }
}

4. 游戏页面组件

定义游戏的主页面组件GuessNumberPage，包含游戏的核心逻辑和UI：

/// 猜数字游戏页面
class GuessNumberPage extends StatefulWidget {
  const GuessNumberPage({super.key});

  @override
  State<GuessNumberPage> createState() => _GuessNumberPageState();
}

class _GuessNumberPageState extends State<GuessNumberPage> {
  // 生成1-100之间的随机数
  final int _targetNumber = Random().nextInt(100) + 1;
  // 猜测次数
  int _guessCount = 0;
  // 用户输入的数字
  String _userInput = '';
  // 提示信息
  String _message = '请输入1-100之间的数字进行猜测';
  // 输入框控制器
  final TextEditingController _controller = TextEditingController();
  // 是否游戏结束
  bool _isGameOver = false;

  /// 处理用户猜测
  void _handleGuess() {
    // 检查输入是否为空或不是数字
    if (_userInput.isEmpty || int.tryParse(_userInput) == null) {
      setState(() {
        _message = '请输入有效的数字';
      });
      return;
    }

    final int guess = int.parse(_userInput);
    setState(() {
      _guessCount++;

      if (guess < _targetNumber) {
        _message = '第$_guessCount次猜测：$guess，猜小了！';
      } else if (guess > _targetNumber) {
        _message = '第$_guessCount次猜测：$guess，猜大了！';
      } else {
        _message = '恭喜你！第$_guessCount次猜测就猜中了，答案是$_targetNumber';
        _isGameOver = true;
      }
    });

    // 清空输入框
    _controller.clear();
  }

  /// 重新开始游戏
  void _restartGame() {
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => const GuessNumberPage()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('鸿蒙+Flutter 猜数字游戏'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 游戏标题
              const Text(
                '猜数字游戏',
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 20),
              
              // 游戏规则
              const Text(
                '游戏规则：\n1. 系统随机生成1-100之间的数字\n2. 你需要猜测这个数字\n3. 系统会提示你猜大了还是猜小了\n4. 看看你需要多少次才能猜中',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
              const SizedBox(height: 30),
              
              // 提示信息
              Text(
                _message,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: _isGameOver ? Colors.green : Colors.black,
                ),
              ),
              const SizedBox(height: 30),
              
              // 输入框和按钮
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                    width: 150,
                    child: TextField(
                      controller: _controller,
                      keyboardType: TextInputType.number,
                      enabled: !_isGameOver,
                      onChanged: (value) {
                        setState(() {
                          _userInput = value;
                        });
                      },
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: '输入猜测的数字',
                      ),
                    ),
                  ),
                  const SizedBox(width: 10),
                  ElevatedButton(
                    onPressed: _isGameOver ? _restartGame : _handleGuess,
                    child: Text(_isGameOver ? '重新开始' : '猜测'),
                  ),
                ],
              ),
              const SizedBox(height: 30),
              
              // 技术栈信息
              const Text(
                '技术栈：鸿蒙+Flutter 跨平台开发',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.grey,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

五、运行环境

1. 环境要求

• Flutter SDK：3.0.0及以上版本
• Dart SDK：3.0.0及以上版本
• 鸿蒙开发环境：DevEco Studio 3.0及以上版本
• Android开发环境：Android Studio 4.0及以上版本（可选，用于Android平台测试）
• iOS开发环境：Xcode 12.0及以上版本（可选，用于iOS平台测试）

2. 依赖安装

在项目根目录下运行以下命令，安装项目依赖：

flutter pub get

3. 运行步骤

1. 连接设备：将鸿蒙设备或模拟器连接到电脑
2. 运行应用：在项目根目录下运行以下命令启动应用：

   flutter run
   

3. 选择设备：在终端中选择要运行的设备
4. 查看效果：等待应用编译并安装到设备上，查看运行效果

六、遇到的问题

在开发过程中，我们遇到了一些问题，并找到了解决方案：

1. 输入框键盘类型设置

问题：初始开发时，输入框默认弹出的是普通键盘，用户需要手动切换到数字键盘，操作不方便。

解决方案：通过设置TextField的keyboardType属性为TextInputType.number，让输入框默认弹出数字键盘：

TextField(
  keyboardType: TextInputType.number,
  // 其他属性...
)

2. 输入验证

问题：用户可能会输入非数字字符或空字符串，导致程序崩溃。

解决方案：在处理用户输入前，添加输入验证逻辑，检查输入是否为空或不是数字：

if (_userInput.isEmpty || int.tryParse(_userInput) == null) {
  setState(() {
    _message = '请输入有效的数字';
  });
  return;
}

3. 游戏重新开始

问题：初始设计时，重新开始游戏只是重置了状态变量，但随机数没有重新生成，导致用户可以记住上次的答案。

解决方案：通过Navigator.pushReplacement方法重新创建游戏页面，确保随机数重新生成：

void _restartGame() {
  Navigator.pushReplacement(
    context,
    MaterialPageRoute(builder: (context) => const GuessNumberPage()),
  );
}

七、总结

本项目通过鸿蒙+Flutter技术栈实现了一个功能完整、界面美观的猜数字游戏。项目虽然简单，但涵盖了Flutter开发的核心知识点，适合初学者学习和参考。

跨平台开发是未来移动应用开发的趋势，鸿蒙系统和Flutter框架的结合具有广阔的应用前景。希望本项目能够帮助大家更好地了解和学习鸿蒙+Flutter跨平台开发技术，为未来的应用开发打下坚实的基础。

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net