当前位置: 首页 > article >正文

HarmonyOS使用Grid网格实现计算器功能实现

使用Grid网格处理,实现了计算器的加减乘除功能

@Entry
@Component
struct GridPage {
  @State str: string = ""; //暂存区
  @State num: string = "0"; //输入区
  @State flagNum: boolean = false; //标识

  build() {
    Column() {
      Grid() {
        GridItem() {
          Text(this.str) //默认为空
        }
        .columnStart(1) //colum表示列
        .columnEnd(4) //1-4列
        .backgroundColor(Color.Pink)

        GridItem() {
          Text(this.num.toString())// 默认为0
            .fontSize(40)
            .fontWeight(FontWeight.Normal)
        }
        .columnStart(1) //colum表示列
        .columnEnd(4) //1-4列
        .backgroundColor(Color.White)

        GridItem() {
          Button('CE', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              const lastChar = this.str[this.str.length - 1]; // 获取最后一个字符
              if (lastChar === '=') { //清空操作
                this.str = "";
              }
              this.num = "0"
              console.info(`text组件内容是:${this.num}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('C', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
            this.num = '0' //重置
            this.str = '' //重置
            console.info(`text组件内容是:${this.num}`)
          })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('/', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              const flag = this.str[this.str.length - 1] === '='
              if (flag) {
                this.str = this.num + "/"; //如果结果已经计算,就重置为/
              } else {
                if (!this.flagNum) { //防止多打印出/线标识
                  const flag = this.str[this.str.length - 1] === '/' //判断最后一个字符是不是/
                  if (!flag) {
                    this.str = this.num + "/"; //如果不是则添加一个
                  } else { //如果是则进行计算
                    const result = parseAndChu(this.str, this.num);
                    this.num = result.toString();
                    this.str = result.toString() + "/";
                  }
                } else {
                  //如果不是则默认为初始第一个
                  const st = removeLastIfOperator(this.str) + "/";
                  this.str = st;
                }
              }
              this.flagNum = true;
              console.info(`str组件内容是:${this.str}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('*', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              const flag = this.str[this.str.length - 1] === '='
              if (flag) {
                this.str = this.num + "*";
              } else {
                if (!this.flagNum) {
                  const flag = this.str[this.str.length - 1] === '*'
                  if (!flag) {
                    this.str = this.num + "*";
                  } else {
                    const result = parseAndCheng(this.str, this.num);
                    this.num = result.toString();
                    this.str = result.toString() + "*";
                  }
                } else {
                  const st = removeLastIfOperator(this.str) + "*";
                  this.str = st;
                }
              }

              this.flagNum = true;
              console.info(`str组件内容是:${this.str}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('7', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              if (this.flagNum) {
                this.num = "7"
              } else {
                this.num = this.num == '0' ? "7" : this.num + "7"
              }
              this.flagNum = false;
              console.info(`text组件内容是:${this.num}`)
              console.info(`text组件内容是:${this.num}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('8', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              if (this.flagNum) {
                this.num = "8"
              } else {
                this.num = this.num == '0' ? "8" : this.num + "8"
              }
              this.flagNum = false;
              console.info(`text组件内容是:${this.num}`)
              console.info(`text组件内容是:${this.num}`)
            })

        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('9', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              if (this.flagNum) {
                this.num = "9"
              } else {
                this.num = this.num == '0' ? "9" : this.num + "9"
              }
              this.flagNum = false;
              console.info(`text组件内容是:${this.num}`)
              console.info(`text组件内容是:${this.num}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('-', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              const flag = this.str[this.str.length - 1] === '='
              if (flag) {
                this.str = this.num + "-";
              } else {
                if (!this.flagNum) {
                  const flag = this.str[this.str.length - 1] === '-'
                  if (!flag) {
                    this.str = this.num + "-";
                  } else {
                    const result = parseAndJian(this.str, this.num);
                    this.num = result.toString();
                    this.str = result.toString() + "-";
                  }
                } else {
                  const st = removeLastIfOperator(this.str) + "-";
                  this.str = st;
                }
              }

              this.flagNum = true;
              console.info(`str组件内容是:${this.str}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('4', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              if (this.flagNum) {
                this.num = "4"
              } else {
                this.num = this.num == '0' ? "4" : this.num + "4"
              }
              this.flagNum = false;
              console.info(`text组件内容是:${this.num}`)
              console.info(`text组件内容是:${this.num}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('5', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              if (this.flagNum) {
                this.num = "5"
              } else {
                this.num = this.num == '0' ? "5" : this.num + "5"
              }
              this.flagNum = false;
              console.info(`text组件内容是:${this.num}`)
              console.info(`text组件内容是:${this.num}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('6', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              if (this.flagNum) {
                this.num = "6"
              } else {
                this.num = this.num == '0' ? "6" : this.num + "6"
              }
              this.flagNum = false;
              console.info(`text组件内容是:${this.num}`)
              console.info(`text组件内容是:${this.num}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('+', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              const flag = this.str[this.str.length - 1] === '='
              if (flag) {
                this.str = this.num + "+";
              } else {
                if (!this.flagNum) {
                  const flag = this.str[this.str.length - 1] === '+'
                  if (!flag) {
                    this.str = this.num + "+";
                  } else {
                    const result = parseAndAdd(this.str, this.num);
                    this.num = result.toString();
                    this.str = result.toString() + "+";
                  }
                } else {
                  const st = removeLastIfOperator(this.str) + "+";
                  this.str = st;
                }
              }

              this.flagNum = true;
              console.info(`str组件内容是:${this.str}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('1', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              if (this.flagNum) {
                this.num = "1"
              } else {
                this.num = this.num == '0' ? "1" : this.num + "1"
              }
              this.flagNum = false;
              console.info(`text组件内容是:${this.num}`)
              console.info(`text组件内容是:${this.num}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('2', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              if (this.flagNum) {
                this.num = "2"
              } else {
                this.num = this.num == '0' ? "2" : this.num + "2"
              }
              this.flagNum = false;
              console.info(`text组件内容是:${this.num}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('3', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80)
            .onClick(() => {
              if (this.flagNum) {
                this.num = "3"
              } else {
                this.num = this.num == '0' ? "3" : this.num + "3"
              }
              this.flagNum = false;
              console.info(`text组件内容是:${this.num}`)
            })
        }
        .backgroundColor(Color.Red)

        GridItem() {
          Button('=', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(160)
            .onClick(() => {
              if (!this.flagNum) {
                const flag = this.str[this.str.length - 1] === '='
                if (!flag) {
                  const lastChar = this.str[this.str.length - 1]; // 获取最后一个字符
                  if (lastChar === '+') {
                    const result = parseAndAdd(this.str, this.num);
                    this.str = this.str + this.num + "=";
                    this.num = result.toString();
                  } else if (lastChar === '-') {
                    const result = parseAndJian(this.str, this.num);
                    this.str = this.str + this.num + "=";
                    this.num = result.toString();
                  } else if (lastChar === '*') {
                    const result = parseAndCheng(this.str, this.num);
                    this.str = this.str + this.num + "=";
                    this.num = result.toString();
                  } else if (lastChar === '/') {
                    const result = parseAndChu(this.str, this.num);
                    this.str = this.str + this.num + "=";
                    this.num = result.toString();
                  }
                }
              } else {
                const flag = this.str[this.str.length - 1] === '='
                if (flag) {
                  if (this.str === '') {
                    this.str = this.num + "="
                  }
                  return;
                }
                if (this.str === '') {
                  this.str = this.num + "="
                  return;
                }
                const st = removeLastIfOperator(this.str) + "=";
                this.str = st;
              }
              this.flagNum = true;
              console.info(`str组件内容是:${this.str}`)
            })
        }
        .rowStart(5) //开始第5行
        .rowEnd(6) //结束第6行
        .backgroundColor(Color.Red)

        GridItem() {
          Button('0', { type: ButtonType.Normal, stateEffect: true})
            .width(160)
            .height(80)
            .onClick(() => {
              if (this.flagNum) {
                this.num = "0"
              } else {
                this.num = this.num == '0' ? "0" : this.num + "0"
              }
              this.flagNum = false;
              console.info(`text组件内容是:${this.num}`)
            })
        }
        .columnStart(1) //第一列
        .columnEnd(2) //第二列
        .backgroundColor(Color.Grey)

        GridItem() {
          Button('.', { type: ButtonType.Normal, stateEffect: true})
            .width(80)
            .height(80).onClick(() => {
            if (this.flagNum) {
              this.num = this.num+"."
            } else {
              if(this.str === ''){
                this.num = this.num+"."
              }else{
                this.num = this.num == '0' ? "0." : this.num + "."
              }

            }
            this.flagNum = false;
            console.info(`text组件内容是:${this.num}`)
          })
        }
        .backgroundColor(Color.Red)

      }
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr') //行
      .columnsTemplate('1fr 1fr 1fr 1fr') //列
      .height('80%')
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Yellow)
  }
}

function parseAndAdd(str1: string, str2: string): number {
  // 尝试从第一个字符串中提取数字部分
  let num1 = parseFloat(removeLastIfOperator(str1)); // 移除所有非数字字符
  let num2 = parseFloat(str2); // 直接转换第二个字符串为数字

  // 现在我们可以相加这两个数字
  return num1 + num2;
}

function parseAndJian(str1: string, str2: string): number {
  // 尝试从第一个字符串中提取数字部分
  let num1 = parseFloat(removeLastIfOperator(str1)); // 移除所有非数字字符
  let num2 = parseFloat(str2); // 直接转换第二个字符串为数字

  // 现在我们可以相加这两个数字
  return num1 - num2;
}

function parseAndCheng(str1: string, str2: string): number {
  // 尝试从第一个字符串中提取数字部分
  let num1 = parseFloat(removeLastIfOperator(str1)); // 移除所有非数字字符
  let num2 = parseFloat(str2); // 直接转换第二个字符串为数字

  // 现在我们可以相加这两个数字
  return num1 * num2;
}

function parseAndChu(str1: string, str2: string): number {
  // 尝试从第一个字符串中提取数字部分
  let num1 = parseFloat(removeLastIfOperator(str1)); // 移除所有非数字字符
  let num2 = parseFloat(str2); // 直接转换第二个字符串为数字

  // 现在我们可以相加这两个数字
  return num1 / num2;
}


function removeLastIfOperator(str: string): string {
  const lastChar = str[str.length - 1]; // 获取最后一个字符
  const isOperator = ['+', '-', '*', '/'].includes(lastChar); // 判断是否是运算符

  if (isOperator) {
    return str.slice(0, -1); // 如果是运算符,则去除最后一个字符
  } else {
    return str; // 如果不是运算符,则返回原字符串
  }
}


http://www.kler.cn/a/507573.html

相关文章:

  • GraphRAG如何使用ollama提供的llm model 和Embedding model服务构建本地知识库
  • Lianwei 安全周报|2025.1.13
  • Linux 进程前篇(冯诺依曼体系结构和操作系统)
  • 网络安全技术深度解析与实践案例
  • Java基础:equals()方法与==的区别
  • 基于go语言的驾考系统设计与实现
  • AndroidStudio升级到2024.2.2项目AGP升级8.8.0版本记录
  • MyBatis(三)代理Dao方式的CRUD操作
  • uniapp 微信小程序 金额展示套餐
  • 【狂热算法篇】探秘图论之 Floyd 算法:解锁最短路径的神秘密码(通俗易懂版)
  • 算法(蓝桥杯)贪心算法5——删数问题的解题思路
  • Titans Learning to Memorize at Test Time
  • AI编程工具使用技巧——通义灵码
  • 《火焰烟雾检测开源神经网络模型:智能防火的科技护盾》
  • Python调用go语言编译的库
  • Math Reference Notes: 矩阵基础
  • Android adb 调试,不在手机上点击信任 “允许usb调试” 即可连接的方式(手机需root)
  • 浅谈云计算20 | OpenStack管理模块(下)
  • CV与NLP经典大模型解读
  • RAG 切块Chunk技术总结与自定义分块实现思路
  • Node.js path.join
  • UE控件学习
  • 你会选择java还是node做后台管理
  • 青少年CTF练习平台 文章管理系统(sqlmap使用os-shell找flag)PHP
  • 选择saas 还是源码主要考虑
  • 网络编程:基于TCP/UDP实现客户端和服务端通信(C语言实现简单易懂)