Flutter for OpenHarmony 实战：计算器

在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。

催生班主任

15人浏览 · 2026-02-07 23:03:33

催生班主任 · 2026-02-07 23:03:33 发布

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

前言：跨生态开发的新机遇

在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。

Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。将现有的Flutter应用适配到鸿蒙，听起来像是一个“跨界”任务，但它本质上是一次有价值的技术拓展：让产品触达更多用户，也让技术栈覆盖更广。

不过，这条路走起来并不像听起来那么简单。Flutter和鸿蒙，从底层的架构到上层的工具链，都有着各自的设计逻辑。会遇到一些具体的问题：代码如何组织？原有的功能在鸿蒙上如何实现？那些平台特有的能力该怎么调用？更实际的是，从编译打包到上架部署，整个流程都需要重新摸索。
这篇文章想做的，就是把这些我们趟过的路、踩过的坑，清晰地摊开给你看。我们不会只停留在“怎么做”，还会聊到“为什么得这么做”，以及“如果出了问题该往哪想”。这更像是一份实战笔记，源自真实的项目经验，聚焦于那些真正卡住过我们的环节。

无论你是在为一个成熟产品寻找新的落地平台，还是从一开始就希望构建能面向多端的应用，这里的思路和解决方案都能提供直接的参考。理解了两套体系之间的异同，掌握了关键的衔接技术，不仅能完成这次迁移，更能积累起应对未来技术变化的能力。

混合工程结构深度解析

项目目录架构

当Flutter项目集成鸿蒙支持后，典型的项目结构会发生显著变化。以下是经过ohos_flutter插件初始化后的项目结构：

my_flutter_harmony_app/
├── lib/                          # Flutter业务代码（基本不变）
│   ├── main.dart                 # 应用入口
│   ├── home_page.dart           # 首页
│   └── utils/
│       └── platform_utils.dart  # 平台工具类
├── pubspec.yaml                  # Flutter依赖配置
├── ohos/                         # 鸿蒙原生层（核心适配区）
│   ├── entry/                    # 主模块
│   │   └── src/main/
│   │       ├── ets/              # ArkTS代码
│   │       │   ├── MainAbility/
│   │       │   │   ├── MainAbility.ts       # 主Ability
│   │       │   │   └── MainAbilityContext.ts
│   │       │   └── pages/
│   │       │       ├── Index.ets           # 主页面
│   │       │       └── Splash.ets          # 启动页
│   │       ├── resources/        # 鸿蒙资源文件
│   │       │   ├── base/
│   │       │   │   ├── element/  # 字符串等
│   │       │   │   ├── media/    # 图片资源
│   │       │   │   └── profile/  # 配置文件
│   │       │   └── en_US/        # 英文资源
│   │       └── config.json       # 应用核心配置
│   ├── ohos_test/               # 测试模块
│   ├── build-profile.json5      # 构建配置
│   └── oh-package.json5         # 鸿蒙依赖管理
└── README.md

展示效果图片

flutter 实时预览效果展示
在这里插入图片描述

运行到鸿蒙虚拟设备中效果展示
在这里插入图片描述

功能代码实现

CalculatorComponent 组件开发实现

核心功能

CalculatorComponent 是一个功能完整的计算器组件，包含以下核心功能：

数字输入功能，支持0-9和小数点输入
基本运算功能，支持加、减、乘、除运算
清除功能，一键清空所有输入和计算状态
等号计算功能，执行运算并显示结果
美观的布局和交互效果

开发实现详解

1. 组件结构设计

首先，我们创建了一个独立的 CalculatorComponent 组件，采用 StatefulWidget 实现，因为计算器需要管理多个状态变量：

import 'package:flutter/material.dart';

class CalculatorComponent extends StatefulWidget {
  const CalculatorComponent({super.key});

  @override
  State<CalculatorComponent> createState() => _CalculatorComponentState();
}

class _CalculatorComponentState extends State<CalculatorComponent> {
  String _displayText = '0';
  double _firstOperand = 0;
  double _secondOperand = 0;
  String _operator = '';
  bool _isOperatorPressed = false;
  bool _isCalculated = false;
  
  // 核心方法实现
  // ...
}

开发要点：

使用 StatefulWidget 管理计算器状态，确保 UI 能实时响应输入和计算操作
维护多个状态变量，包括显示文本、操作数、运算符和计算状态
合理的状态管理是实现流畅计算体验的关键

2. 核心方法实现

2.1 数字输入处理

void _onNumberPressed(String number) {
  setState(() {
    if (_isOperatorPressed || _isCalculated || _displayText == '0') {
      _displayText = number;
      _isOperatorPressed = false;
      _isCalculated = false;
    } else {
      _displayText += number;
    }
  });
}

开发要点：

处理首次输入、运算符后输入和计算后输入的情况
确保输入的数字能正确显示在屏幕上

2.2 运算符处理

void _onOperatorPressed(String operator) {
  setState(() {
    if (_operator.isEmpty) {
      _firstOperand = double.parse(_displayText);
    } else if (!_isOperatorPressed) {
      _secondOperand = double.parse(_displayText);
      _firstOperand = _calculateResult();
      _displayText = _firstOperand.toString();
    }
    _operator = operator;
    _isOperatorPressed = true;
    _isCalculated = false;
  });
}

开发要点：

支持连续运算，如 2 + 3 * 4
在运算符按下时，处理前一次运算结果

2.3 等号计算

void _onEqualPressed() {
  setState(() {
    if (_operator.isNotEmpty && !_isCalculated) {
      _secondOperand = double.parse(_displayText);
      double result = _calculateResult();
      _displayText = result.toString();
      _firstOperand = result;
      _isCalculated = true;
      _isOperatorPressed = false;
    }
  });
}

开发要点：

执行最终计算并显示结果
处理计算后的状态，确保后续操作的正确性

2.4 清除功能

void _onClearPressed() {
  setState(() {
    _displayText = '0';
    _firstOperand = 0;
    _secondOperand = 0;
    _operator = '';
    _isOperatorPressed = false;
    _isCalculated = false;
  });
}

开发要点：

重置所有状态变量，回到初始状态
确保清除操作的完整性

2.5 计算逻辑

double _calculateResult() {
  switch (_operator) {
    case '+':
      return _firstOperand + _secondOperand;
    case '-':
      return _firstOperand - _secondOperand;
    case '×':
      return _firstOperand * _secondOperand;
    case '÷':
      return _firstOperand / _secondOperand;
    default:
      return _firstOperand;
  }
}

开发要点：

实现基本的四则运算
处理运算符的不同情况

3. UI 布局实现

3.1 按钮构建

Widget _buildButton(String text, {Color? color, Color? textColor}) {
  return Expanded(
    child: Container(
      margin: const EdgeInsets.all(4),
      child: InkWell(
        onTap: () {
          if (text == 'C') {
            _onClearPressed();
          } else if (text == '=') {
            _onEqualPressed();
          } else if ('+-×÷'.contains(text)) {
            _onOperatorPressed(text);
          } else {
            _onNumberPressed(text);
          }
        },
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 20),
          decoration: BoxDecoration(
            color: color ?? Colors.grey.shade100,
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withAlpha(51),
                spreadRadius: 1,
                blurRadius: 2,
                offset: const Offset(0, 1),
              ),
            ],
          ),
          child: Text(
            text,
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: textColor ?? Colors.black,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    ),
  );
}

开发要点：

使用 InkWell 实现按钮的点击效果
为不同类型的按钮设置不同的样式
处理按钮的点击事件，调用相应的处理方法

3.2 整体布局

@override
Widget build(BuildContext context) {
  return Container(
    padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withAlpha(51),
          spreadRadius: 2,
          blurRadius: 5,
          offset: const Offset(0, 2),
        ),
      ],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // 显示区域
        Container(
          padding: const EdgeInsets.all(16),
          margin: const EdgeInsets.only(bottom: 16),
          decoration: BoxDecoration(
            color: Colors.grey.shade50,
            borderRadius: BorderRadius.circular(8),
            border: Border.all(
              color: Colors.grey.withAlpha(77),
              width: 1,
            ),
          ),
          child: Text(
            _displayText,
            style: const TextStyle(
              fontSize: 32,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
            textAlign: TextAlign.right,
            overflow: TextOverflow.ellipsis,
          ),
        ),

        // 按钮区域
        Column(
          children: [
            // 第一行
            Row(
              children: [
                _buildButton('C', color: Colors.red.shade100, textColor: Colors.red),
                _buildButton('±', color: Colors.grey.shade200),
                _buildButton('%', color: Colors.grey.shade200),
                _buildButton('÷', color: Colors.blue.shade100, textColor: Colors.blue),
              ],
            ),

            // 第二行
            Row(
              children: [
                _buildButton('7'),
                _buildButton('8'),
                _buildButton('9'),
                _buildButton('×', color: Colors.blue.shade100, textColor: Colors.blue),
              ],
            ),

            // 第三行
            Row(
              children: [
                _buildButton('4'),
                _buildButton('5'),
                _buildButton('6'),
                _buildButton('-', color: Colors.blue.shade100, textColor: Colors.blue),
              ],
            ),

            // 第四行
            Row(
              children: [
                _buildButton('1'),
                _buildButton('2'),
                _buildButton('3'),
                _buildButton('+', color: Colors.blue.shade100, textColor: Colors.blue),
              ],
            ),

            // 第五行
            Row(
              children: [
                Expanded(
                  flex: 2,
                  child: Container(
                    margin: const EdgeInsets.all(4),
                    child: InkWell(
                      onTap: () => _onNumberPressed('0'),
                      child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 20),
                        decoration: BoxDecoration(
                          color: Colors.grey.shade100,
                          borderRadius: BorderRadius.circular(8),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.withAlpha(51),
                              spreadRadius: 1,
                              blurRadius: 2,
                              offset: const Offset(0, 1),
                            ),
                          ],
                        ),
                        child: const Text(
                          '0',
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: Colors.black,
                          ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ),
                ),
                _buildButton('.'),
                _buildButton('=', color: Colors.blue, textColor: Colors.white),
              ],
            ),
          ],
        ),
      ],
    ),
  );
}

开发要点：

使用 Container 和 BoxDecoration 创建美观的布局
使用 Row 和 Column 实现按钮的网格布局
为不同类型的按钮设置不同的样式和颜色
确保布局的响应式，适配不同屏幕尺寸

组件集成与使用

在主页面中导入并使用 CalculatorComponent 组件：

import 'package:flutter/material.dart';
import 'components/calculator.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.deepPurple,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: <Widget>[
            const CalculatorComponent(),
          ],
        ),
      ),
    );
  }
}