0
0

使用ArkTs进行计算器的实现

使用ArkTs进行计算器的实现,基于deveco-studio3.1.1，新版未尝试

1、写出大致的计算器构造

在calcultorDemo.ets文件中

  1. import {calculatorResult} from './calculatorResult'
  2. import numberstack  from './NumberStack'
  3. import characterstack from './CharacterStack'
  4. @Entry
  5. @Component
  6. struct calcultorDemo {
  7.   @State value:string =''
  8.    @State result:string=''
  9.   @State opacityValue:number=0
  10.   @State fontSizeValue:number=30
  11.   numbers :string[]=['(',')','÷','×','1','2','3','-','4','5','6','+','7','8','9']
  12.   numbers2:string[]=['%','0','.']
  13.   build() {
  14.     Column(){
  15.       calculatorResult({value:$value,result:this.result,opacityValue:$opacityValue,fontSizeValue:$fontSizeValue})
  16.       Column(){//计算机主体页面
  17.         Grid(){
  18.           GridItem(){
  19.             Text('MC')
  20.               .TextStyle()
  21.           }
  22.           .oneStyle()//MC（清零）工具
  24.           GridItem(){
  25.             Text('MR')
  26.               .TextStyle()
  27.           }
  28.           .oneStyle()
  30.           GridItem(){
  31.             Image($r('app.media.delete'))
  32.               .fillColor(Color.Blue)
  33.               .height(40)
  34.           }
  35.           .oneStyle()
  36.           .onClick(()=>{
  37.             this.value=this.value.slice(0,this.value.length-1)
  38.             this.result=''
  39.           })
  41.           GridItem(){
  42.             Text('C')
  43.               .TextStyle()
  44.           }
  45.           .oneStyle()
  46.           .onClick(()=>{
  47.             this.value=''
  48.             this.result=''
  49.           })
  51.           ForEach(this.numbers,item=>{
  52.             GridItem(){
  53.               Text(item)
  54.                 .TextStyle()
  55.             }
  56.             .onClick(()=>{
  57.               if (this.value === '' && (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%')) {
  58.                 return
  59.               }//判断点击的第一个字符是不是运算符，若是则返回
  60.               if (this.value[this.value.length - 1] === '+' || this.value[this.value.length - 1] === '-' ||
  61.               this.value[this.value.length - 1] === '×' || this.value[this.value.length - 1] === '÷' ||
  62.               this.value[this.value.length - 1] === '%') {
  63.                 // 如果当前点击的是运算符，则替换最后一个运算符
  64.                 if (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%') {
  65.                   this.value = this.value.slice(0, this.value.length - 1) + item
  66.                 } else {
  67.                   this.value += item
  68.                 }
  69.               } else {
  70.                 this.value = this.value.concat(item)
  71.               }
  72.             })
  73.             .oneStyle()
  74.           })
  76.           GridItem(){
  77.             Text('=')
  78.               .TextStyle()
  79.               .fontColor(Color.White)
  80.           }
  81.           .rowStart(5)
  82.           .rowEnd(6)
  83.           .borderRadius(40)
  84.           .backgroundColor(Color.Blue)
  85.           .onClick(()=>{
  86.             this.result=total(checkParentheses(this.value+'#').cleanedExpression)
  87.             this.opacityValue=1
  88.             this.fontSizeValue=50
  89.           })
  91.           ForEach(this.numbers2,item=>{
  92.             GridItem(){
  93.               Text(item)
  94.                 .TextStyle()
  95.             }
  96.             .onClick(()=>{this.value=this.value.concat(item)})
  97.             .oneStyle()
  98.           })
  99.         }
  100.         .width('100%')
  101.         .height(500)
  102.         .columnsTemplate('1fr 1fr 1fr 1fr')
  103.         .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
  104.         .columnsGap(8)
  105.         .rowsGap(12)
  106.         .padding(12)
  107.         .backgroundColor('#fff6f0f0')
  108.         .borderRadius({topLeft:20,topRight:20})
  109.       }
  110.       .layoutWeight(1)
  111.       .justifyContent(FlexAlign.End)
  112.     }
  113.     .height('100%')
  114.   }
  115. }
  116. @Styles function oneStyle(){
  117.   .backgroundColor(Color.White)
  118.   .height(70)
  119.   .width(70)
  120.   .borderRadius(40)
  121.   .shadow({color:Color.Gray,radius:5})
  122. }
  123. @Extend(Text) function TextStyle() {
  124.   .fontSize(25)
  125.   .fontWeight(400)
  126. }

以上代码写出计算机的键盘部分，使用Grid组件进行键盘的分隔，以及对相同功能的按钮进行ForEach循环渲染减少占有空间
在这里插入图片描述

在calculatorResult.ets中

进行键盘输入（TextInput）和输出（Text）的编写

  1. @Component
  2. export struct  calculatorResult{
  3.   @Link value:string
  4.   @Prop result:string
  5.   @Link opacityValue:number
  6.   @Link fontSizeValue:number
  7.   build() {
  8.       Column(){
  9.         TextInput({text:this.value})
  10.           .height(80)
  11.           .margin({top:60})
  12.           .placeholderFont({size:60})
  13.           .fontSize(60)
  14.           .fontWeight(450)
  15.           .textAlign(TextAlign.End)
  16.           .backgroundColor(Color.White)
  17.         Text(this.result)
  18.           .opacity(this.opacityValue)
  19.           .width('100%')
  20.           .height(60)
  21.           .fontSize(this.fontSizeValue)
  22.           .fontWeight(450)
  23.           .textAlign(TextAlign.End)
  24.           .animation({duration:500})
  25.             // @ts-ignore
  26.           .textOverflow(TextOverflow.Clip)
  27.       }
  28.   }
  29. }

经过以上两个文件的渲染后，计算机的大概形状显示出来，如图所示：
在这里插入图片描述

2、进行计算机的功能部分

给每个按钮分别添加点击事件

1、对1，2，3，4，5，6，7，8，9，+, - , × ,÷添加存储表达式的点击事件，定义 @State value:string =‘’ 在每次进行点击时，对所点击的内容做出判断，储存所点击的内容。

  1. .onClick(()=>{
  2.               if (this.value === '' && (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%')) {
  3.                 return
  4.               }//判断点击的第一个字符是不是运算符，若是则返回
  5.               if (this.value[this.value.length - 1] === '+' || this.value[this.value.length - 1] === '-' ||
  6.               this.value[this.value.length - 1] === '×' || this.value[this.value.length - 1] === '÷' ||
  7.               this.value[this.value.length - 1] === '%') {
  8.                 // 如果在上一个字符是运算符时，当前点击的是运算符，则替换最后一个运算符
  9.                 if (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%') {
  10.                   this.value = this.value.slice(0, this.value.length - 1) + item
  11.                 } else {
  12.                 //若当前点击不是运算符而是数字时，则继续输入表达式
  13.                   this.value += item
  14.                 }
  15.               } else {
  16.                 this.value = this.value.concat(item)
  17.               }
  18.             })

2、对删除按钮:定义 @State result:string=''进行计算机结果的保存，方便后续渲染在Text组件中。

  1. .onClick(()=>{
  2.             this.value=this.value.slice(0,this.value.length-1)
  3.             this.result=''
  4.           })

3、对于清零工具则将value和result都置为空

  1. .onClick(()=>{
  2.             this.value=''
  3.             this.result=''
  4.           })

完成value的计算事件，利用栈进行算术表达式的求值：

主要思路：
1、将中缀表达式转为后缀表达式；
2、对后缀表达式求值；
具体可参考：栈的应用-表达式求值

代码如下：
1、在calcultorDemo.ets中：

  1. //检查括号是否多余，且若前括号多余则去掉多余的前括号
  2. function checkParentheses(expression: string): { valid: boolean, cleanedExpression: string } {
  3.   let stack = []
  4.   let cleanedExpression = expression
  5. //判断表达式括号是否对应
  6.   for (let ch of expression) {
  7.     if (ch === '(') {
  8.       stack.push(ch)
  9.     } else if (ch === ')') {//后括号多余则直接返回错误
  10.       if (stack.length === 0) {
  11.         return { valid: false, cleanedExpression: expression }
  12.       }
  13.       stack.pop()
  14.     }
  15.   }
  16.   //若不对应，去掉多余的前括号
  17.   while (stack.length > 0) {
  18.     let index = cleanedExpression.indexOf('(')
  19.     if (index !== -1) {
  20.       cleanedExpression = cleanedExpression.slice(0, index) + cleanedExpression.slice(index + 1)
  21.     }
  22.     stack.pop()
  23.   }
  24.   console.log(cleanedExpression)
  25.   return { valid: stack.length === 0, cleanedExpression }
  27. }
  29. //对表达式求值
  30. function total(expression:string){
  31.   characterstack.push('#')
  32.   let i=0
  33.   let ch=expression[i]
  34.   while (ch!='#'||characterstack.peek()!='#') {
  35.     if(!Instring(ch)){//进行多位数的入栈
  36.       let numStr = ch
  37.       while (i + 1 < expression.length && !Instring(expression[i + 1])) {
  38.         ch = expression[++i]
  39.         numStr += ch
  40.       }
  41.       numberstack.push(numStr)
  42.       ch = expression[++i]
  43.     }
  44.     else{
  46.       switch (Precede(characterstack.peek(),ch)){
  47.         case '<':{
  48.           characterstack.push(ch);
  49.           ch=expression[++i]
  50.           break
  51.         }
  52.         case '>':{
  53.           let theta= characterstack.pop()
  54.           let b=numberstack.pop()
  55.           let a=numberstack.pop()
  56.           numberstack.push(Operate(a,theta,b))
  57.           break
  58.         }
  59.         case '=':{
  60.           characterstack.pop()
  61.           ch=expression[++i]
  62.           break
  63.         }
  64.       }
  65.     }
  66.   }
  67.   return numberstack.peek()
  68. }
  70. //判断ch是否为运算符
  71. function Instring(ch:string){
  72.   let num:string[]=['+','-','(',')','÷','×','#','%']
  73.   return num.includes(ch)
  74. }
  76. //判断运算符的优先级
  77. function Precede(thetal:string,thetal2:string):string{
  78.   if((thetal=='('&&thetal2==')')||(thetal=='#'&&thetal2=='#')){
  79.     return '='
  80.   }
  81.   else if(thetal=='('||thetal=='#'||thetal2=='('||(thetal=='+'||thetal=='-')&&(thetal2=='×'||thetal2=='÷'||thetal2=='%')){
  82.     return '<'
  83.   }
  84.   else return '>'
  85. }
  87. //计算两数的运算结果
  88. function Operate(first:string,theta:string,second:string):string{
  89.   switch (theta){
  90.     case '+':
  91.       return ((+first)+(+second)).toString()
  92.     case '-':
  93.       return ((+first)-(+second)).toString()
  94.     case '×':
  95.       return ((+first)*(+second)).toString()
  96.     case '÷':
  97.       return ((+first)/(+second)).toString()
  98.     case '%':
  99.       return ((+first)%(+second)).toString()
  100.   }
  101.   return 'NaN'
  102. }

2、在CharacterStack.ets中进行字符栈的初始化，并进行导出；

  1. //运算符栈
  2.  class CharacterStack{
  3.   private characters:string[]
  5.   constructor() {
  6.     this.characters=[]
  7.   }
  8.   //入栈
  9.   push(item:string){
  10.     this.characters.push(item)
  11.   }
  12.   //出栈
  13.   pop(){
  14.     return this.characters.pop()
  15.   }
  16.   //返回栈顶元素
  17.   peek(){
  18.     return this.characters[this.characters.length-1]
  19.   }
  20.   //判断栈是否为空
  21.   isEmpty(){
  22.     return this.characters.length===0
  23.   }
  24.   //清空栈内元素
  25.   clear(){
  26.     this.characters=[]
  27.   }
  28.   //获取栈内元素数量
  29.   size():number{
  30.     return this.characters.length
  31.   }
  32. }
  33. const characterstack =new CharacterStack()
  34. export default  characterstack

3、在NumberStack.ets中进行数字栈的初始化，并进行导出；

  1. //数字栈
  2. export class NumberStack{
  3.   private numbers:string[]
  5.   constructor() {
  6.     this.numbers=[]
  7.   }
  8.   //入栈
  9.   push(item:string){
  10.     this.numbers.push(item)
  11.   }
  12.   //出栈
  13.   pop(){
  14.     return this.numbers.pop()
  15.   }
  16.   //返回栈顶元素
  17.   peek(){
  18.     return this.numbers[this.numbers.length-1]
  19.   }
  20.   //判断栈是否为空
  21.   isEmpty(){
  22.     return this.numbers.length===0
  23.   }
  24.   //清空栈内元素
  25.   clear(){
  26.     this.numbers=[]
  27.   }
  28.   //获取栈内元素数量
  29.   size():number{
  30.     return this.numbers.length
  31.   }
  32. }
  33. const numberstack =new NumberStack()
  34. export default  numberstack

已解决问题：
1、括号不对应，对前括号去掉，或直接报错；
2、重复输入符号的问题；
3、首相为符号的问题；

存在问题：
1、“3-”不可以输出正常的3；
在这里插入图片描述
2、对负数不可进行计算；…(存在未发现问题)

3、完整代码（一个文件）

  1. @Entry
  2. @Component
  3. struct calcultorDemo {
  4.   @State value:string =''
  5.   @State result:string=''
  6.   @State opacityValue:number=0
  7.   @State fontSizeValue:number=30
  8.   numbers :string[]=['(',')','÷','×','1','2','3','-','4','5','6','+','7','8','9']
  9.   numbers2:string[]=['%','0','.']
  10.   build() {
  11.     Column(){
  12.       Column(){
  13.         TextInput({text:this.value})
  14.           .height(80)
  15.           .margin({top:60})
  16.           .placeholderFont({size:60})
  17.           .fontSize(60)
  18.           .fontWeight(450)
  19.           .textAlign(TextAlign.End)
  20.           .backgroundColor(Color.White)
  21.         Text(this.result)
  22.           .opacity(this.opacityValue)
  23.           .width('100%')
  24.           .height(60)
  25.           .fontSize(this.fontSizeValue)
  26.           .fontWeight(450)
  27.           .textAlign(TextAlign.End)
  28.           .animation({duration:500})
  29.             // @ts-ignore
  30.           .textOverflow(TextOverflow.Clip)
  31.       }
  32.       Column(){//计算机主体页面
  33.         Grid(){
  34.           GridItem(){
  35.             Text('MC')
  36.               .TextStyle()
  37.           }
  38.           .oneStyle()//MC（清零）工具
  40.           GridItem(){
  41.             Text('MR')
  42.               .TextStyle()
  43.           }
  44.           .oneStyle()
  46.           GridItem(){
  47.             Image($r('app.media.delete'))
  48.               .fillColor(Color.Blue)
  49.               .height(40)
  50.           }
  51.           .oneStyle()
  52.           .onClick(()=>{
  53.             this.value=this.value.slice(0,this.value.length-1)
  54.             this.result=''
  55.           })
  57.           GridItem(){
  58.             Text('C')
  59.               .TextStyle()
  60.           }
  61.           .oneStyle()
  62.           .onClick(()=>{
  63.             this.value=''
  64.             this.result=''
  65.           })
  67.           ForEach(this.numbers,item=>{
  68.             GridItem(){
  69.               Text(item)
  70.                 .TextStyle()
  71.             }
  72.             .onClick(()=>{
  73.               if (this.value === '' && (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%')) {
  74.                 return
  75.               }//判断点击的第一个字符是不是运算符，若是则返回
  76.               if (this.value[this.value.length - 1] === '+' || this.value[this.value.length - 1] === '-' ||
  77.               this.value[this.value.length - 1] === '×' || this.value[this.value.length - 1] === '÷' ||
  78.               this.value[this.value.length - 1] === '%') {
  79.                 // 如果当前点击的是运算符，则替换最后一个运算符
  80.                 if (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%') {
  81.                   this.value = this.value.slice(0, this.value.length - 1) + item
  82.                 } else {
  83.                   this.value += item
  84.                 }
  85.               } else {
  86.                 this.value = this.value.concat(item)
  87.               }
  88.             })
  89.             .oneStyle()
  90.           })
  92.           GridItem(){
  93.             Text('=')
  94.               .TextStyle()
  95.               .fontColor(Color.White)
  96.           }
  97.           .rowStart(5)
  98.           .rowEnd(6)
  99.           .borderRadius(40)
  100.           .backgroundColor(Color.Blue)
  101.           .onClick(()=>{
  102.             this.result=total(checkParentheses(this.value+'#').cleanedExpression)
  103.             this.opacityValue=1
  104.             this.fontSizeValue=50
  105.           })
  107.           ForEach(this.numbers2,item=>{
  108.             GridItem(){
  109.               Text(item)
  110.                 .TextStyle()
  111.             }
  112.             .onClick(()=>{this.value=this.value.concat(item)})
  113.             .oneStyle()
  114.           })
  115.         }
  116.         .width('100%')
  117.         .height(500)
  118.         .columnsTemplate('1fr 1fr 1fr 1fr')
  119.         .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
  120.         .columnsGap(8)
  121.         .rowsGap(12)
  122.         .padding(12)
  123.         .backgroundColor('#fff6f0f0')
  124.         .borderRadius({topLeft:20,topRight:20})
  125.       }
  126.       .layoutWeight(1)
  127.       .justifyContent(FlexAlign.End)
  128.     }
  129.     .height('100%')
  130.   }
  131. }
  132. @Styles function oneStyle(){
  133.   .backgroundColor(Color.White)
  134.   .height(70)
  135.   .width(70)
  136.   .borderRadius(40)
  137.   .shadow({color:Color.Gray,radius:5})
  138. }
  139. @Extend(Text) function TextStyle() {
  140.   .fontSize(25)
  141.   .fontWeight(400)
  142. }
  144. //运算符栈
  145. class CharacterStack{
  146.   private characters:string[]
  148.   constructor() {
  149.     this.characters=[]
  150.   }
  151.   //入栈
  152.   push(item:string){
  153.     this.characters.push(item)
  154.   }
  155.   //出栈
  156.   pop(){
  157.     return this.characters.pop()
  158.   }
  159.   //返回栈顶元素
  160.   peek(){
  161.     return this.characters[this.characters.length-1]
  162.   }
  163.   //判断栈是否为空
  164.   isEmpty(){
  165.     return this.characters.length===0
  166.   }
  167.   //清空栈内元素
  168.   clear(){
  169.     this.characters=[]
  170.   }
  171.   //获取栈内元素数量
  172.   size():number{
  173.     return this.characters.length
  174.   }
  175. }
  176. const characterstack =new CharacterStack()
  178. //数字栈
  179. export class NumberStack{
  180.   private numbers:string[]
  182.   constructor() {
  183.     this.numbers=[]
  184.   }
  185.   //入栈
  186.   push(item:string){
  187.     this.numbers.push(item)
  188.   }
  189.   //出栈
  190.   pop(){
  191.     return this.numbers.pop()
  192.   }
  193.   //返回栈顶元素
  194.   peek(){
  195.     return this.numbers[this.numbers.length-1]
  196.   }
  197.   //判断栈是否为空
  198.   isEmpty(){
  199.     return this.numbers.length===0
  200.   }
  201.   //清空栈内元素
  202.   clear(){
  203.     this.numbers=[]
  204.   }
  205.   //获取栈内元素数量
  206.   size():number{
  207.     return this.numbers.length
  208.   }
  209. }
  210. const numberstack =new NumberStack()
  212. //检查括号是否多余，且若前括号多余则去掉多余的前括号
  213. function checkParentheses(expression: string): { valid: boolean, cleanedExpression: string } {
  214.   let stack = []
  215.   let cleanedExpression = expression
  217.   for (let ch of expression) {
  218.     if (ch === '(') {
  219.       stack.push(ch)
  220.     } else if (ch === ')') {
  221.       if (stack.length === 0) {
  222.         return { valid: false, cleanedExpression: expression }
  223.       }
  224.       stack.pop()
  225.     }
  226.   }
  227.   // 去掉多余的前括号
  228.   while (stack.length > 0) {
  229.     let index = cleanedExpression.indexOf('(')
  230.     if (index !== -1) {
  231.       cleanedExpression = cleanedExpression.slice(0, index) + cleanedExpression.slice(index + 1)
  232.     }
  233.     stack.pop()
  234.   }
  235.   console.log(cleanedExpression)
  236.   return { valid: stack.length === 0, cleanedExpression }
  238. }
  240. function total(expression:string){
  241.   characterstack.push('#')
  242.   let i=0
  243.   let ch=expression[i]
  244.   while (ch!='#'||characterstack.peek()!='#') {
  245.     if(!Instring(ch)){//进行多位数的入栈
  246.       let numStr = ch
  247.       while (i + 1 < expression.length && !Instring(expression[i + 1])) {
  248.         ch = expression[++i]
  249.         numStr += ch
  250.       }
  251.       numberstack.push(numStr)
  252.       ch = expression[++i]
  253.     }
  254.     else{
  256.       switch (Precede(characterstack.peek(),ch)){
  257.         case '<':{
  258.           characterstack.push(ch);
  259.           ch=expression[++i]
  260.           break
  261.         }
  262.         case '>':{
  263.           let theta= characterstack.pop()
  264.           let b=numberstack.pop()
  265.           let a=numberstack.pop()
  266.           numberstack.push(Operate(a,theta,b))
  267.           break
  268.         }
  269.         case '=':{
  270.           characterstack.pop()
  271.           ch=expression[++i]
  272.           break
  273.         }
  274.       }
  275.     }
  276.   }
  277.   return numberstack.peek()
  278. }
  280. //判断ch是否为运算符
  281. function Instring(ch:string){
  282.   let num:string[]=['+','-','(',')','÷','×','#','%']
  283.   return num.includes(ch)
  284. }
  286. //判断运算符的优先级
  287. function Precede(thetal:string,thetal2:string):string{
  288.   if((thetal=='('&&thetal2==')')||(thetal=='#'&&thetal2=='#')){
  289.     return '='
  290.   }
  291.   else if(thetal=='('||thetal=='#'||thetal2=='('||(thetal=='+'||thetal=='-')&&(thetal2=='×'||thetal2=='÷'||thetal2=='%')){
  292.     return '<'
  293.   }
  294.   else return '>'
  295. }
  297. //计算两数的运算结果
  298. function Operate(first:string,theta:string,second:string):string{
  299.   switch (theta){
  300.     case '+':
  301.       return ((+first)+(+second)).toString()
  302.     case '-':
  303.       return ((+first)-(+second)).toString()
  304.     case '×':
  305.       return ((+first)*(+second)).toString()
  306.     case '÷':
  307.       return ((+first)/(+second)).toString()
  308.     case '%':
  309.       return ((+first)%(+second)).toString()
  310.   }
  311.   return 'NaN'
  312. }
标签： 前端 harmonyos 华为
本文转载自: https://blog.csdn.net/weixin_74943910/article/details/140805647
版权归原作者 了了一。 所有， 如有侵权，请联系我们删除。
登录后发布评论

“使用ArkTs进行计算器的实现”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？