【鸿蒙开发实战】鸿蒙计算器应用

1. 代码功能概述

这段代码实现了一个功能完整的鸿蒙计算器应用，展示了ArkTS在复杂交互应用开发中的核心能力。主要功能包括：

- 基础四则运算（加、减、乘、除）

- 高级计算功能（正负号切换、百分比计算）

- 实时显示和历史记录

- 错误处理和边界检查

- 专业的计算器UI设计

2. 代码逻辑分析

整个计算器应用采用"状态驱动UI"的设计模式：

1. 状态初始化：应用启动时初始化显示内容、输入状态、操作符等状态变量

2. 用户输入处理：

   - 数字输入：更新显示内容，处理连续输入

   - 操作符输入：保存当前输入，准备下一次计算

   - 功能键输入：执行清除、正负切换等操作

3. 计算执行：当用户点击等号或新的操作符时，执行相应的数学运算

4. 结果显示：格式化计算结果并更新显示

5. 错误处理：检测除零、数值溢出等异常情况

 3. 代码切片与函数说明

3.1 状态管理模块

@State displayText: string = '0';

@State private currentInput: string = '';

@State private previousInput: string = '';

@State private operator: string = '';

@State private isNewInput: boolean = true;

作用：管理计算器的核心状态

- `displayText`：当前显示的计算结果或输入

- `currentInput`：当前正在输入的数字

- `previousInput`：之前输入的数字（用于二元运算）

- `operator`：当前选择的运算操作符

- `isNewInput`：标识是否开始新的输入

 3.2 布局构建模块

@Builder BuildDisplayArea() {

  Column() {

    Text(this.previousInput + this.operator)  // 历史记录

    Text(this.displayText)                    // 主显示

  }

}

@Builder BuildButtonArea() {

  Column({ space: 12 }) {

    // 多行按钮布局

  }

}

作用：构建计算器的UI界面

- `BuildDisplayArea()`：创建显示区域，包含历史记录和主显示

- `BuildButtonArea()`：创建按钮区域，按功能分组排列按钮

 3.3 可复用按钮组件

作用：创建统一风格的计算器按钮

@Builder CalcButton(text: string, color: string, onClick: () => void, flexWeight: number = 1) {

  Button(text)

    .onClick(onClick)

    .fontColor(text === 'C' ? '000000' : Color.White)

    .backgroundColor(color)

    .borderRadius(50)

    .width(flexWeight === 2 ? '50%' : '20%')

}

- 支持自定义文本、颜色、点击事件和宽度权重

- 特殊处理清除按钮的文字颜色

- 圆形按钮设计，符合现代计算器美学

 3.4 事件处理模块

private onNumberClick(num: string): void {

  if (this.isNewInput) {

    this.displayText = num;

    this.isNewInput = false;

  } else {

    this.displayText = this.displayText === '0' ? num : this.displayText + num;

  }

}

private onOperatorClick(op: string): void {

  if (!this.isNewInput) {

    this.calculate();

  }

  this.operator = op;

  this.previousInput = this.displayText;

  this.isNewInput = true;

}

作用：处理用户的各种交互操作

- `onNumberClick()`：处理数字输入，区分新输入和连续输入

- `onOperatorClick()`：处理操作符输入，自动执行之前的计算

- `onEqualsClick()`：执行计算并重置状态

- `onClearClick()`：重置所有状态

 3.5 核心计算模块

private calculate(): void {

  const prev = parseFloat(this.previousInput);

  const current = parseFloat(this.displayText);

  let result = 0;

  switch (this.operator) {

    case '+': result = prev + current; break;

    case '×': result = prev * current; break;

    case '÷': result = current !== 0 ? prev / current : 0; break;

  }

  this.displayText = this.formatResult(result);

}

作用：执行数学运算和结果处理

- 支持四则运算

- 包含除零保护

- 调用格式化函数处理显示

想入门鸿蒙开发又怕花冤枉钱?别错过!现在能免费系统学 -- 从 ArkTS 面向对象核心的类和对象、继承多态，到吃透鸿蒙开发关键技能，还能冲刺鸿蒙基础 +高级开发者证书，更惊喜的是考证成功还送好礼!快加入我的鸿蒙班，一起从入门到精通，班级链接:点击免费进入