鸿蒙计算器demo

import { ExpressionEvaluator } from '../helper/CalculateHelper'
import { Button1 } from './Button1'
import { Button2 } from './Button2'
@Entry
@Component
struct Index {
  @State cal: string = ''
  @State result: string = '0'
  build() {
    Column({space:10}){
      Blank()

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

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

      Row({space:10}) {
        Button1({num:'AC',
          buttonColor:0xA5A5A5,
          textColor:Color.Black,
          textSize: 30
        }).onClick(() =>{
          this.result = '0'
          this.cal = ''
        })

        Button1({num:'+/-',buttonColor:0xA5A5A5,
          textColor:Color.Black,
          textSize: 30
        })
        Button1({num:'%',buttonColor:0xA5A5A5,
          textColor:Color.Black,
          textSize: 30
        })
        Button1({num:'÷',buttonColor:0xFF9F0B}).onClick(() =>{
          this.cal += '/'
        })
      }

      Row({space:10}) {
        Button1({num:'7'}).onClick(() =>{
          this.cal += '7'
        })
        Button1({num:'8'}).onClick(() =>{
          this.cal += '8'
        })
        Button1({num:'9'}).onClick(() =>{
          this.cal += '9'
        })
        Button1({num:'x',buttonColor:0xFF9F0B}).onClick(() =>{
          this.cal += '*'
        })
      }
      Row({space:10}) {
        Button1({num:'4'}).onClick(() =>{
          this.cal += '4'
        })
        Button1({num:'5'}).onClick(() =>{
          this.cal += '5'
        })
        Button1({num:'6'}).onClick(() =>{
          this.cal += '6'
        })
        Button1({num:'-',buttonColor:0xFF9F0B}).onClick(() =>{
          this.cal += '-'
        })
      }
      Row({space:10}) {
        Button1({num:'1'}).onClick(() =>{
          this.cal += '1'
        })
        Button1({num:'2'}).onClick(() =>{
          this.cal += '2'
        })
        Button1({num:'3'}).onClick(() =>{
          this.cal += '3'
        })
        Button1({num:'+',buttonColor:0xFF9F0B}).onClick(() =>{
          this.cal += '+'
        })
      }

      Row({space:10}){
        Button2({num:'0'}).onClick(() =>{
          this.cal += '0'
        })
        Button1({num:'.'}).onClick(() =>{
          this.cal += '.'
        })
        Button1({num:'=',
          buttonColor:0xFF9F0B})
          .onClick(() => {
            let calHelper = new ExpressionEvaluator()
            this.result = `${calHelper.evaluate(this.cal)}`
        })
      }.margin({bottom: 50})

    }.width('100%').height('100%')
    .backgroundColor(Color.Black)
  }
}
//button1

@Preview
@Component
export struct Button1{
  num: string = '1'
  buttonColor: number = 0x333333
  textColor: number = Color.White
  textSize: number = 40
  build(){
    Column() {
      Text(`${this.num}`)
        .fontColor(this.textColor)
        .fontSize(this.textSize)
        .fontWeight(FontWeight.Medium)
    }.width(75).height(100)
    .backgroundColor(this.buttonColor)
    .justifyContent(FlexAlign.Center)
    .borderRadius(50)
  }
}


//button2

@Preview
@Component
export struct Button2{
    num: string = '1'
    buttonColor: number = 0x333333
    textColor: number = Color.White
    textSize: number = 40

    build(){
      Column() {
        Text(`${this.num}`)
          .fontColor(this.textColor)
          .fontSize(this.textSize)
          .fontWeight(FontWeight.Medium)
      }.width(160).height(100)
      .backgroundColor(this.buttonColor)
      .justifyContent(FlexAlign.Center)
      .borderRadius(50)
    }

}
以上是大概框架