ToB企服应用市场:ToB评测及商务社交产业平台

标题: 使用ArkTs举行计算器的实现 [打印本页]
作者: 用户云卷云舒    时间: 2024-10-23 14:38
标题: 使用ArkTs举行计算器的实现
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. }
  71. //判断ch是否为运算符
  72. function Instring(ch:string){
  73.   let num:string[]=['+','-','(',')','÷','×','#','%']
  74.   return num.includes(ch)
  75. }
  78. //判断运算符的优先级
  79. function Precede(thetal:string,thetal2:string):string{
  80.   if((thetal=='('&&thetal2==')')||(thetal=='#'&&thetal2=='#')){
  81.     return '='
  82.   }
  83.   else if(thetal=='('||thetal=='#'||thetal2=='('||(thetal=='+'||thetal=='-')&&(thetal2=='×'||thetal2=='÷'||thetal2=='%')){
  84.     return '<'
  85.   }
  86.   else return '>'
  87. }
  90. //计算两数的运算结果
  91. function Operate(first:string,theta:string,second:string):string{
  92.   switch (theta){
  93.     case '+':
  94.       return ((+first)+(+second)).toString()
  95.     case '-':
  96.       return ((+first)-(+second)).toString()
  97.     case '×':
  98.       return ((+first)*(+second)).toString()
  99.     case '÷':
  100.       return ((+first)/(+second)).toString()
  101.     case '%':
  102.       return ((+first)%(+second)).toString()
  103.   }
  104.   return 'NaN'
  105. }
复制代码
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@Componentstruct calcultorDemo {  @State value:string =''  @State result:string=''  @State opacityValue:number=0  @State fontSizeValue:number=30  numbers :string[]=['(',')','÷','×','1','2','3','-','4','5','6','+','7','8','9']  numbers2:string[]=['%','0','.']  build() {    Column(){      Column(){        TextInput({text:this.value})          .height(80)          .margin({top:60})          .placeholderFont({size:60})          .fontSize(60)          .fontWeight(450)          .textAlign(TextAlign.End)          .backgroundColor(Color.White)        Text(this.result)          .opacity(this.opacityValue)          .width('100%')          .height(60)          .fontSize(this.fontSizeValue)          .fontWeight(450)          .textAlign(TextAlign.End)          .animation({duration:500})            // @ts-ignore          .textOverflow(TextOverflow.Clip)      }      Column(){//计算机主体页面        Grid(){          GridItem(){            Text('MC')              .TextStyle()          }          .oneStyle()//MC（清零）工具          GridItem(){            Text('MR')              .TextStyle()          }          .oneStyle()          GridItem(){            Image($r('app.media.delete'))              .fillColor(Color.Blue)              .height(40)          }          .oneStyle()          .onClick(()=>{
  2.             this.value=this.value.slice(0,this.value.length-1)
  3.             this.result=''
  4.           })
  5.           GridItem(){            Text('C')              .TextStyle()          }          .oneStyle()          .onClick(()=>{
  6.             this.value=''
  7.             this.result=''
  8.           })
  9.           ForEach(this.numbers,item=>{            GridItem(){              Text(item)                .TextStyle()            }            .onClick(()=>{              if (this.value === '' && (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%')) {                return              }//判断点击的第一个字符是不是运算符，如果则返回              if (this.value[this.value.length - 1] === '+' || this.value[this.value.length - 1] === '-' ||              this.value[this.value.length - 1] === '×' || this.value[this.value.length - 1] === '÷' ||              this.value[this.value.length - 1] === '%') {                // 如果当前点击的是运算符，则更换最后一个运算符                if (item === '+' || item === '-' || item === '×' || item === '÷' || item === '%') {                  this.value = this.value.slice(0, this.value.length - 1) + item                } else {                  this.value += item                }              } else {                this.value = this.value.concat(item)              }            })            .oneStyle()          })          GridItem(){            Text('=')              .TextStyle()              .fontColor(Color.White)          }          .rowStart(5)          .rowEnd(6)          .borderRadius(40)          .backgroundColor(Color.Blue)          .onClick(()=>{            this.result=total(checkParentheses(this.value+'#').cleanedExpression)            this.opacityValue=1            this.fontSizeValue=50          })          ForEach(this.numbers2,item=>{            GridItem(){              Text(item)                .TextStyle()            }            .onClick(()=>{this.value=this.value.concat(item)})            .oneStyle()          })        }        .width('100%')        .height(500)        .columnsTemplate('1fr 1fr 1fr 1fr')        .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')        .columnsGap(8)        .rowsGap(12)        .padding(12)        .backgroundColor('#fff6f0f0')        .borderRadius({topLeft:20,topRight:20})      }      .layoutWeight(1)      .justifyContent(FlexAlign.End)    }    .height('100%')  }}@Styles function oneStyle(){  .backgroundColor(Color.White)  .height(70)  .width(70)  .borderRadius(40)  .shadow({color:Color.Gray,radius:5})}@Extend(Text) function TextStyle() {  .fontSize(25)  .fontWeight(400)}//运算符栈class CharacterStack{  private characters:string[]  constructor() {    this.characters=[]  }  //入栈  push(item:string){    this.characters.push(item)  }  //出栈  pop(){    return this.characters.pop()  }  //返回栈顶元素  peek(){    return this.characters[this.characters.length-1]  }  //判断栈是否为空  isEmpty(){    return this.characters.length===0  }  //清空栈内元素  clear(){    this.characters=[]  }  //获取栈内元素数量  size():number{    return this.characters.length  }}const characterstack =new CharacterStack()//数字栈export class NumberStack{  private numbers:string[]  constructor() {    this.numbers=[]  }  //入栈  push(item:string){    this.numbers.push(item)  }  //出栈  pop(){    return this.numbers.pop()  }  //返回栈顶元素  peek(){    return this.numbers[this.numbers.length-1]  }  //判断栈是否为空  isEmpty(){    return this.numbers.length===0  }  //清空栈内元素  clear(){    this.numbers=[]  }  //获取栈内元素数量  size():number{    return this.numbers.length  }}const numberstack =new NumberStack()//检查括号是否多余，且若前括号多余则去掉多余的前括号function checkParentheses(expression: string): { valid: boolean, cleanedExpression: string } {  let stack = []  let cleanedExpression = expression  for (let ch of expression) {    if (ch === '(') {      stack.push(ch)    } else if (ch === ')') {      if (stack.length === 0) {        return { valid: false, cleanedExpression: expression }      }      stack.pop()    }  }  // 去掉多余的前括号  while (stack.length > 0) {    let index = cleanedExpression.indexOf('(')    if (index !== -1) {      cleanedExpression = cleanedExpression.slice(0, index) + cleanedExpression.slice(index + 1)    }    stack.pop()  }  console.log(cleanedExpression)  return { valid: stack.length === 0, cleanedExpression }}function total(expression:string){  characterstack.push('#')  let i=0  let ch=expression[i]  while (ch!='#'||characterstack.peek()!='#') {    if(!Instring(ch)){//举行多位数的入栈      let numStr = ch      while (i + 1 < expression.length && !Instring(expression[i + 1])) {        ch = expression[++i]        numStr += ch      }      numberstack.push(numStr)      ch = expression[++i]    }    else{      switch (Precede(characterstack.peek(),ch)){        case '<':{          characterstack.push(ch);          ch=expression[++i]          break        }        case '>':{          let theta= characterstack.pop()          let b=numberstack.pop()          let a=numberstack.pop()          numberstack.push(Operate(a,theta,b))          break        }        case '=':{          characterstack.pop()          ch=expression[++i]          break        }      }    }  }  return numberstack.peek()}//判断ch是否为运算符function Instring(ch:string){  let num:string[]=['+','-','(',')','÷','×','#','%']  return num.includes(ch)}//判断运算符的优先级function Precede(thetal:string,thetal2:string):string{  if((thetal=='('&&thetal2==')')||(thetal=='#'&&thetal2=='#')){    return '='  }  else if(thetal=='('||thetal=='#'||thetal2=='('||(thetal=='+'||thetal=='-')&&(thetal2=='×'||thetal2=='÷'||thetal2=='%')){    return '<'  }  else return '>'}//计算两数的运算结果function Operate(first:string,theta:string,second:string):string{  switch (theta){    case '+':      return ((+first)+(+second)).toString()    case '-':      return ((+first)-(+second)).toString()    case '×':      return ((+first)*(+second)).toString()    case '÷':      return ((+first)/(+second)).toString()    case '%':      return ((+first)%(+second)).toString()  }  return 'NaN'}
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4