鸿蒙应用简单计算器代码及演示

@Entry
@Component
struct Index {
  @State result: string[] = ['0']

  setParams(pattern: string) {
    const operators: string = '+-*/.'
    if (this.result.length == 1 && this.result[0] == '0') {
      if ('*/'.includes(pattern)) return
      this.result = [pattern]
    } else {
      const len = this.result.length
      const last = this.result.lastIndexOf('.')
      const slice = this.result.slice(last + 1)
      if (last != -1 && pattern == '.' && /^\d+$/.test(slice.join(''))) return
      if(!(operators.includes(this.result[len-1]) && operators.includes(pattern)))
      {
        this.result.push(pattern)
      }
    }
  }

  calc() {
    let res = 0
    const dd = this.result.join('').match(/[\-\+]?\d+(\.\d+)?([\/\*]\d+(\.?\d+)?)*/g)
    dd.forEach(item => {
      if (/^[\+\-]?\d+(\.\d+)?$/.test(item)) {
        res += +item
      } else {
        let rr = 0
        let isj = false
        let operator: string = "*"
        let rrr = item.match(/[\/\*]|(\d+(\.\d+)?)/g)
        for (let index = 0; index < rrr.length; index++) {
          const element = rrr[index];
          if (element == '-') {
            isj = true
          } else if ('*/'.includes(element)) {
            operator = element
          } else {
            if (rr == 0) {
              rr = +element
              continue
            }
            if (operator == '*') {
              rr *= +element
            } else {
              rr /= +element
            }
          }
          if (isj) {
            rr = 0 - rr
          }
        }
        res += rr
      }

    })
    this.result = [res + '']
  }
  
  
  build() {
    Grid() {
      GridItem() {
        Text(this.result.join(''))
          .padding(10)
          .height('100%')
          .width('100%')
          .fontColor('#000000')
          .textAlign(TextAlign.End)
          .fontSize(50)

      }
      .columnStart(1)
      .columnEnd(4)
      .backgroundColor('#FFC0CB')

      GridItem() {
        Button('CE')
          .type(ButtonType.Normal)
          .height('100%')
          .width('100%')
          .fontColor('#000000')
          .backgroundColor('#FFC0CB')
          .onClick(() => {
            if (this.result.length == 1) {
              if (this.result[0] == '0') return
              this.result = ['0']
              return
            }
            this.result.pop()
          })
      }

      GridItem() {
        Button('C')
          .type(ButtonType.Normal)
          .height('100%')
          .width('100%')
          .fontColor('#000000')
          .backgroundColor('#FFC0CB')
          .onClick(() => {
            this.result = ['0']
          })
      }

      GridItem() {
        Button('/')
          .type(ButtonType.Normal)
          .height('100%')
          .width('100%')
          .fontColor('#000000')
          .backgroundColor('#FFC0CB')
          .onClick(() => {
            this.setParams('/')
          })
      }
      .backgroundColor('#FFC0CB')

      GridItem() {
        Button('*')
          .type(ButtonType.Normal)
          .height('100%')
          .width('100%')
          .fontColor('#000000')
          .backgroundColor('#FFC0CB')
          .onClick(() => {
            this.setParams('*')
          })
      }

      ForEach(['7', '8', '9'], (item: string) => {
        GridItem() {
          Button(item)
            .type(ButtonType.Normal)
            .height('100%')
            .width('100%')
            .fontColor('#000000')
            .backgroundColor('#FFC0CB')
            .onClick(() => {
              this.setParams(item)
            })
        }
      }, item => item)


      GridItem() {
        Button('-')
          .type(ButtonType.Normal)
          .height('100%')
          .width('100%')
          .fontColor('#000000')
          .backgroundColor('#FFC0CB')
          .onClick(() => {
            this.setParams('-')
          })
      }

      ForEach(['4', '5', '6'], (item: string) => {
        GridItem() {
          Button(item)
            .type(ButtonType.Normal)
            .height('100%')
            .width('100%')
            .fontColor('#000000')
            .backgroundColor('#FFC0CB')
            .onClick(() => {
              this.setParams(item)
            })
        }
      }, item => item)

      GridItem() {
        Button('+')
          .type(ButtonType.Normal)
          .height('100%')
          .width('100%')
          .fontColor('#000000')
          .backgroundColor('#FFC0CB')
          .onClick(() => {
            this.setParams('+')
          })
      }

      ForEach(['1', '2', '3'], (item: string) => {
        GridItem() {
          Button(item)
            .type(ButtonType.Normal)
            .height('100%')
            .width('100%')
            .fontColor('#000000')
            .backgroundColor('#FFC0CB')
            .onClick(() => {
              this.setParams(item)
            })
        }
      }, item => item)

      GridItem() {
        Button('=')
          .type(ButtonType.Normal)
          .height('100%')
          .width('100%')
          .fontColor('#000000')
          .backgroundColor('#FFC0CB')
          .onClick(() => {
            this.calc()
          })
      }
      .rowStart(5)
      .rowEnd(6)
      .backgroundColor('#FFC0CB')

      GridItem() {
        Button('0')
          .type(ButtonType.Normal)
          .height('100%')
          .width('100%')
          .fontColor('#000000')
          .backgroundColor('#FFC0CB')
          .onClick(() => {
            this.setParams('0')
          })
      }
      .columnStart(1)
      .columnEnd(2)

      GridItem() {
        Button('.')
          .type(ButtonType.Normal)
          .height('100%')
          .width('100%')
          .fontColor('#000000')
          .backgroundColor('#FFC0CB')
          .onClick(() => {
            this.setParams('.')
          })
      }
    }
    .columnsGap(10)
    .rowsGap(10)
    .padding(10)
    .rowsTemplate('2fr 1fr 1fr 1fr 1fr 1fr')
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .backgroundColor('#FFFFFF')
  }
}

效果图：

编辑器为Dev Eco