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