鸿蒙应用开发---计算器
计算器
效果图
首先，先给大家看一下计算器的效果图
- 第一个是计算器的UI设计
- 第二个是科学计算器的页面布局（科学计算器的相关功能还没有实现）
- 第三个是退格设计：在计算式预览组件中滑动手指即可（左滑或者右滑）
设计思路
UI设计
这个UI设计模仿的是苹果手机计算器风格，不能说很像但是还是挺像的，一眼看去可以发现主要有两种风格的按钮：一种是圆形按钮，另一种是数字‘0’所在的椭圆按钮，所以以此出发，我们可以构造两个子组件来完成按钮的设计，最后将他们使用Row组件和Column组件按照顺序排布即可
按钮功能分析
- 点击后可以将这个按钮对应的字符添加到计算式字符串中（详见下面代码的OnClick事件）
- 点击时透明度发生变化以实现点击动效（详见下面代码的OnTouch事件）
- 在计算式的Row组件中手指滑动实现退格（退位）操作（详见下面代码的On）
- 外观和谐美观
滑动退格实现原理思路
- 定义一个起始坐标(sta_x)、波尔类型的标记(flag==false)以及手指滑动过程中x坐标的偏移量(distance_x)
- 获得手指按下时的x坐标作为起始坐标(sta_x)，并将flag改为true代表手指开始接触屏幕
- 手指滑动计算distance_x偏移量，如果偏移量大于某个值并且flag是true时就删除计算式字符串的最后一位，即实现退格操作，同时并把flag再次置为false使得如果不松手的话无论手指怎么滑动都只能进行一次退格。
- 手指离开时flag置为true，方便进行下一次滑动退格。
滑动退格源代码
Row() {
Text(`${this.cal}`)
.fontSize(24)
.fontColor(Color.White)
}.height(70)
.width('100%')
.justifyContent(FlexAlign.End)
.padding({ right: 35 })
//通过onTouch事件来实现滑动退格
.onTouch((Event:TouchEvent)=>{
if(Event.type==TouchType.Down){
//获得手指按下时的x坐标作为起始坐标
this.sta_x = Event.touches[0].x
this.Delete_bool = true;
}
if(Event.type==TouchType.Up){
this.Delete_bool = true
}
if(Event.type==TouchType.Move){
//移动过程中计算x轴上移动的距离
this.distance_x = Math.abs(this.sta_x - Event.touches[0].x)
//如果距离超过20就进行退格操作
if(this.distance_x>20&&this.Delete_bool == true){
this.cal = this.cal.slice(0,-1);
this.Delete_bool = false;
}
}
})
圆形按钮源代码（包含按钮动画）
@Component
export struct Button1{
//计算式
@Link cal:string
//计算结果
@Link result:string|undefined|number
//是否已经按下等号的标记
@Consume flag:boolean
//按钮透明度设置
@Link button_opacity_son:number
//1为测试数据
num:string = '1'
//按钮颜色
buttonColor:number = 0x333333
//文本颜色
textColor:number = Color.White
//文本大小
textSize:number = 28
build() {
Column(){
Text(`${this.num}`)
.fontColor(this.textColor)
.fontWeight(FontWeight.Medium)
.fontSize(this.textSize)
}.justifyContent(FlexAlign.Center)
//按下按钮时，按钮的透明度改变
.onTouch((Event:TouchEvent)=>{
if(Event.type==TouchType.Down){
this.button_opacity_son = 0.5
}
if(Event.type==TouchType.Up){
this.button_opacity_son = 1;
}
})
.width(80)
.height(80)
.opacity(this.button_opacity_son)
.alignItems(HorizontalAlign.Center)
.backgroundColor(this.buttonColor)
.borderRadius(40)
.onClick(()=>{
//’AC‘功能的实现
if(this.num=='AC'){
this.flag = true;
this.cal='';
this.result = '0';
return
}
else if(this.num=='='){
//如果第一次按下等号就显示等号
if(this.flag == true) {
this.flag = false;
let EndExpression =SwitchMiddleToEnd(this.cal);
EndExpression.print_queue()
this.result = calculate_achieve(EndExpression);
}
//否则不显示等号
else {
let EndExpression = SwitchMiddleToEnd(this.cal);
EndExpression.print_queue()
this.result = calculate_achieve(EndExpression);
this.result = String(roundToDecimal(this.result));
}
}
//将按钮所对应的字符加到计算式后
else {
this.cal += this.num;
}
})
}
}
圆形按钮预览图
椭圆按钮源代码
和圆形按钮构造基本相同，只是宽度不同，注释看上面的圆形按钮注释即可
@Component
export struct Button2{
@Link cal:string
@Link button_opacity_son:number
num:string = '0'
buttonColor:number = 0x333333
textColor:number = Color.White
textSize:number = 28
build() {
Column(){
Text(`${this.num}`)
.fontColor(this.textColor)
.fontWeight(FontWeight.Medium)
.fontSize(this.textSize)
}.justifyContent(FlexAlign.Center)
.onTouch((Event:TouchEvent)=>{
if(Event.type==TouchType.Down){
this.button_opacity_son = 0.5
}
if(Event.type==TouchType.Up){
this.button_opacity_son = 1;
}
})
.width(170)
.opacity(this.button_opacity_son)
.height(80)
.alignItems(HorizontalAlign.Center)
.backgroundColor(this.buttonColor)
.borderRadius(40)
.onClick(()=>{
this.cal+=this.num;
})
}
}
椭圆按钮预览图
计算逻辑的实现
我们先来看看，对于“9 + (3 - 1) × 3 + 10 ÷ 2”，这种表达式叫做中缀表达式，就是我们平时数学上遇到的算式，如果要用后缀表示法应该是这个样子“9 3 1 - 3 × 10 2 ÷ +”,叫后缀表达式的原因在于所有的符号都是在要运算数字的后面出现。显然这里没有了括号，对于从来没有接触过后缀表达式的同学来讲，这样的表述是很难受的，不过人不喜欢，机器却是很喜欢的，比如我们“聪明的计算机”。
因此我们现在应该干什么事呢？没错，现在需要将我们熟悉的数学算式改为计算机喜欢的式子（即：中缀表达式转化为后缀表达式），然后再根据数据结构中的栈和队列来实现这个运算逻辑，最后将结果显示在我们的屏幕上即可。
总结主要有以下几步：
- 中缀表达式转换为后缀表达式
- 利用栈完成对后缀表达式的计算并获得结果
- 最后将计算结果显示出来
中缀表达式转后缀表达式
- 规则：从左到右遍历中缀表达式的每个数字和符号，若是数字就输出，即成为后缀表达式的一部分；若是符号，则判断其与栈顶符号的优先级，是右括号或者优先级不高于栈顶符号（乘除优先加减）则栈顶元素依次出栈并输出，并将当前符号进栈，一直到最终输出后缀表达式为止。
- 做法：我们这里分别构造了一个队列和一个栈，栈根据以上规则进行获得后缀表达式，而队列用来存储后缀表达式，最后将这个存储着后缀表达式的队列返回。关于栈和队列的构建可以看下面两个博客：
代码部分（获得运算符优先级函数 && 中缀表达式转后缀表达式函数）
//获得运算符优先级等级的函数
function getPrecedence(item:string):number{
switch(item){
case '%':return 3
case '×':return 2
case '÷':return 2
case '+':return 1
case '-':return 1
default:return 0
}
}
//中缀表达式转后缀表达式函数
export function SwitchMiddleToEnd(cal:string){
let queue = new queue_my();
let first_fu:boolean = true
let switchStack = new CharacterStack();
let i =0;
while(i<cal.length){
//如果遍历到数字直接入队
if(isNumber(cal[i])){
let numberstring = '';
while(isNumber(cal[i])){
numberstring+=cal[i];
i++
}
queue.enqueue(numberstring);
// console.log(`${numberstring}入队`);
i--
}
//如果遇到第一个位置是左括号加-号
else if(cal[0]=='('&&cal[1]=='-'&&first_fu){
switchStack.push(cal[0]);
let numberstring = '-'
first_fu = false;
i = 2
while(isNumber(cal[i])){
numberstring+=cal[i]
i++
}
queue.enqueue(numberstring)
i--
// console.log(`${numberstring}入队`);
// console.log(`此时遍历到了：${cal[i]}`)
}
else if(cal[0]=='-'&&isNumber(cal[1])&&first_fu){
let numberstring = '-';
first_fu = false;
i=1;
while(isNumber(cal[i])){
numberstring+=cal[i];
i++
}
queue.enqueue(numberstring);
// console.log(`${numberstring}入队`);
i--;
}
//如果连按几次同一个操作符
else if(!isNumber(cal[i])&&!isNumber(cal[i+1])&&cal[i]==cal[i+1]){
i++;
}
//带括号的负数在中间的时候
else if(cal[i]=='('&&cal[i+1]=='-'&&isNumber(cal[i+2])){
let numberstring = '-';
i = i+2;
while(isNumber(cal[i])){
numberstring+=cal[i];
++i
}
queue.enqueue(numberstring)
// console.log(`${numberstring}已经入队`)
}
//如果栈中为空或者遇到左括号直接入栈
else if(switchStack.isEmpty()||cal[i]=='('){
// if(cal[i]=='(') console.log('遇到了左括号')
switchStack.push(cal[i]);
}
//栈顶操作符优先级小于当前操作符优先级
else if(cal[i]!=')'&&getPrecedence(switchStack.peek())<getPrecedence(cal[i])){
switchStack.push(cal[i]);
}
//栈顶操作符优先级大于当前操作符优先级
else if(cal[i]!=')'&&getPrecedence(switchStack.peek())>=getPrecedence(cal[i])){
//栈顶元素出栈并且加到队列中去
while(getPrecedence(cal[i])<=getPrecedence(switchStack.peek()))
{queue.enqueue(String(switchStack.pop()))
if(switchStack.isEmpty()){break}
}
switchStack.push(cal[i]);
}
//如果遇到了右括号
else if(cal[i]==')') {
// console.log('遇到了右括号')
while (switchStack.peek() != '(') {
let temp: string = String(switchStack.pop());
queue.enqueue(temp);
}
//遇到左括号时直接将左括号弹出
switchStack.pop()
// console.log('左括号出栈')
}
i++;
}
//最后将剩余的操作符全部放到队列中
while(!switchStack.isEmpty()) {
queue.enqueue(String(switchStack.pop()))
}
return queue;
}
判断该字符是数字部分还是操作符部分
这里用了两个函数：
- 判断这个字符是不是数字部分：
function isNumber(item:string):boolean{
if(item=='0'||item=='1'||item=='2'||item=='3'||item=='4'||item=='5'||item=='6'||
item=='7'||item=='8'||item=='9'||item=='.'){
return true;
}
else return false;
}
- 判断这个字符是不是操作符
function isCharacter(item:string):boolean{
if(item=='+'||item=='-'||item=='÷'||item=='×'||item=='('||item==')'){
return true;
}
else return false;
后缀表达式计算结果
- 规则：从左到右遍历表达式的每个数字和符号，遇到是数字就入栈，遇到是符号，就将处于栈顶的两个数字出栈，进行运算，运算结果进栈，一直到最终获得结果。
代码部分（后缀表达式计算结果）
//后缀表达式计算函数
export function calculate_achieve(que:queue_my):string{
let numberstack = new NumberStack();
let i =0;
let sum=que.size()
while(i<sum){
//如果遇到数字直接入栈并删除该元素
if(!isCharacter(que.peek())){
console.log(`${que.peek()}已经入栈`)
numberstack.push(que.peek());
que.dequeue()
i++;
}
//如果遇到了操作符
else{
let num_up = numberstack.pop();
let num_down = numberstack.pop();
if(que.peek()=='+'){
numberstack.push(String(Number(num_down)+Number(num_up)))
// console.log(`${String(Number(num_down)+Number(num_up))}入栈`)
}
else if(que.peek()=='-'){
numberstack.push(String(Number(num_down)-Number(num_up)))
// console.log(`${String(Number(num_down)-Number(num_up))}入栈`)
}
//遇到‘3’时会出现精度问题，故这里解决的是精度问题
else if(que.peek()=='×'){
if(num_up=='3'||num_up=='6'||num_up=='9') {
numberstack.push(String((Number(num_down)*(Number(num_up)*10000))/10000))
}
else{
numberstack.push(String((Number(num_down) * Number(num_up) * 100) / 100))
}
// console.log(`${String(Number(num_down)*Number(num_up))}入栈`)
}
else if(que.peek()=='÷'){
if(num_up=='0') numberstack.push('不能除以0')
else {
numberstack.push(String(Number(num_down) / Number(num_up)))
}
// console.log(`${String(Number(num_down)/Number(num_up))}入栈`)
}
que.dequeue();
i++;
}
}
return String(numberstack.pop());
}
总结及心得
到了这里，基本上这个计算器的主要组成部分已经大功告成了，在这次做这个计算器的时候遇到了不少困难，由于没有系统学习数据结构的知识，导致完成计算逻辑时不知道从何下手，查阅了大量资料后才明白了其中的道理，最后完成了这个仍然存在一些瑕疵的计算器。
虽然过程难了一点，不过好在结果是好的，所以我觉得当我们在学习计算机知识的时候切记一定不要急躁，要看清每一个细节，打牢每一个基础，这里引用初中政治老师常说的一句话：“基础不牢，地动山摇”，现在回头看这句话说的真的很对，无论哪个行业或者哪个学科都不是一蹴而就的，而是日积月累的，一个个细小的知识点（基础）才能构成稳固的知识体系。
下面是我做的计算器的全部代码分享给大家（注：科学计算器里面功能没有实现！！！），如果有什么改进的好想法可以发在评论区呢~
完整代码（多个子组件和父组件都写在里面，复制后不可直接使用，需要拆分以下 && 父组件中满足if条件后的代码不具有参考价值！！！）
import { Button1 } from '../model/Button1'
import { Button1_second } from '../model/Button1_second'
import { Button2_second } from '../model/Button2_second'
import { Button2 } from '../model/Button2'
import {CharacterStack} from '../model/CharacterStack'
import {NumberStack} from '../model/NumberStack'
import {queue_my} from '../model/Queue'
//科学计算器中‘0’按钮子组件】
export struct Button2_second{
@Link cal:string
@Link button_opacity_son:number
num:string = '0'
buttonColor:number = 0x333333
textColor:number = Color.White
textSize:number = 28
build() {
Column(){
Text(`${this.num}`)
.fontColor(this.textColor)
.fontWeight(FontWeight.Medium)
.fontSize(this.textSize)
}.justifyContent(FlexAlign.Center)
.onTouch((Event:TouchEvent)=>{
if(Event.type==TouchType.Down){
this.button_opacity_son = 0.5
}
if(Event.type==TouchType.Up){
this.button_opacity_son = 1;
}
})
.width(130)
.opacity(this.button_opacity_son)
.height(60)
.alignItems(HorizontalAlign.Center)
.backgroundColor(this.buttonColor)
.borderRadius(40)
.onClick(()=>{
this.cal+=this.num;
})
}
}
//计算器主界面‘0’按钮子组件
export struct Button2{
@Link cal:string
@Link button_opacity_son:number
num:string = '0'
buttonColor:number = 0x333333
textColor:number = Color.White
textSize:number = 28
build() {
Column(){
Text(`${this.num}`)
.fontColor(this.textColor)
.fontWeight(FontWeight.Medium)
.fontSize(this.textSize)
}.justifyContent(FlexAlign.Center)
.onTouch((Event:TouchEvent)=>{
if(Event.type==TouchType.Down){
this.button_opacity_son = 0.5
}
if(Event.type==TouchType.Up){
this.button_opacity_son = 1;
}
})
.width(170)
.opacity(this.button_opacity_son)
.height(80)
.alignItems(HorizontalAlign.Center)
.backgroundColor(this.buttonColor)
.borderRadius(40)
.onClick(()=>{
this.cal+=this.num;
})
}
}
//科学计算器圆形按钮子组件
import {calculate_achieve} from '../pages/Index'
import {SwitchMiddleToEnd} from '../pages/Index'
import {roundToDecimal} from '../pages/Index'
@Component
export struct Button1_second{
@Link cal:string
@Link result:string|undefined|number
@Consume flag:boolean
@Link button_opacity_son:number
num:string = '1'
buttonColor:number = 0x333333
textColor:number = Color.White
textSize:number = 24
build() {
Column(){
Text(`${this.num}`)
.fontColor(this.textColor)
.fontWeight(FontWeight.Medium)
.fontSize(this.textSize)
}.justifyContent(FlexAlign.Center)
.onTouch((Event:TouchEvent)=>{
if(Event.type==TouchType.Down){
this.button_opacity_son = 0.5
}
if(Event.type==TouchType.Up){
this.button_opacity_son = 1;
}
})
.width(60)
.height(60)
.opacity(this.button_opacity_son)
.alignItems(HorizontalAlign.Center)
.backgroundColor(this.buttonColor)
.borderRadius(30)
.onClick(()=>{
if(this.num=='AC'){
this.flag = true;
this.cal='';
this.result = '0';
return
}
else if(this.num=='='){
if(this.flag == true) {
this.flag = false;
let EndExpression =SwitchMiddleToEnd(this.cal);
EndExpression.print_queue()
this.result = calculate_achieve(EndExpression);
}
else {
let EndExpression = SwitchMiddleToEnd(this.cal);
EndExpression.print_queue()
this.result = calculate_achieve(EndExpression);
this.result = String(roundToDecimal(this.result));
}
}
else {
this.cal += this.num;
}
})
}
}
//计算器主界面圆形按钮子组件
import {calculate_achieve} from '../pages/Index'
import {SwitchMiddleToEnd} from '../pages/Index'
export struct Button1{
//计算式
@Link cal:string
//计算结果
@Link result:string|undefined|number
//是否已经按下等号的标记
@Consume flag:boolean
//按钮透明度设置
@Link button_opacity_son:number
//1为测试数据
num:string = '1'
//按钮颜色
buttonColor:number = 0x333333
//文本颜色
textColor:number = Color.White
//文本大小
textSize:number = 28
build() {
Column(){
Text(`${this.num}`)
.fontColor(this.textColor)
.fontWeight(FontWeight.Medium)
.fontSize(this.textSize)
}.justifyContent(FlexAlign.Center)
//按下按钮时，按钮的透明度改变
.onTouch((Event:TouchEvent)=>{
if(Event.type==TouchType.Down){
this.button_opacity_son = 0.5
}
if(Event.type==TouchType.Up){
this.button_opacity_son = 1;
}
})
.width(80)
.height(80)
.opacity(this.button_opacity_son)
.alignItems(HorizontalAlign.Center)
.backgroundColor(this.buttonColor)
.borderRadius(40)
.onClick(()=>{
//’AC‘功能的实现
if(this.num=='AC'){
this.flag = true;
this.cal='';
this.result = '0';
return
}
else if(this.num=='='){
//如果第一次按下等号就显示等号
if(this.flag == true) {
this.flag = false;
let EndExpression =SwitchMiddleToEnd(this.cal);
EndExpression.print_queue()
this.result = calculate_achieve(EndExpression);
}
//否则不显示等号
else {
let EndExpression = SwitchMiddleToEnd(this.cal);
EndExpression.print_queue()
this.result = calculate_achieve(EndExpression);
this.result = String(roundToDecimal(this.result));
}
}
//将按钮所对应的字符加到计算式后
else {
this.cal += this.num;
}
})
}
}
//数字栈
export class NumberStack{
numberstack:string[];
constructor() {
this.numberstack = [];
}
push(item:string){
this.numberstack.push(item);
}
pop(){
return this.numberstack.pop()
}
peek(){
return this.numberstack[this.numberstack.length-1]
}
isEmpty(){
return this.numberstack.length ? false : true
}
clear(){
this.numberstack = [];
}
}
//操作符栈
export class CharacterStack{
characterstack:string[];
constructor() {
this.characterstack = [];
}
push(item:string){
this.characterstack.push(item);
}
pop(){
return this.characterstack.pop()
}
length(){
return this.characterstack.length;
}
peek(){
return this.characterstack[this.characterstack.length-1]
}
isEmpty(){
return this.characterstack.length ? false : true
}
clear(){
this.characterstack = [];
}
}
export class queue_my{
items:string[]
constructor(){
this.items = [];
}
enqueue(item:string){
this.items.push(item);
}
//删除第一个元素并且返回被删除的元素
dequeue(){
return this.items.shift();
}
//返回队列中的第一个元素
peek(){
return this.items[0];
}
//判断队列是否为空
isEmpty(){
return this.items.length ? false : true;
}
//返回队列大小
size(){
return this.items.length;
}
//打印队列中的元素
print_queue(){
for(let i =0;i<this.items.length;i++){
console.log(this.items[i]);
}
}
}
//父组件（入口）
import { Button1 } from '../model/Button1'
import { Button1_second } from '../model/Button1_second'
import { Button2_second } from '../model/Button2_second'
import { Button2 } from '../model/Button2'
import {CharacterStack} from '../model/CharacterStack'
import {NumberStack} from '../model/NumberStack'
import {queue_my} from '../model/Queue'
@Entry
@Component
struct Index {
@State cal:string = '';
@State result:string|undefined|number = '';
@Provide flag:boolean = true;
@State rotate_icon:number = 0;
sta_x = 0;
distance_x = 0;
@State UIstate:boolean = false;
@State Delete_bool:boolean = false;
@State button_opacity_0:number = 1
@State button_opacity_1:number = 1
@State button_opacity_2:number = 1
@State button_opacity_3:number = 1
@State button_opacity_4:number = 1
@State button_opacity_5:number = 1
@State button_opacity_6:number = 1
@State button_opacity_7:number = 1
@State button_opacity_8:number = 1
@State button_opacity_9:number = 1
@State button_opacity_10:number = 1
@State button_opacity_11:number = 1
@State button_opacity_12:number = 1
@State button_opacity_13:number = 1
@State button_opacity_14:number = 1
@State button_opacity_15:number = 1
@State button_opacity_16:number = 1
@State button_opacity_17:number = 1
@State button_opacity_18:number = 1
@State button_opacity_19:number = 1
@State button_opacity_20:number = 1
@State button_opacity_21:number = 1
@State button_opacity_22:number = 1
@State button_opacity_23:number = 1
@State button_opacity_24:number = 1
build() {
Column({space:10}) {
Row() {
Image($r('app.media.change'))
.width(40)
.height(40)
.rotate({angle:this.rotate_icon})
.animation({
duration:300
})
.onClick(()=>{
this.rotate_icon = this.rotate_icon+180;
this.UIstate = !this.UIstate;
})
}.width('100%')
.justifyContent(FlexAlign.End)
.margin({top:10,right:15})
Blank()
Column() {
Text(`${this.result}`)
.fontSize(60)
.fontColor(Color.White)
}
.alignItems(HorizontalAlign.End)
.justifyContent(FlexAlign.End)
.padding({ right: 30 })
.width('100%')
.height(100)
Row() {
Text(`${this.cal}`)
.fontSize(24)
.fontColor(Color.White)
}.height(70)
.width('100%')
.justifyContent(FlexAlign.End)
.padding({ right: 35 })
.onTouch((Event:TouchEvent)=>{
if(Event.type==TouchType.Down){
this.sta_x = Event.touches[0].x
this.Delete_bool = true;
}
if(Event.type==TouchType.Up){
this.Delete_bool = true
}
if(Event.type==TouchType.Move){
this.distance_x = Math.abs(this.sta_x - Event.touches[0].x)
// console.log(`x轴的距离为：${this.distance_x}`)
// console.log(`bool值为：${this.Delete_bool}`)
if(this.distance_x>20&&this.Delete_bool == true){
this.cal = this.cal.slice(0,-1);
this.Delete_bool = false;
}
}
})
//*******************************************************
//*******************************************************
//下面满足if条件代码为科学器部分，不建议参考，有大瑕疵！！！！！！
//else条件中的代码为计算器主界面代码，值得参考！！！
//*******************************************************
//*******************************************************
if (this.UIstate == true) {
Row({ space: 10 }) {
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_0,
result: $result,
num: 'lg',
textColor: Color.Black,
buttonColor: 0xA5A5A5
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_0,
result: $result,
num: 'ln',
textColor: Color.Black,
buttonColor: 0xA5A5A5
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_0,
result: $result,
num: 'sin',
textColor: Color.Black,
buttonColor: 0xA5A5A5
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_0,
result: $result,
num: 'cos',
textColor: Color.Black,
buttonColor: 0xA5A5A5
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_0,
result: $result,
num: 'tan',
textColor: Color.Black,
buttonColor: 0xA5A5A5
})
}
Row({ space: 10 }) {
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_0,
result: $result,
num: 'AC',
textColor: Color.Black,
buttonColor: 0xA5A5A5
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_1,
result: $result,
num: '(',
textColor: Color.Black,
buttonColor: 0xA5A5A5
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_2,
result: $result,
num: ')',
textColor: Color.Black,
buttonColor: 0xA5A5A5
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_3,
result: $result,
num: '÷',
buttonColor: 0xFF9F0B
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_4,
result: $result,
num: '%',
textSize: 22,
buttonColor: 0xFF9F0B
})
}
Row({ space: 10 }) {
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_4,
result: $result,
num: '7'
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_5,
result: $result,
num: '8'
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_6,
result: $result,
num: '9'
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_7,
result: $result,
num: '×',
textSize: 30,
buttonColor: 0xFF9F0B
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_7,
result: $result,
num: 'x!',
textSize: 24,
buttonColor: 0xFF9F0B
})
}
Row({ space: 10 }) {
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_8,
result: $result,
num: '4'
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_9,
result: $result,
num: '5'
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_10,
result: $result,
num: '6'
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_11,
result: $result,
num: '-',
textSize: 30,
buttonColor: 0xFF9F0B
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_11,
result: $result,
num: '1/x',
textSize: 20,
buttonColor: 0xFF9F0B
})
}
Row({ space: 10 }) {
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_12,
result: $result,
num: '1'
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_13,
result: $result,
num: '2'
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_14,
result: $result,
num: '3'
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_15,
result: $result,
num: '+',
textSize: 30,
buttonColor: 0xFF9F0B
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_15,
result: $result,
num: 'π',
textSize: 24,
buttonColor: 0xFF9F0B
})
}
Row({ space: 10 }) {
Button2_second({ cal: $cal, button_opacity_son: $button_opacity_16 })
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_17,
result: $result,
num: '.'
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_18,
result: $result,
num: '=',
textSize: 30,
buttonColor: 0xFF9F0B
})
Button1_second({
cal: $cal,
button_opacity_son: $button_opacity_18,
result: $result,
num: '=',
textSize: 30,
buttonColor: 0xFF9F0B
})
}.margin({ bottom: 20 })
}
//以上if中的代码不可参考！！！
//以下代码可参考！！！
else {
Row({ space: 10 }) {
Button1({
cal: $cal,
button_opacity_son: $button_opacity_0,
result: $result,
num: 'AC',
textColor: Color.Black,
buttonColor: 0xA5A5A5
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_1,
result: $result,
num: '(',
textColor: Color.Black,
buttonColor: 0xA5A5A5
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_2,
result: $result,
num: ')',
textColor: Color.Black,
buttonColor: 0xA5A5A5
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_3,
result: $result,
num: '÷',
buttonColor: 0xFF9F0B
})
}
Row({ space: 10 }) {
Button1({
cal: $cal,
button_opacity_son: $button_opacity_4,
result: $result,
num: '7'
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_5,
result: $result,
num: '8'
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_6,
result: $result,
num: '9'
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_7,
result: $result,
num: '×',
textSize: 30,
buttonColor: 0xFF9F0B
})
}
Row({ space: 10 }) {
Button1({
cal: $cal,
button_opacity_son: $button_opacity_8,
result: $result,
num: '4'
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_9,
result: $result,
num: '5'
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_10,
result: $result,
num: '6'
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_11,
result: $result,
num: '-',
textSize: 30,
buttonColor: 0xFF9F0B
})
}
Row({ space: 10 }) {
Button1({
cal: $cal,
button_opacity_son: $button_opacity_12,
result: $result,
num: '1'
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_13,
result: $result,
num: '2'
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_14,
result: $result,
num: '3'
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_15,
result: $result,
num: '+',
textSize: 30,
buttonColor: 0xFF9F0B
})
}
Row({ space: 10 }) {
Button2({ cal: $cal, button_opacity_son: $button_opacity_16 })
Button1({
cal: $cal,
button_opacity_son: $button_opacity_17,
result: $result,
num: '.'
})
Button1({
cal: $cal,
button_opacity_son: $button_opacity_18,
result: $result,
num: '=',
textSize: 30,
buttonColor: 0xFF9F0B
})
}
.margin({ bottom: 20 })
}
}
.width('100%')
.height('100%')
.backgroundColor(Color.Black)
}
}
//获得优先级等级的函数
function getPrecedence(item:string):number{
switch(item){
case '%':return 3
case '×':return 2
case '÷':return 2
case '+':
// console.log('读取到了+号')
return 1
case '-':return 1
default:return 0
}
}
//中缀表达式转后缀表达式函数
export function SwitchMiddleToEnd(cal:string){
let queue = new queue_my();
let first_fu:boolean = true
let switchStack = new CharacterStack();
let i =0;
while(i<cal.length){
//如果遍历到数字直接入队
if(isNumber(cal[i])){
let numberstring = '';
while(isNumber(cal[i])){
numberstring+=cal[i];
i++
}
queue.enqueue(numberstring);
console.log(`${numberstring}入队`);
i--
}
//如果遇到第一个位置是左括号加-号
else if(cal[0]=='('&&cal[1]=='-'&&first_fu){
switchStack.push(cal[0]);
let numberstring = '-'
first_fu = false;
i = 2
while(isNumber(cal[i])){
numberstring+=cal[i]
i++
}
queue.enqueue(numberstring)
i--
console.log(`${numberstring}入队`);
console.log(`此时遍历到了：${cal[i]}`)
}
else if(cal[0]=='-'&&isNumber(cal[1])&&first_fu){
let numberstring = '-';
first_fu = false;
i=1;
while(isNumber(cal[i])){
numberstring+=cal[i];
i++
}
queue.enqueue(numberstring);
console.log(`${numberstring}入队`);
i--;
}
//如果连按几次同一个操作符
else if(!isNumber(cal[i])&&!isNumber(cal[i+1])&&cal[i]==cal[i+1]){
i++;
}
//带括号的负数在中间的时候
else if(cal[i]=='('&&cal[i+1]=='-'&&isNumber(cal[i+2])){
let numberstring = '-';
i = i+2;
while(isNumber(cal[i])){
numberstring+=cal[i];
++i
}
queue.enqueue(numberstring)
console.log(`${numberstring}已经入队`)
}
//如果栈中为空或者遇到左括号直接入栈
else if(switchStack.isEmpty()||cal[i]=='('){
if(cal[i]=='(') console.log('遇到了左括号')
switchStack.push(cal[i]);
}
//栈顶操作符优先级小于当前操作符优先级
else if(cal[i]!=')'&&getPrecedence(switchStack.peek())<getPrecedence(cal[i])){
switchStack.push(cal[i]);
}
//栈顶操作符优先级大于当前操作符优先级
else if(cal[i]!=')'&&getPrecedence(switchStack.peek())>=getPrecedence(cal[i])){
//栈顶元素出栈并且加到队列中去
while(getPrecedence(cal[i])<=getPrecedence(switchStack.peek()))
{queue.enqueue(String(switchStack.pop()))
if(switchStack.isEmpty()){break}
}
switchStack.push(cal[i]);
}
//如果遇到了右括号
else if(cal[i]==')') {
// console.log('遇到了右括号')
while (switchStack.peek() != '(') {
let temp: string = String(switchStack.pop());
queue.enqueue(temp);
}
//遇到左括号时直接将左括号弹出
switchStack.pop()
// console.log('左括号出栈')
}
i++;
}
//最后将剩余的操作符全部放到队列中
while(!switchStack.isEmpty()) {
queue.enqueue(String(switchStack.pop()))
}
return queue;
}
//后缀表达式计算函数
export function calculate_achieve(que:queue_my):string{
let numberstack = new NumberStack();
let i =0;
let sum=que.size()
while(i<sum){
//如果遇到数字直接入栈并删除该元素
if(!isCharacter(que.peek())){
console.log(`${que.peek()}已经入栈`)
numberstack.push(que.peek());
que.dequeue()
i++;
}
//如果遇到了操作符
else{
let num_up = numberstack.pop();
let num_down = numberstack.pop();
if(que.peek()=='+'){
numberstack.push(String(Number(num_down)+Number(num_up)))
// console.log(`${String(Number(num_down)+Number(num_up))}入栈`)
}
else if(que.peek()=='-'){
numberstack.push(String(Number(num_down)-Number(num_up)))
// console.log(`${String(Number(num_down)-Number(num_up))}入栈`)
}
else if(que.peek()=='×'){
if(num_up=='3'||num_up=='6'||num_up=='9') {
numberstack.push(String((Number(num_down)*(Number(num_up)*10000))/10000))
}
else{
numberstack.push(String((Number(num_down) * Number(num_up) * 100) / 100))
}
// console.log(`${String(Number(num_down)*Number(num_up))}入栈`)
}
else if(que.peek()=='÷'){
if(num_up=='0') numberstack.push('不能除以0')
else {
numberstack.push(String(Number(num_down) / Number(num_up)))
}
// console.log(`${String(Number(num_down)/Number(num_up))}入栈`)
}
que.dequeue();
i++;
}
}
return String(numberstack.pop());
}
//判断这个字符是不是数字
function isNumber(item:string):boolean{
if(item=='0'||item=='1'||item=='2'||item=='3'||item=='4'||item=='5'||item=='6'||
item=='7'||item=='8'||item=='9'||item=='.'){
return true;
}
else return false;
}
//判断这个字符是不是操作符
function isCharacter(item:string):boolean{
if(item=='+'||item=='-'||item=='÷'||item=='×'||item=='('||item==')'){
return true;
}
else return false;
}
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
