鸿蒙开发实战案例-计算器（附整套源码）

本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/136491070

本文分享了作者使用鸿蒙开发计算器项目的经历，重点讲解了布局上的挑战，如等号键处理，以及计算器算法实现，包括优先级处理和运算式解析的过程。项目旨在帮助开发者理解ArkTS和鸿蒙开发实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小编从业近十年，学过很多种开发语言，得出的经验是知识点看得再多，应用到项目上还是会出现很多的问题。

所以我用了一个周末的时间写了这个计算器项目。希望能够在布局方式的综合运用、自定义组件的实战应用、ArkTS语言算法等方面帮助到大家。相信大家能够通过这个项目对鸿蒙开发有更深的理解。

对该项目的一些难点做个解析：

布局上，稍微难一些的点是等号键的问题，因为只有它和其他组件的大小不一样，我的思路是将布局分为两个部分，即左侧的三列和右边的一列：

这样左侧是比较常见的Grid网格，右侧也是一个Grid网格，rowsTemplat设置为('1fr 1fr 1fr 2fr')即可。

Flex({direction:FlexDirection.Row}){
        Grid() {
          ForEach(this.Number, (day: string,index:number) => {
              GridItem() {
                if (index == 0) {
                  ClItem({content:day,font_size:20,font_color:0xFFFFFF,background_color:0x363746,border_radiu:{topLeft:30}})
                    .onClick(()=>{
                      this.clearClick()
                    })
                }else if(index == 1 || index == 2){
                  ClItem({content:day,font_size:60,font_color:0xFFBB00,background_color:0x363746,border_radiu:{}})
                    .onClick(()=>{
                      this.calClick(day)
                    })
                }
                else {
                  if(day == '%'){
                    ClItem({content:day,font_size:20,font_color:0xFFFFFF,background_color:0x2E2F3E,border_radiu:{}})

                  }else if(day == "."){
                    ClItem({content:day,font_size:20,font_color:0xFFFFFF,background_color:0x2E2F3E,border_radiu:{}})
                      .onClick(()=>{
                        this.numClick(day)
                      })

                  }else {
                    ClItem({content:day,font_size:20,font_color:0xFFFFFF,background_color:0x2E2F3E,border_radiu:{}})
                      .onClick(()=>{
                        this.numClick(day)
                      })

                  }

                }
              }
          }, day => day)
        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
        .columnsGap(1)
        .rowsGap(1)
        .width('75%')
        .backgroundColor(0x242530)
        .height('100%')

        Grid(){
          ForEach(this.Number2, (day: string,index:number) => {
            GridItem() {
              if (index == 0) {
                Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){
                  Image("/images/del.png")
                    .objectFit(ImageFit.Cover)
                    .width(50)
                    .height(28)
                    .backgroundColor(0x363746)
                    .fillColor(Color.Red)
                }
                .backgroundColor(0x363746)
                .width('100%')
                .height('100%')
                .borderRadius({topRight:30})
                .onClick(()=>{
                  this.deleClick()
                })

              }else if(index == 3){
                ClItem({content:day,font_size:60,font_color:0xFFFFFF,background_color:0xFFBB00,border_radiu:{}})
                  .onClick(()=>{
                    this.equalClick()
                  })
              }
              else {
                ClItem({content:day,font_size:60,font_color:0xFFBB00,background_color:0x363746,border_radiu:{}})
                  .onClick(()=>{
                    this.calClick(day)
                  })
              }
            }
          })
        }
        .columnsTemplate('1fr')
        .rowsTemplate('1fr 1fr 1fr 2fr')
        .columnsGap(1)
        .rowsGap(1)
        .width('25%')
        .backgroundColor(0x242530)
        .height('100%')
        .padding({left:1})
      }
      .width('100%')
      .height('57%')

另外，在计算器算法中，涉及到优先级的问题，例如1+2*3这种混合运算式要先算乘除，再算加减。

我的思路是先把输入的运算式存入字符串，并用空格分开，如1 + 2 * 3，然后把该字符串切分成数组，对数组进行两次遍历，第一次遍历计算乘法和除法，第二次遍历计算加减法，最后输出结果。


let arr1 = this.calString.split(" ")
    
    while (arr1.indexOf("×") > -1 || arr1.indexOf('÷') > -1){
      for(let i = 0;i<arr1.length;i++){
        let ele = arr1[i].toString()
        if(ele == "×"){
          let i1 = arr1[i - 1]
          let i2 = arr1[i + 1]

          let re = parseFloat(i1) * parseFloat(i2);
          arr1[i - 1] = re.toString()
          arr1.splice(i,2)
          break
        }

        if(ele == "÷"){
          let i1 = arr1[i - 1]
          let i2 = arr1[i + 1]

          let re = parseFloat(i1) / parseFloat(i2);
          arr1[i - 1] = re.toString()
          arr1.splice(i,2)
          break
        }
      }
    }

    while (arr1.indexOf("+") > -1 || arr1.indexOf('-') > -1){
      console.log("parseFloat(i3):",arr1);
      for(let i = 0;i<arr1.length;i++){
        let ele = arr1[i].toString()
        if(ele == "+"){
          let i1 = arr1[i - 1]
          let i2 = arr1[i + 1]

          let re = parseFloat(i1) + parseFloat(i2);
          arr1[i - 1] = re.toString()
          arr1.splice(i,2)
          break
        }

        if(ele == "-"){
          let i1 = arr1[i - 1]
          let i2 = arr1[i + 1]

          let re = parseFloat(i1) - parseFloat(i2);
          console.log("parseFloat(i1):",parseFloat(i1));
          console.log("parseFloat(i2):",parseFloat(i2));

          arr1[i - 1] = re.toString()
          arr1.splice(i,2)
          break
        }
      }
    }

完整的项目源码点击下方链接获取。

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料