当前位置：首页 > article >正文

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

article 2024/11/8 4:46:22

在本篇文章中，我们将学习如何使用 Flutter 创建一个简单的计算器应用，包含基础的加减乘除运算。我们将逐步讲解计算器界面的构建、逻辑处理、以及如何使用 Flutter 提供的组件来实现该功能。

一、功能需求

我们需要实现以下功能：

用户可以输入数字和操作符（+、-、*、/）。
显示当前的输入和运算结果。
支持基本的加法、减法、乘法和除法运算。
支持清除输入的功能（清空屏幕）。
支持结果显示，并且用户可以继续在结果基础上进行运算。

二、实现思路

界面布局：使用 GridView 布局来组织按钮，模拟计算器的界面。
计算逻辑：使用一个简单的字符串存储用户输入的内容，并通过对输入字符串进行解析来执行相应的计算操作。
状态管理：通过 StatefulWidget 来管理用户输入的状态和计算结果的更新。

三、代码实现

1. 创建 Flutter 项目

首先，我们需要创建一个 Flutter 项目，并打开 lib/main.dart 文件。

2. 编写代码

import 'package:flutter/material.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: Calculator(),
    );
  }
}

class Calculator extends StatefulWidget {
  @override
  _CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State<Calculator> {
  String _output = "0";  // 显示的输出内容
  String _input = "";    // 存储用户输入的表达式

  // 按钮点击处理
  void _onButtonPressed(String value) {
    setState(() {
      if (value == "C") {
        _input = "";   // 清除输入
        _output = "0"; // 重置显示
      } else if (value == "=") {
        try {
          // 计算并显示结果
          _output = _calculateResult();
        } catch (e) {
          _output = "Error";  // 处理错误
        }
      } else {
        // 添加输入字符到表达式
        _input += value;
        _output = _input;
      }
    });
  }

  // 计算表达式的结果
  String _calculateResult() {
    // 使用 Dart 内置的表达式解析器
    final expression = _input.replaceAll("x", "*").replaceAll("÷", "/");
    // 用 Flutter 提供的 `dart:math` 计算表达式的结果
    final result = _parseMathExpression(expression);
    return result.toString();
  }

  // 解析并计算表达式
  double _parseMathExpression(String expression) {
    // 使用 Dart 内置库来执行运算 (这里只是一个简单实现示例)
    // 这里可以集成更复杂的库，或自己手写计算器的解析器。
    return double.parse(expression);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Calculator'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          // 显示输入和输出
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Text(_input, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
                SizedBox(height: 10),
                Text(_output, style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold)),
              ],
            ),
          ),
          // 按钮布局
          GridView.builder(
            shrinkWrap: true,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
            ),
            itemCount: buttonLabels.length,
            itemBuilder: (context, index) {
              return ElevatedButton(
                onPressed: () => _onButtonPressed(buttonLabels[index]),
                child: Text(buttonLabels[index], style: TextStyle(fontSize: 24)),
                style: ButtonStyle(
                  padding: MaterialStateProperty.all(EdgeInsets.all(20)),
                  backgroundColor: MaterialStateProperty.all(Colors.blue),
                ),
              );
            },
          ),
        ],
      ),
    );
  }

  // 计算器的按钮标签
  final List<String> buttonLabels = [
    '7', '8', '9', '/',
    '4', '5', '6', 'x',
    '1', '2', '3', '-',
    'C', '0', '=', '+',
  ];
}

3. 代码详细解释

1. 界面布局

我们使用 Scaffold 来构建界面。主屏幕由两个部分组成：

输入区域：通过 Text 小部件显示用户输入的数学表达式，和运算结果。通过 Padding 控制文本的间距，使其看起来清晰整齐。
按钮区域：使用 GridView.builder 来生成按钮网格。每个按钮通过 ElevatedButton 实现，点击按钮后调用 _onButtonPressed 函数处理相应的输入。

2. 输入和显示

我们使用一个 String _input 变量来存储用户输入的数学表达式，并通过 _output 来显示当前的计算结果。

清除操作：当用户点击 "C" 按钮时，清空 _input 和 _output 变量，重置显示为 0。
计算操作：当用户点击 "=" 按钮时，调用 _calculateResult 函数计算结果，并将计算结果显示在屏幕上。

3. 计算逻辑

_onButtonPressed 方法会根据不同的输入更新 _input 和 _output 的内容。特别地，如果用户点击 "="，会调用 _calculateResult 方法来进行计算。
在 _calculateResult 中，我们会将表达式中的乘法符号 "x" 和除法符号 "÷" 替换为 Dart 可识别的 "*" 和 "/"。
然后，调用一个简单的 _parseMathExpression 方法，实际上这里只是一个简单的 double.parse 示例，您可以根据需要集成一个更强大的数学表达式解析库。