介紹

本篇Codelab基于基礎(chǔ)組件、容器組件，實現(xiàn)一個支持加減乘除混合運算的計算器。

?說明：?由于數(shù)字都是雙精度浮點數(shù)，在計算機中是二進制存儲數(shù)據(jù)的，因此小數(shù)和非安全整數(shù)（超過整數(shù)的安全范圍[-Math.pow(2, 53)，Math.pow(2, 53)]的數(shù)據(jù)）在計算過程中會存在精度丟失的情況。

1、小數(shù)運算時：“0.2 + 2.22 = 2.4200000000000004”，當(dāng)前示例的解決方法是將小數(shù)擴展到整數(shù)進行計算，計算完成之后再將結(jié)果縮小，計算過程為“(0.2 * 100 + 2.22 * 100) / 100 = 2.42”。

2、非安全整數(shù)運算時：“9007199254740992 + 1 = 9.007199254740992”，當(dāng)前示例中將長度超過15位的數(shù)字轉(zhuǎn)換成科學(xué)計數(shù)法，計算結(jié)果為“9007199254740992 + 1 = 9.007199254740993e15”。

相關(guān)概念

• ForEach組件：循環(huán)渲染組件**，**迭代數(shù)組并為每個數(shù)組項創(chuàng)建相應(yīng)的組件。
• TextInput組件：單行文本輸入框組件。
• Image組件：圖片組件，支持本地圖片和網(wǎng)絡(luò)圖片的渲染展示。

環(huán)境搭建

軟件要求

• DevEco Studio版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開發(fā)板類型：潤和RK3568開發(fā)板。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以RK3568開發(fā)板為例，參照以下步驟進行：

1. 獲取OpenHarmony系統(tǒng)版本：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進制）。以3.2 Release版本為例：

   

2. 搭建燒錄環(huán)境。

   1. 完成DevEco Device Tool的安裝
   2. 完成RK3568開發(fā)板的燒錄

3. 搭建開發(fā)環(huán)境。

   1. 開始前請參考工具準(zhǔn)備，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
   2. 開發(fā)環(huán)境配置完成后，請參考使用工程向?qū)?chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用真機進行調(diào)測。

代碼結(jié)構(gòu)解讀

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在gitee中提供。

├──entry/src/main/ets	                   // 代碼區(qū)
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstants.ets            // 公共常量類
│  │  └──util
│  │     ├──CalculateUtil.ets              // 計算工具類
│  │     ├──CheckEmptyUtil.ets             // 非空判斷工具類
│  │     └──Logger.ets                     // 日志管理工具類
│  ├──entryability
│  │  └──EntryAbility.ts	               // 程序入口類
│  ├──model
│  │  └──CalculateModel.ets                // 計算器頁面數(shù)據(jù)處理類
│  ├──pages
│  │  └──HomePage.ets                      // 計算器頁面
│  └──viewmodel    
│     ├──PressKeysItem.ets                 // 按鍵信息類
│     └──PresskeysViewModel.ets            // 計算器頁面鍵盤數(shù)據(jù)
└──entry/src/main/resource                 // 應(yīng)用靜態(tài)資源目錄

頁面設(shè)計

頁面由表達式輸入框、結(jié)果輸出框、鍵盤輸入?yún)^(qū)域三部分組成，效果圖如圖：

表達式輸入框位于頁面最上方，使用TextInput組件實時顯示鍵盤輸入的數(shù)據(jù)，默認(rèn)字體大小為“64fp”，當(dāng)表達式輸入框中數(shù)據(jù)長度大于9時，字體大小為“32fp”。

// HomePage.ets
Column() {
  TextInput({ text: this.model.resultFormat(this.inputValue) })
    .height(CommonConstants.FULL_PERCENT)
    .fontSize(
      (this.inputValue.length > CommonConstants.INPUT_LENGTH_MAX ?
        $r('app.float.font_size_text')) : $r('app.float.font_size_input')
    )
    .enabled(false)
    .fontColor(Color.Black)
    .textAlign(TextAlign.End)
    .backgroundColor($r('app.color.input_back_color'))
}
....
.margin({
  right: $r('app.float.input_margin_right'),
  top: $r('app.float.input_margin_top')
})

結(jié)果輸出框位于表達式輸入框下方，使用Text組件實時顯示計算結(jié)果和“錯誤”提示，當(dāng)表達式輸入框最后一位為運算符時結(jié)果輸出框中值不變。

// HomePage.ets
Column() {
  Text(this.model.resultFormat(this.calValue))
    .fontSize($r('app.float.font_size_text'))
    .fontColor($r('app.color.text_color'))
}
.width(CommonConstants.FULL_PERCENT)
.height($r('app.float.text_height'))
.alignItems(HorizontalAlign.End)
.margin({
  right: $r('app.float.text_margin_right'),
  bottom: $r('app.float.text_margin_bottom')})

用ForEach組件渲染鍵盤輸入?yún)^(qū)域，其中0~9、“.”、“%”用Text組件渲染；“+-×÷=”、清零、刪除用Image組件渲染。

// HomePage.ets
ForEach(columnItem, (keyItem: PressKeysItem, keyItemIndex?: number) => {
  Column() {
    Column() {
      if (keyItem.flag === 0) {
        Image(keyItem.source !== undefined ? keyItem.source : '')
          .width(keyItem.width)
          .height(keyItem.height)
      } else {
        Text(keyItem.value)
          .fontSize(
            (keyItem.value === CommonConstants.DOTS) ?
              $r('app.float.font_size_dot') : $r('app.float.font_size_text')
          )
          .width(keyItem.width)
          .height(keyItem.height)
      }
    }
    .width($r('app.float.key_width'))
    .height(
      ((columnItemIndex === (keysModel.getPressKeys().length - 1)) &&
        (keyItemIndex === (columnItem.length - 1))) ?
        $r('app.float.equals_height') : $r('app.float.key_height')
    )
    ...
    .backgroundColor(
      ((columnItemIndex === (keysModel.getPressKeys().length - 1)) &&
        (keyItemIndex === (columnItem.length - 1))) ?
        $r('app.color.equals_back_color') : Color.White
    )
    ...
  }
  .layoutWeight(
    ((columnItemIndex === (keysModel.getPressKeys().length - 1)) &&
      (keyItemIndex === (columnItem.length - 1))) ? CommonConstants.TWO : 1
  )
  ...
}, (keyItem: PressKeysItem) => JSON.stringify(keyItem))

組裝計算表達式

頁面中數(shù)字輸入和運算符輸入分別調(diào)用inputNumber方法和inputSymbol方法。

// HomePage.ets
ForEach(columnItem, (keyItem: PressKeysItem, keyItemIndex?: number) => {
  Column() {
    Column() {
      ...
    }
    ...
    .onClick(() => {
      if (keyItem.flag === 0) {
        this.model.inputSymbol(keyItem.value);
      } else {
        this.model.inputNumber(keyItem.value);
      }
    })
  }
  ...
  )
  ...
}, (keyItem: PressKeysItem) => JSON.stringify(keyItem))

?說明：?輸入的數(shù)字和運算符保存在數(shù)組中，數(shù)組通過“+-×÷”運算符將數(shù)字分開。 例如表達式為“10×8.2+40%÷2×-5-1”在數(shù)組中為["10", "×", "8.2", "+", "40%", "÷", "2", "×", "-5", "-", "1"]。 表達式中“%”為百分比，例如“40%”為“0.4”。

當(dāng)為數(shù)字輸入時，首先根據(jù)表達式數(shù)組中最后一個元素判斷當(dāng)前輸入是否匹配，再判斷表達式數(shù)組中最后一個元素為是否為負數(shù)。

// CalculateModel.ets
inputNumber(value: string) {
  ...
  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);
  }
  ...
}

// CalculateModel.ets
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;
}

當(dāng)輸入為“=”運算符時，將結(jié)果輸入出框中的值顯示到表達式輸入框中，并清空結(jié)果輸出框。當(dāng)輸入為“清零”運算符時，將頁面和表達式數(shù)組清空。

// CalculateModel.ets
inputSymbol(value: string) {
  ...
  switch (value) {
    case Symbol.CLEAN:
      this.expressions = [];
      this.context.calValue = '';
      break;
    ...
    case Symbol.EQU:
      if (len === 0) {
        return;
      }
      this.getResult().then(result => {
        if (!result) {
          return;
        }
        this.context.inputValue = this.context.calValue;
        this.context.calValue = '';
        this.expressions = [];
        this.expressions.push(this.context.inputValue);
      })
      break;
    ...
  }
  ...
}

當(dāng)輸入為“刪除”運算符時，若表達式數(shù)組中最后一位元素為運算符則刪除，為數(shù)字則刪除數(shù)字最后一位，重新計算表達式的值（表達式數(shù)組中最后一位為運算符則不參與計算），刪除之后若表達式長度為0則清空頁面。

// CalculateModel.ets
inputSymbol(value: string) {
  ...
  switch (value) {
    ...
    case CommonConstants.SYMBOL.DEL:
      this.inputDelete(len);
      break;
    ...
  }
  ...
}

// CalculateModel.ets
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.context.inputValue = '';
    this.context.calValue = '';
    return;
  }
  if (!CalculateUtil.isSymbol(this.expressions[len - 1])) {
    this.getResult();
  }
}

當(dāng)輸入為“+-×÷”四則運算符時，由于可輸入負數(shù)，故優(yōu)先級高的運算符“×÷”后可輸入“-”，其它場景則替換原有運算符。

// CalculateModel.ets
inputSymbol(value: string) {
  ...
  switch (value) {
    ...
    default:
      this.inputOperators(len, value);
      break;
  }
  ...
}

// CalculateModel.ets
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));
}

解析計算表達式

將表達式數(shù)組中帶“%”的元素轉(zhuǎn)換成小數(shù)，若表達式數(shù)組中最后一位為“+-×÷”則刪除。

// CalculateUtil.ets
parseExpression(expressions: Array<string>): string {
  ...
  let len = expressions.length;
  ...
  expressions.forEach((item: string, index: number) => {
    // 處理表達式中的%
    if (item.indexOf(CommonConstants.PERCENT_SIGN) !== -1) {
      expressions[index] = (this.mulOrDiv(item.slice(0, item.length - 1),
        CommonConstants.ONE_HUNDRED, CommonConstants.DIV)).toString();
    }
    // 最后一位是否為運算符
    if ((index === len - 1) && this.isSymbol(item)) {
      expressions.pop();
    }
  });
  ...
}

先初始化隊列和棧，再從表達式數(shù)組左邊取出元素，進行如下操作：

• 當(dāng)取出的元素為數(shù)字時則放入隊列中。
• 當(dāng)取出的元素為運算符時，先判斷棧中元素是否為空，是則將運算符放入棧中，否則判斷此運算符與棧中最后一個元素的優(yōu)先級，若此運算符優(yōu)先級小則將棧中最后一個元素彈出并放入隊列中，再將此運算符放入棧中，否則將此運算符放入棧中。
• 最后將棧中的元素依次彈出放入隊列中。

// CalculateUtil.ets
parseExpression(expressions: Array<string>): string {
  ...
  while (expressions.length > 0) {
    let current = expressions.shift();
     if (current !== undefined) {
        if (this.isSymbol(current)) {
           while (outputStack.length > 0 &&
           this.comparePriority(current, outputStack[outputStack.length - 1])) {
              let popValue: string | undefined = outputStack.pop();
              if (popValue !== undefined) {
                 outputQueue.push(popValue);
              }
           }
           outputStack.push(current);
        } else {
           outputQueue.push(current);
        }
     }
  }
  while (outputStack.length > 0) {
    outputQueue.push(outputStack.pop());
  }
  ...
}

以表達式“3×5+4÷2”為例，用原理圖講解上面代碼，原理圖如圖：

遍歷隊列中的元素，當(dāng)為數(shù)字時將元素壓入棧，當(dāng)為運算符時將數(shù)字彈出棧，并結(jié)合當(dāng)前運算符進行計算，再將計算的結(jié)果壓棧，最終棧底元素為表達式結(jié)果。

// CalculateUtil.ets
dealQueue(queue: Array<string>) {
  ...
  let outputStack: string[] = [];
   while (queue.length > 0) {
      let current: string | undefined = queue.shift();
      if (current !== undefined) {
         if (!this.isSymbol(current)) {
            outputStack.push(current);
         } else {
            let second: string | undefined = outputStack.pop();
            let first: string | undefined = outputStack.pop();
            if (first !== undefined && second !== undefined) {
               let calResultValue: string = this.calResult(first, second, current)
               outputStack.push(calResultValue);
            }
         }
      }
   }
   if (outputStack.length !== 1) {
      return 'NaN';
   } else {
      let end = outputStack[0].endsWith(CommonConstants.DOTS) ?
      outputStack[0].substring(0,  outputStack[0].length - 1) : outputStack[0];
      return end;
   }
}

獲取表達式“3×5+4÷2”組裝后的表達式，用原理圖講解上面代碼，原理圖如圖：

最后

有很多小伙伴不知道學(xué)習(xí)哪些鴻蒙開發(fā)技術(shù)？不知道需要重點掌握哪些鴻蒙應(yīng)用開發(fā)知識點？而且學(xué)習(xí)時頻繁踩坑，最終浪費大量時間。所以有一份實用的鴻蒙（HarmonyOS NEXT）資料用來跟著學(xué)習(xí)是非常有必要的。?

這份鴻蒙（HarmonyOS NEXT）資料包含了鴻蒙開發(fā)必掌握的核心知識要點，內(nèi)容包含了（ArkTS、ArkUI開發(fā)組件、Stage模型、多端部署、分布式應(yīng)用開發(fā)、音頻、視頻、WebGL、OpenHarmony多媒體技術(shù)、Napi組件、OpenHarmony內(nèi)核、Harmony南向開發(fā)、鴻蒙項目實戰(zhàn)等等）鴻蒙（HarmonyOS NEXT）技術(shù)知識點。

希望這一份鴻蒙學(xué)習(xí)資料能夠給大家?guī)韼椭?，有需要的小伙伴自行領(lǐng)取，限時開源，先到先得~無套路領(lǐng)取??！

如果你是一名有經(jīng)驗的資深A(yù)ndroid移動開發(fā)、Java開發(fā)、前端開發(fā)、對鴻蒙感興趣以及轉(zhuǎn)行人員，可以直接領(lǐng)取這份資料

?獲取這份完整版高清學(xué)習(xí)路線，請點擊→純血版全套鴻蒙HarmonyOS學(xué)習(xí)資料

鴻蒙（HarmonyOS NEXT）最新學(xué)習(xí)路線

• ?HarmonOS基礎(chǔ)技能

• HarmonOS就業(yè)必備技能?
• ?HarmonOS多媒體技術(shù)

• 鴻蒙NaPi組件進階

• HarmonOS高級技能

• 初識HarmonOS內(nèi)核?
• 實戰(zhàn)就業(yè)級設(shè)備開發(fā)

?有了路線圖，怎么能沒有學(xué)習(xí)資料呢，小編也準(zhǔn)備了一份聯(lián)合鴻蒙官方發(fā)布筆記整理收納的一套系統(tǒng)性的鴻蒙（OpenHarmony ）學(xué)習(xí)手冊（共計1236頁）與鴻蒙（OpenHarmony ）開發(fā)入門教學(xué)視頻，內(nèi)容包含：ArkTS、ArkUI、Web開發(fā)、應(yīng)用模型、資源分類…等知識點。

獲取以上完整版高清學(xué)習(xí)路線，請點擊→純血版全套鴻蒙HarmonyOS學(xué)習(xí)資料

《鴻蒙 (OpenHarmony)開發(fā)入門教學(xué)視頻》

《鴻蒙生態(tài)應(yīng)用開發(fā)V2.0白皮書》

《鴻蒙 (OpenHarmony)開發(fā)基礎(chǔ)到實戰(zhàn)手冊》

OpenHarmony北向、南向開發(fā)環(huán)境搭建

?《鴻蒙開發(fā)基礎(chǔ)》

• ArkTS語言
• 安裝DevEco Studio
• 運用你的第一個ArkTS應(yīng)用
• ArkUI聲明式UI開發(fā)
• .……

?《鴻蒙開發(fā)進階》

• Stage模型入門
• 網(wǎng)絡(luò)管理
• 數(shù)據(jù)管理
• 電話服務(wù)
• 分布式應(yīng)用開發(fā)
• 通知與窗口管理
• 多媒體技術(shù)
• 安全技能
• 任務(wù)管理
• WebGL
• 國際化開發(fā)
• 應(yīng)用測試
• DFX面向未來設(shè)計
• 鴻蒙系統(tǒng)移植和裁剪定制
• ……

《鴻蒙進階實戰(zhàn)》

• ArkTS實踐
• UIAbility應(yīng)用
• 網(wǎng)絡(luò)案例
• ……

?獲取以上完整鴻蒙HarmonyOS學(xué)習(xí)資料，請點擊→純血版全套鴻蒙HarmonyOS學(xué)習(xí)資料

總結(jié)

總的來說，華為鴻蒙不再兼容安卓，對中年程序員來說是一個挑戰(zhàn)，也是一個機會。只有積極應(yīng)對變化，不斷學(xué)習(xí)和提升自己，他們才能在這個變革的時代中立于不敗之地。?

文章來源地址http://www.zghlxwxcb.cn/news/detail-861718.html

到了這里，關(guān)于OpenHarmony開發(fā)實戰(zhàn)：簡易計算器（ArkTS）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！