HarmonyOS鸿蒙Next计算器demo

// StandardCalcKeyboard.ets import { CalcButtonItem } from ‘…/common/modle/index’ import {calc, isOperator} from ‘…/common/utils/CalcUtils’ import CalculateUtil from ‘…/common/utils/CalculateUtil’; import CheckEmptyUtil from ‘…/common/utils/CheckEmptyUtil’; import { CommonConstants, Symbol } from ‘…/common/constants/CommonConstants’;

@Component export default struct StandardCalcKeyboard { @Link inputValue: string; @Link calValue: string; private expressions: Array<string> = [];

calcButtonItem: CalcButtonItem[] = [ new CalcButtonItem($r(‘app.media.ic_standard_delete’), ‘del’, 0), new CalcButtonItem($r(‘app.media.ic_standard_clear’), ‘clean’, 0), new CalcButtonItem($r(‘app.media.ic_standard_percent’), ‘%’, 1), new CalcButtonItem($r(‘app.media.ic_standard_plus’), ‘add’, 0),

new CalcButtonItem($r('app.media.ic_standard_7'), '7', 1),
new CalcButtonItem($r('app.media.ic_standard_8'), '8', 1),
new CalcButtonItem($r('app.media.ic_standard_9'), '9', 1),
new CalcButtonItem($r('app.media.ic_standard_divide'), 'div', 0),

new CalcButtonItem($r('app.media.ic_standard_4'), '4', 1),
new CalcButtonItem($r('app.media.ic_standard_5'), '5', 1),
new CalcButtonItem($r('app.media.ic_standard_6'), '6', 1),
new CalcButtonItem($r('app.media.ic_standard_times'), 'mul', 0),

new CalcButtonItem($r('app.media.ic_standard_1'), '1', 1),
new CalcButtonItem($r('app.media.ic_standard_2'), '2', 1),
new CalcButtonItem($r('app.media.ic_standard_3'), '3', 1),
new CalcButtonItem($r('app.media.ic_standard_minus'), 'min', 0),
new CalcButtonItem($r('app.media.ic_standard_0'), '0', 1),
new CalcButtonItem($r('app.media.ic_standard_point'), '.', 1),
new CalcButtonItem($r('app.media.ic_standard_equal'), 'equ', 0),

]

layoutOptions: GridLayoutOptions = { regularSize: [1, 1], onGetRectByIndex: (index: number) => { if (index === 16) { // key2是“=”按键对应的index return [5, 0, 1, 2] } return [0, 0, 0, 0] } } build() { Column() { this.GridBuilder(); } }

@Builder GridBuilder() { Grid(undefined, this.layoutOptions) { ForEach(this.calcButtonItem, (item: CalcButtonItem) => { GridItem() { Column() { Image(item.iconUrl).objectFit(ImageFit.Fill) }.borderRadius(2) } .onClick(() => { if (item.flag === 0) { this.inputSymbol(item.value); } else { this.inputNumber(item.value); } }) }, (item: CalcButtonItem) => JSON.stringify(item)) } .columnsTemplate(‘1fr 1fr 1fr 1fr’) .rowsTemplate(‘1fr 1fr 1fr 1fr 1fr’) .columnsGap(‘8vp’) .rowsGap(‘12vp’) .height(340) .padding({ top: ‘12vp’ ,left:‘8vp’, right: ‘8vp’}) }

inputSymbol(value: string) { if (CheckEmptyUtil.isEmpty(value)) { return; } let len = this.expressions.length; switch (value) { case Symbol.CLEAN: this.expressions = []; this.calValue = ‘’; break; case Symbol.DEL: this.inputDelete(len); break; case Symbol.EQU: if (len === 0) { return; } this.getResult().then((result: boolean) => { if (!result) { return; } this.inputValue = this.calValue; this.calValue = ‘’; this.expressions = []; this.expressions.push(this.inputValue); }) break; default: this.inputOperators(len, value); break; } this.formatInputValue(); }

/**

• Enter numbers.
• @param value Enter numbers. */ inputNumber(value: string) { if (CheckEmptyUtil.isEmpty(value)) { return; } let len = this.expressions.length; let last = len > 0 ? this.expressions[len - 1] : ‘’; let secondLast = len > 1 ? this.expressions[len - CommonConstants.TWO] : undefined; if (!this.validateEnter(last, value)) { return; } if (!last) { this.expressions.push(value); } else if (!secondLast) { this.expressions[len - 1] += value; } if (secondLast && CalculateUtil.isSymbol(secondLast)) { this.expressions[len -1] += value; } if (secondLast && !CalculateUtil.isSymbol(secondLast)) { this.expressions.push(value); } this.formatInputValue(); if (value !== CommonConstants.DOTS) { this.getResult(); } }

/**

• Verify that you can enter.
• @param last Value of the last element.
• @param value Current input value.
• return Indicates whether to allow input. */ validateEnter(last: string, value: string) { if (!last && value === CommonConstants.PERCENT_SIGN) { return false; } if ((last === CommonConstants.MIN) && (value === CommonConstants.PERCENT_SIGN)) { return false; } if (last.endsWith(CommonConstants.PERCENT_SIGN)) { return false; } if ((last.indexOf(CommonConstants.DOTS) !== -1) && (value === CommonConstants.DOTS)) { return false; } if ((last === ‘0’) && (value !== CommonConstants.DOTS) && (value !== CommonConstants.PERCENT_SIGN)) { return false; } return true; }

/**

• Delete Key Trigger.
• @param len Expression Length. */ inputDelete(len: number) { if (len === 0) { return; } let last = this.expressions[len - 1]; let lastLen = last.length; if (lastLen === 1) { this.expressions.pop(); len = this.expressions.length; } else { this.expressions[len - 1] = last.slice(0, last.length - 1); } if (len === 0) { this.inputValue = ‘’; this.calValue = ‘’; return; } if (!CalculateUtil.isSymbol(this.expressions[len - 1])) { this.getResult(); } }

/**

• Triggered when input is added, subtracted, multiplied, and divided.
• @param len Expression Length.
• @param value Current Input Value. */ inputOperators(len: number, value: string) { let last = len > 0 ? this.expressions[len - 1] : undefined; let secondLast = len > 1 ? this.expressions[len - CommonConstants.TWO] : undefined; if (!last && (value === Symbol.MIN)) { this.expressions.push(this.getSymbol(value)); return; } if (!last) { return; } if (!CalculateUtil.isSymbol(last)) { this.expressions.push(this.getSymbol(value)); return; } if ((value === Symbol.MIN) && (last === CommonConstants.MIN || last === CommonConstants.ADD)) { this.expressions.pop(); this.expressions.push(this.getSymbol(value)); return; } if (!secondLast) { return; } if (value !== Symbol.MIN) { this.expressions.pop(); } if (CalculateUtil.isSymbol(secondLast)) { this.expressions.pop(); } this.expressions.push(this.getSymbol(value)); }

/**

• Get Operator.
• @param value.
• @return Operators. */ getSymbol(value: string) { if (CheckEmptyUtil.isEmpty(value)) { return ‘’; } let symbol = ‘’; switch (value) { case Symbol.ADD: symbol = CommonConstants.ADD; break; case Symbol.MIN: symbol = CommonConstants.MIN; break; case Symbol.MUL: symbol = CommonConstants.MUL; break; case Symbol.DIV: symbol = CommonConstants.DIV; break; default: break; } return symbol; }

/**

• Make a deep copy of an expression.
• @return deep copy expression. */ deepCopy(): Array<string> { let copyExpressions: Array<string> = Array.from(this.expressions); return copyExpressions; }

/**

• Obtaining Results.
• @return Whether the result is incorrect. */ async getResult() { let calResult = CalculateUtil.parseExpression(this.deepCopy()); if (calResult === ‘NaN’) { this.calValue = this.resourceToString($r(‘app.string.error’)); return false; } this.calValue = calResult; return true; }

/**

• Number Formatting.
• @param value Formatting parameters.
• @return Thousand percentile data. */ resultFormat(value: string) { let reg = (value.indexOf(’.’) > -1) ? new RegExp("/(\d)(?=(\d{3})+.)") : new RegExp("/(\d)(?=(?:\d{3})+$)"); return value.replace(reg, ‘$1,’); }

/**

• Convert a resource file to a string.
• @param resource Resource file.
• @return Character string converted from the resource file. */ resourceToString(resource: Resource): string { if (CheckEmptyUtil.isEmpty(resource)) { return ‘’; } let result = ‘’; try { result = getContext(this).resourceManager.getStringSync(resource.id); } catch (error) { console.error(’[CalculateModel] getResourceString fail: ’ + JSON.stringify(error)) } return result; }

/**

• Thousands in the formatting result. */ formatInputValue() { let deepExpressions: Array<string> = []; this.deepCopy().forEach((item: string, index: number) => { deepExpressions[index] = this.resultFormat(item); }); this.inputValue = deepExpressions.join(’’); } }

/**

• Export class for CalcButtonItem */ export class CalcButtonItem { iconUrl: Resource; value: string; flag: number;

constructor(iconUrl: Resource, value: string, flag: number) { this.iconUrl = iconUrl; this.value = value; this.flag = flag } }