使用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; // 如果不是运算符，则返回原字符串}
}