鴻蒙開發入門與計算器實現——中國海洋大學《移動軟件開發》實驗5詳解\n\n## 一、實驗背景與目的\n\n隨著鴻蒙操作系統（HarmonyOS）的快速崛起，移動應用開發已進入多設備協同、全場景覆蓋的新階段。本實驗作為中國海洋大學2026年夏季學期《移動軟件開發》課程的重要實踐環節，旨在引導學生從安卓/iOS 開發平穩過渡到鴻蒙生態，掌握 ArkTS 語言基礎、ArkUI 聲明式開發范式以及鴻蒙應用的工程結構，并通過開發一個功能完整的計算器案例，將理論知識轉化為可運行的真機/模擬器項目。\n\n實驗核心目標：\n- 理解 HarmonyOS 應用的基本架構與 Stage 模型\n- 熟練使用 DevEco Studio 創建、編譯、調試鴻蒙應用\n- 掌握 ArkTS 語法（裝飾器、狀態管理、組件化）\n- 獨立完成一個具備加、減、乘、除及結果顯示功能的計算器 Application\n\n## 二、鴻蒙開發入門關鍵概念\n\n### 2.1 Stage 模型\n鴻蒙應用采用 Stage 模型，核心涉及 UIAbility 組件（承載界面和生命周期）和 WindowStage。每個 UIAbility 擁有獨立的頁面棧和窗口，可實現跨設備遷移。\n\n### 2.2 ArkTS 與聲明式 UI\nArkTS 是鴻蒙主推的應用開發語言，基于 TypeScript 擴展了聲明式 UI 能力。開發者通過 `@Entry`、`@Component`、`@State` 等裝飾器描述界面狀態與行為。\n典型語法示例：\n`typescript\n@Entry\n@Component\nstruct Counter {\n @State count: number = 0;\n build() {\n Column() {\n Text(`點擊次數：${this.count}`)\n Button('增加').onClick(() => { this.count++ })\n }\n }\n}\n`\n\n### 2.3 工程結構速覽\n新建空白工程后，重點關注 `entry/src/main/ets` 目錄：\n- `pages/Index.ets` —— 默認首頁入口\n- `entryability/EntryAbility.ts` —— 應用入口能力\n- `resources` 目錄 —— 管理字符串、圖片、樣式等資源\n\n## 三、計算器開發實戰步驟\n\n### 3.1 功能需求\n- 顯示區域：展示當前輸入和計算結果，支持長表達式優先計算（或順序計算）\n- 數字鍵盤：0–9、小數點\n- 運算符：加（+）、減（-）、乘（×）、除（÷）\n- 操作符：等號（=）、清空（C）、刪除（?）、正負號切換（+/-）、百分比（%）\n- 邊界容錯：除數為0提示、防止多次小數點\n\n### 3.2 界面布局設計（Grid + Flex）\n采用自上而下的 `Column` 實現：\n1. 頂部顯示文本框：使用 `Text` 或只讀式 `TextInput`，設置 `layoutWeight` 獲取所需高度。\n2. 底部鍵盤區域：采用 `Grid` 布局，4列5行或5列4行。將每個按鍵封裝成 `Button` 組成的自定義組件 `CalcButton`。\n\n核心頁面文件 `pages/Calculator.ets` 結構如下（代碼節選）：\n`typescript\n@Entry\n@Component\nstruct Calculator {\n @State displayText: string = '0';\n private pendingOperand: number = null;\n private operator: string = '';\n // 更多狀態…\n\n build() {\n Column({ space: 12 }) {\n // 顯示屏\n Text(this.displayText)\n .fontSize(60)\n .width('100%')\n .textAlign(TextAlign.End)\n // 鍵盤組件數組映射\n Grid() {\n ForEach(this.buttons, (btn: string) => {\n GridItem() {\n CalcButton({ label: btn, clickHandler: this.onButtonClick.bind(this) })\n }\n })\n }\n .columnsTemplate('1fr 1fr 1fr 1fr')\n .rowsGap(10).columnsGap(10)\n }\n .padding(20)\n .width('100%').height('100%')\n }\n}\n`\n\n### 3.3 狀態管理與邏輯處理\n利用 `@State` 跟蹤界面顯示、記錄中間操作數、運算符。關鍵邏輯方法 `onButtonClick(value: string)`：\n- 按下數字/小數點：判斷規則（如已有 '.' 則跳過）后追加至 displayText。\n- 按下運算符：若已存在中間算式且 pendingOperand 非空，則先結算，將結果更新的 displayText，記錄當前運算符和左操作數，清空標識為待輸入狀態。\n- 按下 '='：執行運算，替換顯示。須特別注意浮點數計算精度處理，保持指定小數位或巧用 `Number((a+b).toFixed(10))` 消除浮點尾數。\n- 按下 'C'：復位所有狀態。’\n（實操過程中需自行設計數據流。實驗報告建議繪制狀態轉移圖或流程圖）\n\n### 交互示例 - 自定義部件 CalcButton:\n`typescript\n@Component\nexport struct CalcButton {\n public label: string;\n public onValueClick: (val: string) => void = () => {};\n build() {\n Button(this.label)\n .fontSize(28)\n .width('100%').height('100%')\n .backgroundColor(BUTTON_CONFIG[this.label].bg || Color.White)\n .onClick(() => { this.onValueClick(this.label) })\n }\n}\n`\n\n### 3.4 界面場景美化和周期\n- 使用鴻蒙內置顏色資源和 Rgb() 使其更像移動 OS 樣式\n- 通過頁面路由或首選項持久化最終運算結果留坑（進階）\n- 真機 iPhone 上調試的技巧與降級方案摘要提示\n\n## 四、實驗常見問題與\n報錯 'Type Not Assignable/ Object literal' : 檢查本與類型定義：典型場景 due 實例 mixup 可選鏈路副作用引發 - 謹慎、進階的可選寫法泛型破壞，不建議用較丑陋泛型快速編譯 → -> 盡早掌握：文檔中屬性詳情實例：必須準確參考。(包含但不僅限制到IDE ：從DevEco Studio Error解釋)->OpenError/實時截取 (多包含開發過程邏輯典型含：變量局部對象必須 initialize somewhere)\n其余多數不外框架混用造成的不良行為需見API重構造\\并在下修:請復習:Documentt/doc `命名常量規則修飾 in Ark+核心法應用:實戰熟練要點。`同場景：由Type檢查驅動編程 = Harmony實際正常典型修正案)。請在本次任務后,故意構建2種典型操作誤錯誤->予以小嘗試解構判定:這個關于獲取初始化不足——(僅供參考要求完整回答重新做必須重現基于設計)；或者提供獨立學習數據路徑軌跡部分細節和錯誤截圖指南完整是另附一教程說破鴻源記摘要。**

事實上在中文環境寫代碼容易出現==非并列相等或者類型轉換不等(由于文案調用一些格式化替代時省略’大整混淆bug)。提交時要標記Task重要發現——解決辦法部分極端的重點含根據本文完全調試即可消除：*浮面排版引起指令查詢常見函數綁定this用簡名不需要更多詳細錯誤界定避開編譯器假信號泛讀寫無指向Bug證明來=所謂工程改良)。

（簡化：全文保留關鍵代碼骨架及其示意圖模擬布局結構）

延伸部分本同學給出的手動擋建議依據測評常見報錯沖突解析鴻蒙組框架作業：預先同步安裝最新sdk版本重要。**