HarmonyOS鸿蒙Next中实现计算器计算功能示例代码

介绍

本示例实现了计算器的计算功能，包括加减乘除四个基本运算，小数计算、百分数计算以及清除结果功能。

实现计算器计算功能源码链接

效果预览

图片名称

使用说明

应用支持加减乘除等基本运算，点击右上角的撤回按钮或者键盘上的’C’，可清除输入的数据，点击键盘上蓝色的删除按钮，可一位一位的删除输入数据。

实现思路

删除数据

先获取输入框内的字符长度，将字符转换为数组。通过.slice方法截取数组，每点击一次删除按钮，数组长度减一，结果框中显示的数据少一位，从而实现一位一位删除数据的效果。核心代码如下，源码参考HomePage.ets.

inputDelete(len: number) {
  if (len === 0) {
    return;
  }
  let last = this.expressions[len - 1];
  let lastLen = last.length;
  if (lastLen === 1) {
    this.expressions.pop();
    len = this.expressions.length;
  } else {
    this.expressions[len - 1] = last.slice(0, last.length - 1);
  }
  if (len === 0) {
    this.inputValue = '';
    this.calValue = '';
    return;
  }
  if (!CalculateUtil.isSymbol(this.expressions[len - 1])) {
    this.getResult();
  }
}

更多关于HarmonyOS鸿蒙Next中实现计算器计算功能示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼•6 天前

在HarmonyOS鸿蒙Next中实现计算器功能的示例代码如下：

import { UIComponent, Text, Button, Row, Column } from '@ohos/ui';

class Calculator extends UIComponent {
  private displayText: Text;
  private currentInput: string = '';
  private operator: string = '';
  private previousInput: string = '';

  constructor() {
    super();
    this.displayText = new Text();
    this.displayText.text = '0';
  }

  private updateDisplay() {
    this.displayText.text = this.currentInput || '0';
  }

  private handleNumberClick(num: string) {
    this.currentInput += num;
    this.updateDisplay();
  }

  private handleOperatorClick(op: string) {
    if (this.currentInput === '') return;
    if (this.previousInput !== '') {
      this.calculate();
    }
    this.operator = op;
    this.previousInput = this.currentInput;
    this.currentInput = '';
  }

  private calculate() {
    const prev = parseFloat(this.previousInput);
    const current = parseFloat(this.currentInput);
    let result = 0;

    switch (this.operator) {
      case '+':
        result = prev + current;
        break;
      case '-':
        result = prev - current;
        break;
      case '*':
        result = prev * current;
        break;
      case '/':
        result = prev / current;
        break;
      default:
        return;
    }

    this.currentInput = result.toString();
    this.previousInput = '';
    this.operator = '';
    this.updateDisplay();
  }

  private handleClear() {
    this.currentInput = '';
    this.previousInput = '';
    this.operator = '';
    this.updateDisplay();
  }

  render() {
    return (
      <Column>
        <Text>{this.displayText}</Text>
        <Row>
          <Button onClick={() => this.handleNumberClick('7')}>7</Button>
          <Button onClick={() => this.handleNumberClick('8')}>8</Button>
          <Button onClick={() => this.handleNumberClick('9')}>9</Button>
          <Button onClick={() => this.handleOperatorClick('/')}>/</Button>
        </Row>
        <Row>
          <Button onClick={() => this.handleNumberClick('4')}>4</Button>
          <Button onClick={() => this.handleNumberClick('5')}>5</Button>
          <Button onClick={() => this.handleNumberClick('6')}>6</Button>
          <Button onClick={() => this.handleOperatorClick('*')}>*</Button>
        </Row>
        <Row>
          <Button onClick={() => this.handleNumberClick('1')}>1</Button>
          <Button onClick={() => this.handleNumberClick('2')}>2</Button>
          <Button onClick={() => this.handleNumberClick('3')}>3</Button>
          <Button onClick={() => this.handleOperatorClick('-')}>-</Button>
        </Row>
        <Row>
          <Button onClick={() => this.handleNumberClick('0')}>0</Button>
          <Button onClick={() => this.handleClear()}>C</Button>
          <Button onClick={() => this.calculate()}>=</Button>
          <Button onClick={() => this.handleOperatorClick('+')}>+</Button>
        </Row>
      </Column>
    );
  }
}

export default Calculator;

这段代码展示了如何在HarmonyOS鸿蒙Next中实现一个简单的计算器功能，包括数字输入、运算符处理和计算结果。

更多关于HarmonyOS鸿蒙Next中实现计算器计算功能示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼•6 天前

在HarmonyOS鸿蒙Next中实现一个简单的计算器功能，可以使用ArkTS编写。以下是一个示例代码：

@Entry
@Component
struct Calculator {
  @State private result: string = '0';
  private currentInput: string = '';
  private operator: string = '';
  private previousInput: string = '';

  private handleInput(value: string) {
    if (value === 'C') {
      this.result = '0';
      this.currentInput = '';
      this.operator = '';
      this.previousInput = '';
    } else if (value === '=') {
      this.calculate();
    } else if (['+', '-', '*', '/'].includes(value)) {
      this.operator = value;
      this.previousInput = this.currentInput;
      this.currentInput = '';
    } else {
      this.currentInput += value;
      this.result = this.currentInput;
    }
  }

  private calculate() {
    const num1 = parseFloat(this.previousInput);
    const num2 = parseFloat(this.currentInput);
    let res = 0;
    switch (this.operator) {
      case '+':
        res = num1 + num2;
        break;
      case '-':
        res = num1 - num2;
        break;
      case '*':
        res = num1 * num2;
        break;
      case '/':
        res = num1 / num2;
        break;
    }
    this.result = res.toString();
    this.currentInput = res.toString();
    this.operator = '';
    this.previousInput = '';
  }

  build() {
    Column() {
      Text(this.result)
        .fontSize(50)
        .margin(20)
      Row() {
        Button('7').onClick(() => this.handleInput('7'))
        Button('8').onClick(() => this.handleInput('8'))
        Button('9').onClick(() => this.handleInput('9'))
        Button('/').onClick(() => this.handleInput('/'))
      }
      Row() {
        Button('4').onClick(() => this.handleInput('4'))
        Button('5').onClick(() => this.handleInput('5'))
        Button('6').onClick(() => this.handleInput('6'))
        Button('*').onClick(() => this.handleInput('*'))
      }
      Row() {
        Button('1').onClick(() => this.handleInput('1'))
        Button('2').onClick(() => this.handleInput('2'))
        Button('3').onClick(() => this.handleInput('3'))
        Button('-').onClick(() => this.handleInput('-'))
      }
      Row() {
        Button('C').onClick(() => this.handleInput('C'))
        Button('0').onClick(() => this.handleInput('0'))
        Button('=').onClick(() => this.handleInput('='))
        Button('+').onClick(() => this.handleInput('+'))
      }
    }
  }
}

这个示例代码实现了一个简单的计算器，支持基本的加减乘除运算，并且可以清除当前输入。用户可以通过点击按钮来输入数字和操作符，点击“=”按钮进行计算。