全部标签
写点什么
开源架构OpenHarmony算法元宇宙学习方法Web3.0高效工作数据库Python音视频前端AI大数据团队管理程序员运维深度思考低代码redisgolang微服务架构flutter 查看更多

Flutter & 鸿蒙 Next 实现一个计算器应用

作者：淼.
  • 2025-03-14
    北京

  • 本文字数：3047 字

    阅读完需：约 10 分钟

在移动应用开发中，计算器是一个经典的入门项目，它不仅能够帮助开发者熟悉开发工具和语言，还能深入理解 UI 布局和逻辑处理。本文将通过一个简单的计算器应用，展示如何在 Flutter 和鸿蒙 Next 中实现相同的功能，帮助开发者快速上手并对比两种开发框架的异同。

一、Flutter 实现计算器应用

Flutter 是一个跨平台的 UI 开发框架，能够快速构建高性能的移动应用。以下是一个简单的 Flutter 计算器应用的实现步骤和代码。

（一）项目结构

  1. main.dart：入口文件，定义应用的基本结构。

  2. calculator_screen.dart：计算器的主界面，包含数字键盘和显示区域。

  3. calculator_logic.dart：处理计算逻辑。

（二）实现步骤

1. 创建项目

打开终端，运行以下命令创建一个 Flutter 项目：


flutter create flutter_calculatorcd flutter_calculator
复制代码

2. 编写代码

在 lib 文件夹中，创建以下文件和代码：

（1）main.dart
import 'package:flutter/material.dart';import 'calculator_screen.dart';
void main() {  runApp(MyApp());}
class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Calculator',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: CalculatorScreen(),    );  }}
复制代码
（2）calculator_screen.dart
import 'package:flutter/material.dart';import 'calculator_logic.dart';
class CalculatorScreen extends StatefulWidget {  @override  _CalculatorScreenState createState() => _CalculatorScreenState();}
class _CalculatorScreenState extends State<CalculatorScreen> {  final CalculatorLogic _calculatorLogic = CalculatorLogic();  String _display = '0';
  void _onButtonPressed(String value) {    setState(() {      _display = _calculatorLogic.calculate(value);    });  }
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('Flutter Calculator'),      ),      body: Column(        children: [          Expanded(            child: Container(              alignment: Alignment.bottomRight,              padding: EdgeInsets.all(20),              child: Text(                _display,                style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),              ),            ),          ),          GridView.count(            crossAxisCount: 4,            shrinkWrap: true,            children: [              for (var button in [                '7', '8', '9', '/',                '4', '5', '6', '*',                '1', '2', '3', '-',                'C', '0', '=', '+'              ])                ElevatedButton(                  onPressed: () => _onButtonPressed(button),                  child: Text(button),                ),            ],          ),        ],      ),    );  }}
复制代码
（3）calculator_logic.dart
class CalculatorLogic {  String calculate(String button) {    // 简单的逻辑处理    if (button == 'C') {      return '0';    } else if (button == '=') {      // 这里可以添加更复杂的计算逻辑      return 'Result';    } else {      return button;    }  }}
复制代码

（三）运行应用

在终端中运行以下命令启动应用：


flutter run
复制代码


你将看到一个简单的计算器界面，能够输入数字和运算符，并显示结果。


二、鸿蒙 Next 实现计算器应用

鸿蒙 Next 提供了强大的开发工具和组件库，能够快速构建高性能的应用。以下是一个简单的鸿蒙 Next 计算器应用的实现步骤和代码。

（一）项目结构

  1. index.ts：入口文件，定义应用的基本结构。

  2. calculator_screen.ts：计算器的主界面，包含数字键盘和显示区域。

  3. calculator_logic.ts：处理计算逻辑。

（二）实现步骤

1. 创建项目

打开 DevEco Studio，创建一个新的鸿蒙 Next 项目。

2. 编写代码

在项目中，创建以下文件和代码：

（1）index.ts
import { Component } from '@ohos.arkui';import CalculatorScreen from './calculator_screen';
@Componentstruct MyApp {  build() {    CalculatorScreen()  }}
export default MyApp;
复制代码
（2）calculator_screen.ts
import { Component, State } from '@ohos.arkui';import CalculatorLogic from './calculator_logic';
@Componentstruct CalculatorScreen {  @State display: string = '0';  private calculatorLogic: CalculatorLogic = new CalculatorLogic();
  private onButtonPressed(button: string) {    this.display = this.calculatorLogic.calculate(button);  }
  build() {    Column() {      Text(this.display)        .fontSize(48)        .fontWeight(FontWeight.Bold)        .textAlign(TextAlign.Right)        .padding({ left: 20, right: 20, bottom: 20 })
      Grid() {        for (let button of [          '7', '8', '9', '/',          '4', '5', '6', '*',          '1', '2', '3', '-',          'C', '0', '=', '+'        ]) {          Button(button)            .onClick(() => this.onButtonPressed(button))        }      }      .columnsTemplate({ 'repeat': [4, '1fr'] })      .rowsTemplate({ 'repeat': [4, '1fr'] })      .gap(10)      .padding(20)    }    .alignItems(Alignment.End)    .padding(20)  }}
export default CalculatorScreen;
复制代码
（3）calculator_logic.ts
export default class CalculatorLogic {  calculate(button: string): string {    if (button === 'C') {      return '0';    } else if (button === '=') {      return 'Result';    } else {      return button;    }  }}
复制代码

（三）运行应用

在 DevEco Studio 中，点击运行按钮启动应用。你将看到一个简单的计算器界面，能够输入数字和运算符，并显示结果。


三、Flutter 与鸿蒙 Next 的对比

（一）开发语言

  • Flutter：使用 Dart 语言，语法简洁，性能高效。

  • 鸿蒙 Next：使用 TypeScript 或 JavaScript，更接近 Web 开发。

（二）布局方式

  • Flutter：使用 Row、Column、GridView 等组件，布局方式灵活。

  • 鸿蒙 Next：使用 Grid、Flex 等组件，布局方式更接近 CSS Flexbox。

（三）性能

  • Flutter：通过 Skia 渲染引擎，性能出色，适合高性能需求的应用。

  • 鸿蒙 Next：基于 HarmonyOS 的渲染引擎，性能优化针对多设备场景。

（四）生态支持

  • Flutter：拥有丰富的插件和社区支持，适合跨平台开发。

  • 鸿蒙 Next：与 HarmonyOS 生态紧密结合，适合多设备协同开发。


四、总结

通过上述实现，我们可以看到，无论是 Flutter 还是鸿蒙 Next，都能快速开发出功能类似的计算器应用。Flutter 的优势在于其跨平台能力和丰富的生态支持，而鸿蒙 Next 则在多设备协同和分布式场景中表现出色。


开发者可以根据项目需求和目标平台选择合适的开发框架。如果你需要快速开发跨平台应用，Flutter 是一个不错的选择；如果你需要开发多设备协同的应用，鸿蒙 Next 可能更适合。


希望本文能帮助你更好地理解和应用 Flutter 和鸿蒙 Next。如果你有任何问题或需要进一步的帮助，欢迎随时交流！

划线
评论
复制
发布于: 刚刚阅读数: 2
用户头像

淼.

关注

还未添加个人签名 2022-10-24 加入

还未添加个人简介

评论

发布
暂无评论
Copyright © 2025, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号 | 产品资质
Flutter & 鸿蒙 Next 实现一个计算器应用_淼._InfoQ写作社区