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

一、整體介紹

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

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

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

圖1 計算器界面

1. 組件化

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

組件管理裝飾器

，如圖2所示：

圖2 組件管理裝飾器

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

2. 聲明式描述

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

3. 狀態(tài)管理

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

圖3 狀態(tài)管理裝飾器

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

以上就是實現(xiàn)分布式計算器的核心原理，下面我們將為大家?guī)矸植际接嬎闫鞯幕A計算功能與分布式功能的具體實現(xiàn)。

二、基礎計算功能的實現(xiàn)

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

1. 鍵盤模塊

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

(1) 鍵盤布局

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

圖4 鍵盤模塊

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

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

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

(2) 功能實現(xiàn)

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

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

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

2. 顯示模塊

顯示模塊實現(xiàn)了“

鍵入的運算表達式

”與“

運算結(jié)果

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

圖5顯示模塊

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

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

三、分布式功能的實現(xiàn)

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

1. 菜單欄模塊

“

菜單欄

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

圖6菜單欄模塊

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

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

2. 分布式設備管理

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

(1) 分布式設備搜索

通過SUBSCRIBE_ID搜索分布式組網(wǎng)內(nèi)的遠端設備，代碼如下：

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

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

圖7 分布式設備列表彈窗

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

(3) 遠端設備拉起

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

3. 分布式數(shù)據(jù)管理

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

(1) 管理分布式數(shù)據(jù)庫

創(chuàng)建一個KVManager對象實例，用于管理分布式數(shù)據(jù)庫對象。代碼如下：

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

通過訂閱分布式數(shù)據(jù)庫所有（本地及遠端）數(shù)據(jù)變化實現(xiàn)數(shù)據(jù)協(xié)同，代碼如下：

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

來源：HarmonyOS開發(fā)者