所用工具：DevEco3.0，SDK9

源码地址：src.rar - 蓝奏云

一.分析应用布局

采用的是一张背景图和一个Column布局，所以我们可以采用Stack堆叠容器实现

二.编写相对应的UI界面

1.编写背景组件

Image($r('app.media.1'))
        .width('100%')
        .height('100%')

 2.编写头部文字

//定义头部文字
  Row(){
    Text('简易计算器')
        .width('100%')
        .fontSize(20)
        .fontWeight(800)
        .fontColor("#ff5f13d7")
        .textAlign(TextAlign.Center)
}
 .width('100%')
 .height(50)
 .backgroundColor("#ffece5e5")

3.编写主体内容

Row() {
            Text(this.substance)
              .width('100%')
              .height(70)
              .fontSize(25)
              .fontWeight(FontWeight.Bold)
              .fontColor("#333")
              .textAlign(TextAlign.End)//使用户输入的数字从右边开始
              .padding(5)
          }
          .border({width:1})
          .margin({top:10})
          Row(){
            Text('结果：'+this.answer)
              .width('100%')
              .height(70)
              .fontSize(30)
              .fontColor("#ffff0000")
          }
          Row(){
            //采用网格布局,4行4列，通过循环依次渲染出来
            Grid(){
              //item为数组中的内容，index为数组内容的索引
              ForEach(this.list,(item:string,index:number)=>{
                GridItem(){
                  Text(item)
                    .width(50)
                    .height(50)
                    .fontSize(30)
                    .fontColor(Color.Blue)
                    .textAlign(TextAlign.Center)
                    .border({width:1,color:Color.Black})
                    .onClick(()=>{
                        //如果用户点击的是AC，则清空
                      if(index==13){
                        this.substance = ''
                        this.answer = ''
                        //如果用户点击的是=，则执行计算函数
                      }else if(index==14){
                        try {
                          // @ts-ignore
                          this.answer = this.calculate(this.substance);
                        } catch (error) {
                          this.answer = 'Error';
                        }
                        //否则就正常的对内容显示
                      }else{
                        this.substance += this.list[index]
                      }
                    })
                }
              })
            }
            .columnsTemplate('1fr 1fr 1fr 1fr')
            .rowsTemplate('1fr 1fr 1fr 1fr')
            .columnsGap(10)
            .height(400)
          }
          .margin({top:50})
          .borderRadius(5)
          .border({width:5,color:Color.Black})

4.编写底部信息

//底部文字信息区
          Row(){
            Text('版本信息：简易计算器1.0版本@2024/3/9')
              .fontSize(15)
              .width('100%')
              .textAlign(TextAlign.Center)
          }
          .margin({top:10})

三.编写计算函数

 calculate(expression) {
    // 使用正则表达式分割表达式中的数字和运算符
    const parts = expression.match(/[\d.]+|[\+\-\*\/]/g);
    // 初始化结果为第一个数字
    let result = parseFloat(parts[0]);
    // 从第二个元素开始，按顺序进行运算
    for (let i = 1; i < parts.length; i += 2) {
      const operator = parts[i];
      const operand = parseFloat(parts[i + 1]);
    //逻辑运算
      if (operator === '+') {
        result += operand;
      } else if (operator === '-') {
        result -= operand;
      } else if (operator === '*') {
        result *= operand;
      } else if (operator === '/') {
        result /= operand;
      }
    }
    return result;
  }

总结

完整代码如下：

@Entry
@Component
struct Index {
  //用户输入的需要计算的内容
  @State substance:string = ''
  //计算结果
  @State answer:string = ''
  //定义计算器控件，因为不能被外界更改，所以要设为private状态
  private list:string[]=['1','2','3','+','4','5','6','-','7','8','9','*','0','AC','=','/']

  //运算函数
  calculate(expression) {
    // 使用正则表达式分割表达式中的数字和运算符
    const parts = expression.match(/[\d.]+|[\+\-\*\/]/g);
    // 初始化结果为第一个数字
    let result = parseFloat(parts[0]);
    // 从第二个元素开始，按顺序进行运算
    for (let i = 1; i < parts.length; i += 2) {
      const operator = parts[i];
      const operand = parseFloat(parts[i + 1]);
    //逻辑运算
      if (operator === '+') {
        result += operand;
      } else if (operator === '-') {
        result -= operand;
      } else if (operator === '*') {
        result *= operand;
      } else if (operator === '/') {
        result /= operand;
      }
    }
    return result;
  }

  build() {
    //采用堆叠容器,按照先后顺序一次入栈，即将image组件作为背景图展示
    Stack(){
      Image($r('app.media.1'))
        .width('100%')
        .height('100%')
      Column(){
        //定义头部文字
        Row(){
          Text('简易计算器')
            .width('100%')
            .fontSize(20)
            .fontWeight(800)
            .fontColor("#ff5f13d7")
            .textAlign(TextAlign.Center)
        }
        .width('100%')
        .height(50)
        .backgroundColor("#ffece5e5")
        //定义主体
        Column({space:10}) {
          Row() {
            Text(this.substance)
              .width('100%')
              .height(70)
              .fontSize(25)
              .fontWeight(FontWeight.Bold)
              .fontColor("#333")
              .textAlign(TextAlign.End)//使用户输入的数字从右边开始
              .padding(5)
          }
          .border({width:1})
          .margin({top:10})
          Row(){
            Text('结果：'+this.answer)
              .width('100%')
              .height(70)
              .fontSize(30)
              .fontColor("#ffff0000")
          }
          Row(){
            //采用网格布局,4行4列，通过循环依次渲染出来
            Grid(){
              //item为数组中的内容，index为数组内容的索引
              ForEach(this.list,(item:string,index:number)=>{
                GridItem(){
                  Text(item)
                    .width(50)
                    .height(50)
                    .fontSize(30)
                    .fontColor(Color.Blue)
                    .textAlign(TextAlign.Center)
                    .border({width:1,color:Color.Black})
                    .onClick(()=>{
                        //如果用户点击的是AC，则清空
                      if(index==13){
                        this.substance = ''
                        this.answer = ''
                        //如果用户点击的是=，则执行计算函数
                      }else if(index==14){
                        try {
                          // @ts-ignore
                          this.answer = this.calculate(this.substance);
                        } catch (error) {
                          this.answer = 'Error';
                        }
                        //否则就正常的对内容显示
                      }else{
                        this.substance += this.list[index]
                      }
                    })
                }
              })
            }
            .columnsTemplate('1fr 1fr 1fr 1fr')
            .rowsTemplate('1fr 1fr 1fr 1fr')
            .columnsGap(10)
            .height(400)
          }
          .margin({top:50})
          .borderRadius(5)
          .border({width:5,color:Color.Black})
          //底部文字信息区
          Row(){
            Text('版本信息：简易计算器1.0版本@2024/3/9')
              .fontSize(15)
              .width('100%')
              .textAlign(TextAlign.Center)
          }
          .margin({top:10})
        }
        .width('100%')
        .layoutWeight(1)//将剩余高度全部占有
        .margin({top:30})
      }
      .width('100%')
      .height('100%')
      .padding(10)
    }
    .width('100%')
    .height('100%')

  }
}