菜单 搜索
首页 前端知识 使用ArkTs进行计算器的实现

使用ArkTs进行计算器的实现

2024-08-21 10:08:09 前端知识 前端哥 517 243 我要收藏

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

  • 1、写出大致的计算器构造
    • 在calcultorDemo.ets文件中
    • 在calculatorResult.ets中
  • 2、进行计算机的功能部分
    • 给每个按钮分别添加点击事件
    • 完成value的计算事件，利用栈进行算术表达式的求值：
  • 3、完整代码（一个文件）

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

在calcultorDemo.ets文件中

import {calculatorResult} from './calculatorResult'
import numberstack  from './NumberStack'
import characterstack from './CharacterStack'
@Entry
@Component
struct 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(){
      calculatorResult({value:$value,result:this.result,opacityValue:$opacityValue,fontSizeValue:$fontSizeValue})
      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(()=>{
            this.value=this.value.slice(0,this.value.length-1)
            this.result=''
          })

          GridItem(){
            Text('C')
              .TextStyle()
          }
          .oneStyle()
          .onClick(()=>{
            this.value=''
            this.result=''
          })

          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)
}

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

在calculatorResult.ets中

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

@Component
export struct  calculatorResult{
  @Link value:string
  @Prop result:string
  @Link opacityValue:number
  @Link fontSizeValue:number
  build() {
      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)
      }
  }
}

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

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

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

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

.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)
              }
            })

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

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

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

.onClick(()=>{
            this.value=''
            this.result=''
          })

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

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

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

//检查括号是否多余，且若前括号多余则去掉多余的前括号
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'
}

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

//运算符栈
 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 default  characterstack

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

//数字栈
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()
export default  numberstack

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

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

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

@Entry
@Component
struct 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(()=>{
            this.value=this.value.slice(0,this.value.length-1)
            this.result=''
          })

          GridItem(){
            Text('C')
              .TextStyle()
          }
          .oneStyle()
          .onClick(()=>{
            this.value=''
            this.result=''
          })

          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'
}
转载请注明出处或者链接地址：https://www.qianduange.cn//article/16360.html
标签
harmonyos
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

html将复选框变为圆形样例

2024-06-30 22:06:57

FastHTML：使用 Python 彻底改变 Web 开发

2024-08-30 20:08:20

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

CSS3 动画

2024-04-17 21:04:24

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

Android JSON：Gson,FastJson解析库的使用和对比分析

2024-06-19 23:06:27

json做小型数据库，初始化文件的简单判断处理方法

2024-08-30 03:08:57

java.lang.NoClassDefFoundError: com/fasterxml/jackson/databind/json/JsonMapper

2024-08-30 03:08:57

FastJson 升级导致引发的问题

2024-08-30 03:08:57

JWT（JSON Web Token）

2024-08-30 03:08:56

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
3

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
4

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
5

npm的使用

2024-08-18 00:08:131000
6

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
7

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
8

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
9

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
10

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！