最近收到很多小伙伴反饋，想基于擴展的TS語言（eTS）進行HarmonyOS應用開發，但是不知道代碼該從何處寫起，從0到1的過程讓新手們抓狂。本期我們將帶來“分布式計算器”的開發，幫助大家了解聲明式開發范式的UI描述、組件化機制、UI狀態管理、渲染控制語法等核心機制和功能。下面我們直接進入正題。

一、整體介紹

分布式計算器可以進行簡單的數值計算，并支持遠程拉起另一個計算器FA，實現兩個FA進行協同計算。

如圖1所示，分布式計算器界面主要由“鍵盤”、“顯示”及“標題欄”三個模塊組成。其中，“鍵盤”與“顯示”模塊負責響應用戶點擊并控制運算表達式及運算結果的顯示，實現了基礎的計算功能。“菜單欄”模塊為計算器頂部的菜單欄，是分布式計算功能的入口。

那么，如何實現分布式計算器各模塊的功能？下面我們將從組件化、聲明式描述和狀態管理三個維度來解析分布式計算器的實現。

圖1 計算器界面

1. 組件化

ArkUI開發框架定義了一些具有特殊含義的

組件管理裝飾器

，如圖2所示：

圖2 組件管理裝飾器

根據聲明式UI的組件化思想，我們可以將通過組件管理裝飾器將計算器界面上的各個模塊組件化為一個個獨立的UI單元。

2. 聲明式描述

通過ArkUI開發框架提供的一系列基礎組件，如Column、Text、Divider、Button等，以聲明方式進行組合和擴展來對各個模塊進行描述，包括參數構造配置、屬性配置、事件配置以及子組件配置等，并通過基礎的數據綁定和事件處理機制實現各個模塊的邏輯交互。

3. 狀態管理

ArkUI開發框架定義了一些具有特殊含義的狀態管理裝飾器，如圖3所示:

圖3 狀態管理裝飾器

通過狀態管理裝飾器裝飾組件擁有的狀態屬性，當裝飾的變量更改時，組件會重新渲染更新UI界面。

以上就是實現分布式計算器的核心原理，下面我們將為大家帶來分布式計算器的基礎計算功能與分布式功能的具體實現。

二、基礎計算功能的實現

上文中提到，分布式計算器的基礎計算功能由鍵盤模塊及顯示模塊實現。

1. 鍵盤模塊

鍵盤模塊響應了用戶的點擊，并實現了計算器的基本功能。下面我們將介紹鍵盤布局以及鍵盤功能的實現。

(1) 鍵盤布局

計算器界面上的鍵盤，其實是一張張圖片按照 4*5格式排列，如圖4所示：

圖4 鍵盤模塊

首先，我們需要將所有圖片保存至項目的media文件夾下，并初始化為ImageList，代碼如下：

然后，我們需要對鍵盤模塊進行組件化操作。這里我們通過@Component裝飾器讓鍵盤模塊成為一個獨立的組件。

最后，使用ArkUI開發框架提供的內置組件及屬性方法進行聲明性描述。這里我們使用了Grid組件進行布局，并通過ForEach組件來迭代圖片數組實現循環渲染，同時還為每張圖片添加了ClickButton事件方法。代碼如下：

(2) 功能實現

按鍵功能包含了“歸零”、“清除”、“計算”三個功能。

① 當用戶點擊C按鈕后，運算表達式與運算結果“歸零”，代碼如下：

注：計算功能的實現依賴于JavaScript的math.js庫，使用前需通過npm install mathjs--save命令下載并安裝math.js庫。

2. 顯示模塊

顯示模塊實現了“

鍵入的運算表達式

”與“

運算結果

”的顯示，本質上是Text文本，如圖5所示：

圖5顯示模塊

首先我們通過@Component裝飾器使該模塊具有組件化能力，然后在build方法里描述UI結構，最后使用@Link狀態裝飾器管理組件內部的狀態數據，當這些狀態數據被修改時，將會調用所在組件的build方法進行UI刷新。代碼如下：

至此，一個初具計算功能的計算器就實現了。下面我們將實現計算器的分布式功能。

三、分布式功能的實現

計算器的分布式功能以菜單欄模塊為入口，并基于分布式設備管理與分布式數據管理技術實現。

1. 菜單欄模塊

“

菜單欄

”模塊為計算器頂部菜單欄，是計算器分布式功能的入口。

圖6菜單欄模塊

如圖6所示，當用戶點擊圖標

時，執行terminate()方法，退出計算器應用。當用戶點擊按鈕時，執行showDialog()方法，界面上彈出的分布式設備列表彈窗，選擇設備后將獲取分布式數據管理的權限，最后實現遠端設備的拉起。代碼如下：

2. 分布式設備管理

在分布式計算器應用中，分布式設備管理包含了分布式設備搜索、分布式設備列表彈窗、遠端設備拉起三部分。首先在分布式組網內搜索設備，然后把設備展示到分布式設備列表彈窗中，最后根據用戶的選擇拉起遠端設備。

(1) 分布式設備搜索

通過SUBSCRIBE_ID搜索分布式組網內的遠端設備，代碼如下：

(2) 分布式設備列表彈窗

分布式設備列表彈窗實現了遠端設備的選擇，如圖7所示，用戶可以根據設備名稱選擇相應的設備進行協同計算。

圖7 分布式設備列表彈窗

這里我們使用@CustomDialog裝飾器來裝飾分布式設備列表彈窗，代碼如下：

(3) 遠端設備拉起

通過startAbility(deviceId)方法拉起遠端設備的FA，代碼如下：

3. 分布式數據管理

分布式數據管理用于實現協同計算時數據在多端設備之間的相互同步。我們需要創建一個分布式數據庫來保存協同計算時數據，并通過分布式數據通信進行同步。

(1) 管理分布式數據庫

創建一個KVManager對象實例，用于管理分布式數據庫對象。代碼如下：

(2) 訂閱分布式數據變化

通過訂閱分布式數據庫所有（本地及遠端）數據變化實現數據協同，代碼如下：

至此，具有分布式能力的計算器就實現了。期待廣大開發者能基于TS擴展的聲明式開發范式開發出更多有趣的應用。

來源：HarmonyOS開發者