鸿蒙应用开发-ArkUI 计算器

一、效果图

        在正式介绍ArkUI计算器应用之前，我们先来一睹其风采。效果图上的计算器界面简洁大方，每个按钮都经过精心设计，颜色搭配恰到好处，使得整体界面既美观又实用。数字、运算符等按钮排列整齐，用户可以一目了然地找到所需的按钮，快速完成计算操作。同时，显示屏部分清晰显示输入的表达式和计算结果，方便用户随时查看。

二、按钮的实现

        要实现计算器中的按钮，我们首先需要使用ArkUI中的Text组件来表示按钮上的文字。每个按钮都是一个独立的个体，因此我们使用Column布局来包裹每个按钮，以便进行统一的样式设置。

        按钮的实现代码已经给出，通过这段代码，我们可以看到如何设置按钮的文字颜色、背景颜色、圆角大小等属性。这些属性的设置对于打造出美观的按钮至关重要。例如，我们选择了合适的颜色搭配，使得按钮在视觉上更加吸引人；同时，设置了较大的圆角，使得按钮呈现出圆润的外观，更加符合现代审美趋势。

代码如下： 

// 使用@Preview装饰器，这通常用于在开发环境中预览组件
@Preview
  // 使用@Component装饰器，表示这是一个ArkUI组件
@Component
export struct CalButton {
  // 定义按钮上显示的数字，默认为'1'
  num: string = '1'
  // 定义按钮的背景颜色，使用十六进制表示，默认为深灰色
  buttonColor: number = 0x333333
  // 定义按钮上文字的颜色，这里使用了Color.White，表示白色
  textColor: number = Color.White
  // 定义文字的大小，默认为40
  textSize: number = 40
  // 定义按钮的宽度，默认为75
  mWidth: number = 75

  build() {
    Column() {
      // 创建一个Text组件，显示按钮上的数字
      Text(`${this.num}`)
        // 设置文字颜色
        .fontColor(this.textColor)
          // 设置文字大小
        .fontSize(this.textSize)
          // 设置文字字体为中等粗细
        .fontWeight(FontWeight.Medium)
    }
    // 设置Column的宽度和高度
    .width(this.mWidth)
    .height(75)
    // 设置背景颜色
    .backgroundColor(this.buttonColor)
    // 设置内容在主轴方向（这里是垂直方向）上居中
    .justifyContent(FlexAlign.Center)
    // 设置边框圆角，使按钮呈现圆形
    .borderRadius(50)
  }
}

 三、计算器页面

        计算器页面的主要组成结构是一行一行的按钮和文本显示区域。这些按钮和文本显示区域都是通过ArkUI中的组件来实现的。我们使用了Row布局来组织每一行的按钮，使得它们能够水平排列；同时，使用了Text组件来显示文本内容，如表达式和计算结果等。

在构建计算器页面时，我们需要注意以下几点：

1. 布局的合理性：按钮和文本显示区域应该布局合理，方便用户操作。例如，数字按钮应该集中在一起，方便用户快速输入；运算符按钮应该放在数字按钮的周围，方便用户进行运算操作。
2. 样式的统一性：按钮和文本显示区域的样式应该保持统一，使得整体界面更加协调。我们可以通过设置相同的背景颜色、边框样式等属性来实现样式的统一性。
3. 响应的及时性：当用户点击按钮或输入文本时，应用应该及时响应并给出反馈。例如，当用户点击数字按钮时，文本显示区域应该及时更新显示的内容；当用户进行运算操作时，应用应该快速计算出结果并显示在文本显示区域中。

import { ExpressionEvaluator } from '../help/CalculateHelper'
import { CalButton } from './CalButton'
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct Index {
  @State result: string = '0' // 最终的结果
  @State cal: string = '' // 计算时的信息 88*88

  build() {
    Column({ space: 10 }) { //主轴方向间隙
      Blank() // 把空隙撑开

      Column() {
        Text(this.result)
          .fontColor(Color.White)
          .fontSize(60)
      }
      .width('100%')
      .alignItems(HorizontalAlign.End)
      .padding({ right: 36 })

      Column() {
        Text(this.cal)
          .fontColor(Color.White)
      }
      .width('100%')
      .alignItems(HorizontalAlign.End)
      .height(15)
      .padding({ right: 36 })

      Row({ space: 10 }) {
        CalButton({
          num: 'AC',
          buttonColor: 0xA5A5A5,
          textColor: Color.Black,
          textSize: 30
        }).onClick(() => {
          this.result = '0' // 归零
          this.cal = '' // 清除用户输入的值
        })

        CalButton({
          num: '+/-',
          buttonColor: 0xA5A5A5,
          textColor: Color.Black,
          textSize: 30
        }).onClick(() => {

        })

        CalButton({
          num: '%',
          buttonColor: 0xA5A5A5,
          textColor: Color.Black,
          textSize: 30
        })

        CalButton({
          num: '÷',
          buttonColor: 0xFF9F0B,
        }).onClick(() => {
          if (this.cal == '' && this.result != '') {
            this.cal = this.result + '/'
          } else {
            this.cal += '/'
          }
        })
      }

      // TODO 7 8 9 ...
      Row({ space: 10 }) {
        CalButton({
          num: '7'
        }).onClick(() => {
          this.cal += '7'
        })

        CalButton({
          num: '8',
        }).onClick(() => {
          this.cal += '8'
        })

        CalButton({
          num: '9',
        }).onClick(() => {
          this.cal += '9'
        })

        CalButton({
          num: 'x',
          buttonColor: 0xFF9F0B,
        }).onClick(() => {
          if (this.cal == '' && this.result != '') {
            this.cal = this.result + '*'
          } else {
            this.cal += '*'
          }
        })
      }

      // TODO 4 5 6 ...
      Row({ space: 10 }) {
        CalButton({
          num: '4'
        }).onClick(() => {
          this.cal += '4'
        })

        CalButton({
          num: '5',
        }).onClick(() => {
          this.cal += '5'
        })

        CalButton({
          num: '6',
        }).onClick(() => {
          this.cal += '6'
        })

        CalButton({
          num: '-',
          buttonColor: 0xFF9F0B,
        }).onClick(() => {
          if (this.cal == '' && this.result != '') {
            this.cal = this.result + '-'
          } else {
            this.cal += '-'
          }
        })
      }

      // TODO 7 8 9 ...
      Row({ space: 10 }) {
        CalButton({
          num: '1'
        }).onClick(() => {
          this.cal += '1'
        })

        CalButton({
          num: '2',
        }).onClick(() => {
          this.cal += '2'
        })

        CalButton({
          num: '3',
        }).onClick(() => {
          this.cal += '3'
        })

        CalButton({
          num: '+',
          buttonColor: 0xFF9F0B,
        }).onClick(() => {
          if (this.cal == '' && this.result != '') {
            this.cal = this.result + '+'
          } else {
            this.cal += '+'
          }
        })
      }

      // TODO 0 . = ...
      Row({ space: 10 }) {
        CalButton({
          num: '0',
          mWidth: 160
        }).onClick(() => {
          this.cal += '0'
        })

        CalButton({
          num: '.',
        }).onClick(() => {
          this.cal += '.'
        })

        CalButton({
          num: '=',
          buttonColor: 0xFF9F0B,
        }).onClick(() => {
          let calHelp = new ExpressionEvaluator()
          let tempResult = `${calHelp.evaluate(this.cal)}`
          this.result = tempResult
          this.cal = ''
        })
      }
      .margin({ bottom: 50 })
    } // 最外层的
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Black)
  }
}