君子生非异也，善假于物也！—— HarmonyOS 计算器实现 ...

        前言

        风流要是贤公子，白晰仍为美少年。隐墨同学恋爱了，她爱上了隔壁班的少年，恰同学少年，风华正茂，指点山河，挥斥方遒。隐墨同学彻底的坠入了爱河，一发不可收拾，每天空想着和少年檫出不一样的火花，来一场特殊的经历。让两个人的生存交轨，可谓衣带渐宽终不悔,为伊消得人干瘪啊！！
        正巧，少年家电脑上的计算器不能正常利用了，你眼睛一亮，本相只有一个，那就是机会，你快速在书架上找到《HarmonyOS》大喊：如意如意，按我心意

---

        一： 需要办理的问题


        1. 小数计算的精度丢失

        有计算机根本基础的都清楚：由于数字都是双精度浮点数，在计算机中是二进制存储数据的，因此小数和非安全整数（凌驾整数的安全范围[-Math.pow(2, 53)，Math.pow(2, 53)]的数据）在计算过程中会存在精度丢失的情况。
        小数运算时：“0.2 + 2.22 = 2.4200000000000004”
   

  ​
  
        2. 中缀表达式转为后缀表达式

        隐墨同学提问道，作甚要变革呢，为什么要变，怎样变！
        逆波兰表达式又叫做后缀表达式。逆波兰表示法是波兰逻辑学家J・卢卡西维兹于1929年首先提出的一种表达式的表示方法   。厥后,人们就把用这种表示法写出的表达式称作“逆波兰表达式”。逆波兰表达式把运算量写在前面,把算符写在后面。
        中缀表达式：就是我们平时用的表达式，好比 1+((2+3)*4)-5这种表达式
        “1+((2+3)*4)-5”转换为后缀表达式是”1 2 3 + 4 * + 5 -”，可以发现后缀表达式里没有括号
        明显的可以察觉到没有括号，由于计算机并不会去先计算括号里面的，大概根据优先级的去计算你给定的字符串(你看似输入的是表达式，但是计算机是按字符串举行处置惩罚的) 
        规则：
        1. 遇到数字就直接输出到后缀表达式中，遇到操纵符就判定其优先级，并将其压入栈中。
        2. 假如栈顶元素的优先级大于即是当前操纵符，则先将栈顶元素弹出并输出到后缀表达式中，再将当前操纵符压入栈中。
        3. 假如遇到了左括号，则直接将其压入栈中，假如遇到了右括号，则弹出栈中的元素，直到遇到了左括号为止，并将这些元素输出到后缀表达式中。
        4. 将栈中剩余的元素依次弹出，并输出到后缀表达式中。

        3. 对于异常信息的处置惩罚

        仅限于隐墨同学所发现的，有其他情况可以增补呦！！
        1. 参考本技艺机上的计算器，机会发现，当表达式的最后一位为符号位时，你在点击例外一个符号他会自动的举行代替。
        2. 对于输入 .3 的效果为 3 大概 ((2)+2 = 4

---

        二：团体的思绪而且代码的实现


        1. UI结构（Grid）

        不难发现，整个计算器的结构就为网格结构（Grid)
        Grid组件为网格容器，其中容器内各条目对应一个GridItem组件
   

  ​
                  代码如下

1. @Styles function KeyBoxStyleOther(){
2.   .width(60)
3.   .backgroundColor('#ffe0dddd')
4.   .height(60)
5.   .borderRadius(8)
6. }
7. @Styles function KeyBoxStyle(){
8.   .width(60)
9.   .backgroundColor(Color.White)
10.   .height(60)
11.   .borderRadius(8)
12. }
14. const nums:string[] = ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '.']
16. @Entry
17. @Component
18. struct Index {
19.   columnsTemplate: string = '1fr 1fr 1fr 1fr'
20.   @State rowsTemp: string = '1fr 1fr 1fr 1fr 1fr'
21.   @State rows: number = 5
22.   @State expression: string = ''
23.   @State result: string = '0'
24.   @State @Watch('aboutToAppear') isShowMore: boolean = false //用于判断是否要更多的的展示
25.   @State expressionFontSize: number = 40
26.   @State expressionColor: string = '#000000'
27.   @State resultFontSize: number = 30
28.   @State resultColor: string = '#000000'
30.   aboutToAppear(): void {
31.     this.JudgeIsMore(this.isShowMore)
32.   }
34.   JudgeIsMore(judge: boolean) {
35.     if (judge == true) {
36.       this.rowsTemp = '1fr 1fr 1fr 1fr 1fr 1fr'
37.       this.rows = 6
38.     } else {
39.       this.rowsTemp = '1fr 1fr 1fr 1fr 1fr'
40.       this.rows = 5
41.     }
42.   }
44.   build() {
45.     Column() {
46.       Row() {
47.         Image($r('app.media.three_dot'))
48.           .width(50)
49.           .height(50)
50.           .margin(20)
51.           .onClick(() => {
52.             this.isShowMore = !this.isShowMore
53.           })
54.       }
55.       .width('100%')
56.       .justifyContent(FlexAlign.End)
57.       .alignItems(VerticalAlign.Top) //位于顶端
59.       Column() {
60.         Row() {
61.           TextInput({ text: this.result })
62.             .fontSize(lengthSize(this.result))
63.             .fontColor(this.resultColor)
64.             .fontWeight(700)
65.             .textAlign(TextAlign.End)
66.             .backgroundColor(Color.White)
67.             .padding({ bottom: 20 })
68.             .animation({ duration: 500 })
69.         }
70.         .padding({ right: 15 })
71.         .justifyContent(FlexAlign.End)
72.         .width('100%')
74.         Divider().width('90%').color(Color.Black).height(20)
76.         Row() {
77.           TextInput({ text: this.expression })
78.             .textAlign(TextAlign.End)
79.             .backgroundColor(Color.White)
80.             .fontSize(lengthSize(this.expression))
81.             .fontColor(this.expressionColor)
82.             .animation({ duration: 500 })
83.         }
84.         .padding({ top: 5, bottom: 5 })
85.         .justifyContent(FlexAlign.End)
86.         .width('100%')
87.         .height(70)
90.         Grid() {
91.           //是否展开，根据按钮的不同有不同的情况
92.           if (this.isShowMore) {
93.             GridItem() {
94.               Image($r('app.media.rightbucket'))
95.                 .width(30)
96.             }.KeyBoxStyleOther()
97.             .onClick(() => {
98.               this.expression += '('
99.             })
101.             GridItem() {
102.               Image($r('app.media.leftbucket'))
103.                 .width(30)
104.             }.KeyBoxStyleOther()
105.             .onClick(() => {
106.               this.expression += ')'
107.             })
109.             GridItem() {
110.               Image($r('app.media.percent'))
111.                 .width(30)
112.             }.KeyBoxStyleOther()
113.             .onClick(() => {
114.               this.expression += '!'
115.             })
117.             GridItem() {
118.               Image($r('app.media.mi'))
119.                 .width(30)
120.             }.KeyBoxStyleOther()
121.             .onClick(() => {
122.               this.expression += '^'
123.             })
124.           }
126.           //原有键的布局
127.           GridItem() {
128.             Image($r('app.media.C'))
129.               .width(30)
130.           }.KeyBoxStyleOther()
131.           .onClick(() => { //对于数据的全部清除
132.             this.expression = ''
133.             this.result = '0'
134.           })
136.           GridItem() {
137.             Image($r('app.media.gf_obelus'))
138.               .width(30)
139.           }.KeyBoxStyleOther()
140.           .onClick(() => {
141.             this.expression=SymbolRecep(this.expression,'/')
143.           })
145.           GridItem() {
146.             Image($r('app.media.mul'))
147.               .width(30)
148.           }.KeyBoxStyleOther()
149.           .onClick(() => {
150.             this.expressionFontSize
151.             this.expression=SymbolRecep(this.expression,'*')
152.           })
154.           GridItem() {
155.             Image($r('app.media.delete_left'))
156.               .width(40)
157.           }.KeyBoxStyleOther()
158.           .onClick(() => { //删除最后一位数据
159.             this.expression = this.expression.slice(0, this.expression.length - 1)
160.             this.result =''
161.           })
163.           GridItem() {
164.             Image($r('app.media.jiecheng'))
165.               .width(30)
166.           }
167.           .onClick(() => {
168.             this.expression=SymbolRecep(this.expression,'%')
169.           })
170.           .KeyBoxStyleOther()
171.           .rowStart(this.rows - 1)
172.           .rowEnd(this.rows - 1)
173.           .columnStart(0)
174.           .columnEnd(0)
176.           GridItem() {
177.             Image($r('app.media.minus'))
178.               .width(30)
179.           }
180.           .onClick(() => {
181.             this.expression=SymbolRecep(this.expression,'-')
182.           })
183.           .KeyBoxStyleOther()
184.           .rowStart(this.rows - 4)
185.           .rowEnd(this.rows - 4)
186.           .columnStart(3)
187.           .columnEnd(3)
189.           GridItem() {
190.             Image($r('app.media.plus'))
191.               .width(30)
192.           }.KeyBoxStyleOther()
193.           .onClick(() => {
194.             this.expression=SymbolRecep(this.expression,'+')
195.           })
196.           .rowStart(this.rows - 3)
197.           .columnStart(3)
199.           GridItem() {
200.             Text('=')
201.               .fontColor(Color.White)
202.               .fontSize(30)
203.               .fontWeight(FontWeight.Bold)
204.           }
205.           .onClick(() => {
206.             this.expressionFontSize=lengthSize(this.expression)
207.             this.resultFontSize=lengthSize(this.result)
209.             this.result=total(this.expression).toString()
210.             this.expression=''
211.           })
212.           .KeyBoxStyleOther()
213.           .rowStart(this.rows - 2)
214.           .rowEnd(this.rows - 1)
215.           .columnStart(3)
216.           .height(130)
217.           .columnEnd(3)
218.           .backgroundColor('#ffff6b14')
220.           //循环加载数字键盘
221.           ForEach(nums, (item: string) => {
222.             GridItem() {
223.               Text(item)
224.                 .fontSize(20)
225.                 .fontWeight(700)
226.             }
227.             .onClick(() => {
228.               if(item=='.')
229.                 this.expression=SymbolRecep(this.expression,'.')
230.               else
231.                 this.expression+=item
232.             })
233.             .KeyBoxStyle()
234.           })
235.         }
236.         .rowsTemplate(this.rowsTemp)
237.         .columnsTemplate(this.columnsTemplate)
238.         .rowsGap(20)
239.         .columnsGap(8)
240.         .width('100%')
241.         .height(this.isShowMore == false ? '55%' : '65%')
242.         .animation({ duration: 300, curve: Curve.FastOutSlowIn, delay: 5 })
243.         .backgroundColor("#ffeeebed")
244.         .padding({
245.           bottom: 20,
246.           top: 20,
247.           left: 8,
248.           right: 8
249.         })
250.       }
251.       .layoutWeight(1)
252.       .justifyContent(FlexAlign.End)
253.     }
254.   }
255. }

复制代码

    举行了相应的扩展

        2. 表达式转化和异常处置惩罚

        对于数据的处置惩罚代码如下

1. function total(expression: string):number {
2.   //检查是否含有这些符号
3.   if('+-x/%^'.includes((expression[expression.length-1])))
4.     return NaN
6.   //expression 为 .3 时，正则表达式中的 \d+ 期望至少有一个数字开头，因此 .3 会被分为两个部分："." 和 "3"。
7.   //然而，由于正则表达式没有独立的模式来捕捉孤立的点，它仅匹配了数字 "3"，因此 tokens 数组只包含 "3"。
8.   // 使用正则划分出 整数或小数和符号的数组，修改正则表达式以支持负数
9.   let tokens: string[] = expression.match(/(\d+(\.\d+)?|\+|-|\*|\/|\%|\^|\(|\)|!)/g) || [];
11.   //用于检查输入的符号
12.   for(let i=0;i<tokens.length;i++) {
13.     console.log(tokens[i].toString())
14.   }
16.   let output: string[] = []
17.   let operations: string[] = []
19.   // 增加前一个token，用来判断!前是否有数字，以及判断-是否为负号
20.   let prevToken:string = 'NaN';
22.   for (let token of tokens) {
23.       // 是数字直接入栈（包括负数）
24.       if (!isNaN(Number(token))) {
25.         output.push(token)
26.       } else if (token == '(') {
27.         operations.push(token)
28.       } else if (token == '!') {
29.         if (isNaN(Number(prevToken)))  //判断前面有没有数字
30.           return NaN
31.         else
32.           operations.push(token)
33.       } else if (token == '-' && (prevToken == 'NaN' || prevToken == '(' || '+-*/%^'.includes(prevToken))) {
34.         // 处理负号的情况,用乘号进行处理
35.         output.push('-1')
36.         operations.push('*')
37.       } else {
38.         //栈顶优先级大于当前优先级，符号栈顶出栈
39.         while (operations.length > 0 && getPrecedence(operations[operations.length - 1]) >= getPrecedence(token)) {
40.           let op = operations.pop()
41.           if (op === '(')
42.             break
43.           if (op) {
44.             output.push(op)
45.           }
46.         }
47.         if (token != ')')
48.           operations.push(token)
49.       }
50.       prevToken = token;
51.     }
53.     while (operations.length > 0) {
54.       const op = operations.pop()
55.       if (op !== undefined&&op!='(')
56.         output.push(op)
57.     }
59.   console.log('以下为后缀表达式中的表示')
61.   for(let i=0;i<output.length;i++) {
62.     console.log(output[i])
63.   }
65.     //定义一个数组栈，用来计算最终结果
66.     let nums: number[] = []
68.     for (let value of output) {
69.       if (!isNaN(Number(value))) {
70.         nums.push(Number(value))
71.       } else if (value == '!') {
72.         let num1 = nums.pop()
73.         if (num1 !== undefined)
74.           nums.push(factorial(num1))
75.       } else {
76.         //左侧为空就是右侧，要不然是左侧
77.         let num1 = nums.pop() ?? 0
78.         let num2 = nums.pop() ?? 0
79.         switch (value) {
80.           case '+':
81.             nums.push(num2 + num1)
82.             break
83.           case '-':
84.             if(num2==0) {
85.               nums.push(num1)
86.             }
87.             else{
88.               nums.push(num2 - num1)
89.             }
90.             break
91.           case '/':
92.             if (num1 !== 0)
93.               if(num2==0) {
94.                 nums.push(num1)
95.               }
96.               else{
97.                 nums.push(num2 / num1)
98.               }
99.             else
100.               return NaN  // 除数为零
101.             break
102.           case '*':
103.             num1*=100000000000
104.             num2*=100000000000
105.             if(num2==0) {
106.               nums.push(num1/100000000000)
107.             }
108.             else{
109.               nums.push(num2/100000000000 * num1 /100000000000)
110.             }
111.             break
112.           case '%':
113.             if(num2==0) {
114.               nums.push(num1)
115.             }
116.             else{
117.               nums.push(num2 % num1)
118.             }
119.             break
120.           case '^':
121.             nums.push(Math.pow(num2, num1))
122.             break
123.         }
124.       }
125.     }
126.     return nums[0] ?? NaN
127. }
129. //计算出等级
130. function getPrecedence (op:string):number {
131.   switch(op){
132.     case '!':
133.       return 6
134.     case '^':
135.       return 4
136.     case '%':
137.       return 3
138.     case '*':
139.     case '/':
140.       return 2
141.     case '+':
142.     case '-':
143.       return 1
144.     case '(':
145.       case ')':
146.       return 0
147.     default :
148.       return -1
149.   }
150. }
152. //计算阶乘
153. function factorial(num: number): number {
154.   let result = 1;
155.   for (let i = 2; i <= num; i++) {
156.     result *= i;
157.   }
158.   return result;
159. }

复制代码

        现在让我们开始分析哈：
                2.1 正则表达式

1. let tokens: string[] = expression.match(/(\d+(\.\d+)?|\+|-|\*|\/|\%|\^|\(|\)|!)/g) || [];

复制代码

        这是一串正则表达式，能起到辨认和分离每一个字符的作用。
        正则表达式的界说和作用：正则表达式是一种文本模式，它使用特定的字符序列来形貌、匹配和处置惩罚字符串中的字符组合。正则表达式广泛应用于编程语言和文本处置惩罚工具中，用于执行诸如搜刮、更换、验证和提取等操纵。通过正则表达式，可以快速地对大量文本数据举行复杂的模式匹配和操纵。
        小提醒：假如看不懂的话可以可以通过设置日志的方式找BUG！！！！！！
        举例对于输入 2*（-3*2）-6，以下为token数组中所存放的数据
 

                2.2 后缀表达式转换

        我上述所讲比较的粗糙，具体可以参考  后缀表达式转换
        压入栈的时候同时处置惩罚多括号的问题

1. while (operations.length > 0) {
2.       const op = operations.pop()
3.       if (op !== undefined&&op!='(')
4.         output.push(op)
5.     }

复制代码

        通过日志可以看出被转化后的表达式

        计算机就可以成功的举行辨认和处置惩罚了表达式了

                2.3 精度丢失 

        小数运算时：“0.2 + 2.22 = 2.4200000000000004”，当前示例的办理方法是将小数扩展到整数举行计算，计算完成之后再将效果缩小，计算过程为“(0.2 * 100 + 2.22 * 100) / 100 = 2.42”。

1. case '*':
2.             num1*=100000000000
3.             num2*=100000000000
4.             if(num2==0) {
5.               nums.push(num1/100000000000)
6.             }
7.             else{
8.               nums.push(num2/100000000000 * num1 /100000000000)
9.             }
10.             break

复制代码

              通过测试发现成功的办理  

        
        2.4 结构美化和限制问题

1. //保证运算符只出现一次
2. function SymbolRecep(expression: string,chara:string): string {
3.   if (expression[expression.length-1] == '+' || expression[expression.length-1] == '-' ||
4.     expression[expression.length-1] == 'x' || expression[expression.length-1] == '/' ||
5.     expression[expression.length-1] == '%' || expression[expression.length-1] == '.') {
6.     return expression.slice(0, expression.length - 1) + chara
7.   } else
8.     return expression + chara
9. }

复制代码

        假如输入的数字过长，就可以改变字体的巨细，更加得当

1. function lengthSize(expression: string): number {
2.   if(expression.length<12)
3.     return 40
4.   else if(expression.length<20)
5.     return 25
6.   else
7.     return 20
8. }

复制代码

         效果图如下

---

        后言 

        隐墨累了。她的计算器成功写好了，但是终究入不了少年的眼！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。