滿滿乾貨！手把手教你實現基於eTS的分佈式計算器
最近收到很多小夥伴反饋，想基於擴展的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，代碼如下：
export function obtainImgVertical(): Array<Array<ImageList>> { let list = [ [ { img: $r('app.media.ic_cal_seven'), value: '7' }, { img: $r('app.media.ic_cal_eight'), value: '8' }, { img: $r('app.media.ic_cal_nine'), value: '9' } ], [ { img: $r('app.media.ic_cal_four'), value: '4' }, { img: $r('app.media.ic_cal_five'), value: '5' }, { img: $r('app.media.ic_cal_six'), value: '6' } ], ] return list } export function obtainImgV(): Array<ImageList> { let list = [ { img: $r('app.media.ic_cal_delete'), value: '' }, { img: $r('app.media.ic_cal_minus'), value: '-' }, { img: $r('app.media.ic_cal_plus'), value: '+' }, { img: $r('app.media.ic_cal_equal'), value: '=' } ] return list }
然後，我們需要對鍵盤模塊進行組件化操作。這裡我們通過@Component裝飾器讓鍵盤模塊成為一個獨立的組件。
最後，使用ArkUI開發框架提供的內置組件及屬性方法進行聲明性描述。這裡我們使用了Grid組件進行布局，並通過ForEach組件來迭代圖片數組實現循環渲染，同時還為每張圖片添加了ClickButton事件方法。代碼如下：
@Component
export struct ButtonComponent {
private isLand: boolean
private onInputValue: (result) => void
build() {
Row() {
Grid() {
ForEach(obtainImgV(), (item, index) => {
GridItem() {
Image(item.Img)
.margin({ top: 5 })
.onClick(() => {
this.onInputValue(item.value)
})
}
.rowStart(index)
.rowEnd(index === 3 ? index + 1 : index)
.columnStart(3)
.columnEnd(3)
})
ForEach(obtainImgVertical(), (item) => {
ForEach(item, (item) => {
GridItem() {
Image(item.Img)
.margin({ top: 5 })
.onClick(() => {
this.onInputValue(item.value)
})
}
})
})
}
}
}
}
(2) 功能實現
按鍵功能包含了「歸零」、「清除」、「計算」三個功能。
① 當用戶點擊「C」按鈕後，運算表達式與運算結果「歸零」，代碼如下：
onInputValue = (value) => {
if (value === 'C') { // 當用戶點擊C按鈕，表達式和運算結果歸0
this.expression = ''
this.result = ''
return
}
// 輸入數字，表達式直接拼接，計算運算結果
this.expression += value
this.result = JSON.stringify(MATH.evaluate(this.expression))
}
② 當用戶點擊「X」按鈕後，刪除運算表達式的最後一個字符。代碼如下：
onInputValue = (value) => {
if (value === '') { // 當用戶點擊刪除按鈕，表達式刪除上一次的輸入，重新運算表達式
this.expression = this.expression.substr(0, this.expression.length - 1)
this.result = JSON.stringify(MATH.evaluate(this.expression))
return
}
if (this.isOperator(value)) { // 當用戶輸入的是運算符
// 判斷表達式最後一個字符是運算符則覆蓋上一個運算符，否則表達式直接拼接
if (this.isOperator(this.expression.substr(this.expression.length - 1, this.expression.length))) {
this.expression = this.expression.substr(0, this.expression.length - 1)
this.expression += value
} else {
this.expression += value
}
return
}
// 輸入數字，表達式直接拼接，計算運算結果
this.expression += value
this.result = JSON.stringify(MATH.evaluate(this.expression))
}
③ 當用戶點擊「=」按鈕後，將調用JavaScript的math.js庫對表達式進行計算。代碼如下：
import { create, all } from 'mathjs'
onInputValue = (value) => {
if (value === '=') { // 當用戶點擊=按鈕
this.result = ''
// 判斷表達式最後一個字符是運算符，運算結果需要去掉最後一個運算符運算，否則直接運算
if (this.isOperator(this.expression.substr(this.expression.length - 1, this.expression.length))) {
this.expression = JSON.stringify(MATH.evaluate(this.expression.substr(0, this.expression.length - 1)))
} else {
this.expression = JSON.stringify(MATH.evaluate(this.expression))
}
return
}
// 輸入數字，表達式直接拼接，計算運算結果
this.expression += value
this.result = JSON.stringify(MATH.evaluate(this.expression))
}
註：計算功能的實現依賴於JavaScript的math.js庫，使用前需通過npm install mathjs–save命令下載並安裝math.js庫。
2. 顯示模塊
顯示模塊實現了「鍵入的運算表達式」與「運算結果」的顯示，本質上是Text文本，如圖5所示：
圖5 顯示模塊
首先我們通過@Component裝飾器使該模塊具有組件化能力，然後在build方法里描述UI結構，最後使用@Link狀態裝飾器管理組件內部的狀態數據，當這些狀態數據被修改時，將會調用所在組件的build方法進行UI刷新。代碼如下：
@Component
export struct InPutComponent {
private isLand: boolean
@Link result: string
@Link expression: string
build() {
Stack({ alignContent: this.isLand ? Alignment.BottomStart : Alignment.TopEnd }) {
Column() {
//運算表達式文本框
Scroll() {
Text(this.expression)
.maxLines(1)
.opacity(0.9)
.fontWeight(400)
.textAlign(TextAlign.Start)
.fontSize(this.isLand ? 50 : 35)
}
.width('90%')
.scrollable(ScrollDirection.Horizontal)
.align(this.isLand ? Alignment.Start : Alignment.End)
//運算結果文本框
Scroll() {
Text(this.result)
.maxLines(1)
.opacity(0.38)
.textAlign(TextAlign.Start)
.fontSize(this.isLand ? 45 : 30)
.margin(this.isLand ? { bottom: 64 } : {})
}
}
}
}
}
至此，一個初具計算功能的計算器就實現了。下面我們將實現計算器的分佈式功能。
三、分佈式功能的實現
計算器的分佈式功能以菜單欄模塊為入口，並基於分佈式設備管理與分佈式數據管理技術實現。
1. 菜單欄模塊
「菜單欄」模塊為計算器頂部菜單欄，是計算器分佈式功能的入口。
圖6 菜單欄模塊
如圖6所示，當用戶點擊圖標 時，執行terminate()方法，退出計算器應用。當用戶點擊 按鈕時，執行showDialog()方法，界面上彈出的分佈式設備列表彈窗，選擇設備後將獲取分佈式數據管理的權限，最後實現遠端設備的拉起。代碼如下：
@Component
export struct TitleBar {
build() {
Row() {
Image($r("app.media.ic_back"))
.height('60%')
.margin({ left: 32 })
.width(this.isLand ? '5%' : '8%')
.objectFit(ImageFit.Contain)
//執行terminate()方法，退出計算器應用
.onClick(() => {
app.terminate()
})
Blank().layoutWeight(1)
Image($r("app.media.ic_hop"))
.height('60%')
.margin({ right: 32 })
.width(this.isLand ? '5%' : '8%')
.objectFit(ImageFit.Contain)
//執行showDialog()方法，界面上彈出的分佈式設備列表彈窗
.onClick(() => {
this.showDiainfo()
})
}
.width('100%')
.height(this.isLand ? '10%' : '8%')
.constraintSize({ minHeight: 50 })
.alignItems(VerticalAlign.Center)
}
}
2. 分佈式設備管理
在分佈式計算器應用中，分佈式設備管理包含了分佈式設備搜索、分佈式設備列表彈窗、遠端設備拉起三部分。首先在分佈式組網內搜索設備，然後把設備展示到分佈式設備列表彈窗中，最後根據用戶的選擇拉起遠端設備。
(1) 分佈式設備搜索
通過SUBSCRIBE_ID搜索分佈式組網內的遠端設備，代碼如下：
startDeviceDiscovery() {
SUBSCRIBE_ID = Math.floor(65536 * Math.random())
let info = {
subscribeId: SUBSCRIBE_ID,
mode: 0xAA,
medium: 2,
freq: 2,
isSameAccount: false,
isWakeRemote: true,
capability: 0
}
Logger.info(TAG, `startDeviceDiscovery ${SUBSCRIBE_ID}`)
this.deviceManager.startDeviceDiscovery(info)
}
(2) 分佈式設備列表彈窗
分佈式設備列表彈窗實現了遠端設備的選擇，如圖7所示，用戶可以根據設備名稱選擇相應的設備進行協同計算。
圖7 分佈式設備列表彈窗
這裡我們使用@CustomDialog裝飾器來裝飾分佈式設備列表彈窗，代碼如下：
@CustomDialog
export struct DeviceDialog {
build() {
Column() {
List() {
ForEach(this.deviceList, (item, index) => {
ListItem() {
Row() {
Text(item.deviceName)
.fontSize(21)
.width('90%')
.fontColor(Color.Black)
Image(index === this.selectedIndex ? $r('app.media.checked') : $r('app.media.uncheck'))
.width('8%')
.objectFit(ImageFit.Contain)
}
.height(55)
.margin({ top: 17 })
.onClick(() => {
if (index === this.selectedIndex) {
return
}
this.selectedIndex = index
this.onSelectedIndexChange(this.selectedIndex)
})
}
}, item => item.deviceName)
}
}
}
}
(3) 遠端設備拉起
通過startAbility(deviceId)方法拉起遠端設備的FA，代碼如下：
startAbility(deviceId) {
featureAbility.startAbility({
want: {
bundleName: 'ohos.samples.DistributeCalc',
abilityName: 'ohos.samples.DistributeCalc.MainAbility',
deviceId: deviceId,
parameters: {
isFA: 'FA'
}
}
}).then((data) => {
this.startAbilityCallBack(DATA_CHANGE)
})
}
3. 分佈式數據管理
分佈式數據管理用於實現協同計算時數據在多端設備之間的相互同步。我們需要創建一個分佈式數據庫來保存協同計算時數據，並通過分佈式數據通信進行同步。
(1) 管理分佈式數據庫
創建一個KVManager對象實例，用於管理分佈式數據庫對象。代碼如下：
async createKvStore(callback) {
//創建一個KVManager對象實例
this.kvManager = await distributedData.createKVManager(config)
let options = {
createIfMissing: true,
encrypt: false,
backup: false,
autoSync: true,
kvStoreType: 1,
securityLevel: 1,
}
// 通過指定Options和storeId，創建並獲取KVStore數據庫，並通過Promise方式返回，此方法為異步方法。
this.kvStore = await this.kvManager.getKVStore(STORE_ID, options)
callback()
}
(2) 訂閱分佈式數據變化
通過訂閱分佈式數據庫所有（本地及遠端）數據變化實現數據協同，代碼如下：
kvStoreModel.setOnMessageReceivedListener(DATA_CHANGE, (value) => {
if (this.isDistributed) {
if (value.search(EXIT) != -1) {
Logger.info(TAG, `EXIT ${EXIT}`)
featureAbility.terminateSelf((error) => {
Logger.error(TAG, `terminateSelf finished, error= ${error}`)
});
} else {
this.expression = value
if (this.isOperator(this.expression.substr(this.expression.length - 1, this.expression.length))) {
this.result = JSON.stringify(MATH.evaluate(this.expression.substr(0, this.expression.length - 1)))
} else {
this.result = JSON.stringify(MATH.evaluate(this.expression))
}
}
}
})
至此，具有分佈式能力的計算器就實現了。期待廣大開發者能基於TS擴展的聲明式開發範式開發出更多有趣的應用。
點擊鏈接，可獲取分佈式計算器完整代碼：//gitee.com/openharmony/app_samples/tree/master/Preset/DistributeCalc
