返回发烧友论坛
发 帖  

[文章]满满干货！手把手教你实现基于eTS的分布式计算器

HarmonyOS开发者社区
2022-05-23 18:34:50
阅读量0
HarmonyOSets
1
5
最近收到很多小伙伴反馈，想基于扩展的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，代码如下：
  1. export function obtainImgVertical(): Array<Array<ImageList>> {
  2.   let list =
  3.     [
  4.       [
  5.         { img: $r(\'app.media.ic_cal_seven\'), value: \'7\' },
  6.         { img: $r(\'app.media.ic_cal_eight\'), value: \'8\' },
  7.         { img: $r(\'app.media.ic_cal_nine\'), value: \'9\' }
  8.       ],
  9.       [
  10.         { img: $r(\'app.media.ic_cal_four\'), value: \'4\' },
  11.         { img: $r(\'app.media.ic_cal_five\'), value: \'5\' },
  12.         { img: $r(\'app.media.ic_cal_six\'), value: \'6\' }
  13.       ],
  14.     ]
  15.   return list
  16. }
  17. export function obtainImgV(): Array<ImageList> {
  18.   let list =
  19.     [
  20.       { img: $r(\'app.media.ic_cal_delete\'), value: \'\' },
  21.       { img: $r(\'app.media.ic_cal_minus\'), value: \'-\' },
  22.       { img: $r(\'app.media.ic_cal_plus\'), value: \'+\'  },
  23.       { img: $r(\'app.media.ic_cal_equal\'), value: \'=\' }
  24.     ]
  25.   return list
  26. }
复制代码

然后，我们需要对键盘模块进行组件化操作。这里我们通过@Component装饰器让键盘模块成为一个独立的组件。

最后，使用ArkUI开发框架提供的内置组件及属性方法进行声明性描述。这里我们使用了Grid组件进行布局，并通过ForEach组件来迭代图片数组实现循环渲染，同时还为每张图片添加了ClickButton事件方法。代码如下：
  1. @Component
  2. export struct ButtonComponent {
  3.   private isLand: boolean
  4.   private onInputValue: (result) => void
  5.   build() {
  6.     Row() {
  7.       Grid() {
  8.         ForEach(obtainImgV(), (item, index) => {
  9.           GridItem() {
  10.             Image(item.Img)
  11.               .margin({ top: 5 })
  12.               .onClick(() => {
  13.                 this.onInputValue(item.value)
  14.               })
  15.           }
  16.           .rowStart(index)
  17.           .rowEnd(index === 3 ? index + 1 : index)
  18.           .columnStart(3)
  19.           .columnEnd(3)
  20.         })
  21.         ForEach(obtainImgVertical(), (item) => {
  22.           ForEach(item, (item) => {
  23.             GridItem() {
  24.               Image(item.Img)
  25.                 .margin({ top: 5 })
  26.                 .onClick(() => {
  27.                   this.onInputValue(item.value)
  28.                 })
  29.             }
  30.           })
  31.         })
  32.       }
  33.     }
  34.   }
  35. }
复制代码

(2) 功能实现

按键功能包含了“归零”、“清除”、“计算”三个功能。

① 当用户点击“C”按钮后，运算表达式与运算结果“归零”，代码如下：
  1. onInputValue = (value) => {
  2.   if (value === \'C\') { // 当用户点击C按钮，表达式和运算结果归0
  3.     this.expression = \'\'
  4.     this.result = \'\'
  5.     return
  6.   }
  7.   // 输入数字，表达式直接拼接，计算运算结果
  8.   this.expression += value
  9.   this.result = JSON.stringify(MATH.evaluate(this.expression))
  10. }
复制代码
② 当用户点击“X”按钮后，删除运算表达式的最后一个字符。代码如下：
  1. <pre class=\"language-markup\"><code>onInputValue = (value) => {
  2.   if (value === \'\') { // 当用户点击删除按钮，表达式删除上一次的输入，重新运算表达式
  3.     this.expression = this.expression.substr(0, this.expression.length - 1)
  4.     this.result = JSON.stringify(MATH.evaluate(this.expression))
  5.     return
  6.   }
  7.   if (this.isOperator(value)) { // 当用户输入的是运算符
  8.     // 判断表达式最后一个字符是运算符则覆盖上一个运算符，否则表达式直接拼接
  9.     if (this.isOperator(this.expression.substr(this.expression.length - 1, this.expression.length))) {
  10.       this.expression = this.expression.substr(0, this.expression.length - 1)
  11.       this.expression += value
  12.     } else {
  13.       this.expression += value
  14.     }
  15.     return
  16.   }
  17.   // 输入数字，表达式直接拼接，计算运算结果
  18.   this.expression += value
  19.   this.result = JSON.stringify(MATH.evaluate(this.expression))
  20. }</code></pre>
  21. <p></p>
复制代码
③ 当用户点击“=”按钮后，将调用JavaScript的math.js库对表达式进行计算。代码如下：
  1. import { create, all } from \'mathjs\'
  2. onInputValue = (value) => {
  3.   if (value === \'=\') { // 当用户点击=按钮
  4.     this.result = \'\'
  5.     // 判断表达式最后一个字符是运算符，运算结果需要去掉最后一个运算符运算，否则直接运算
  6.     if (this.isOperator(this.expression.substr(this.expression.length - 1, this.expression.length))) {
  7.       this.expression = JSON.stringify(MATH.evaluate(this.expression.substr(0, this.expression.length - 1)))
  8.     } else {
  9.       this.expression = JSON.stringify(MATH.evaluate(this.expression))
  10.     }
  11.     return
  12.   }
  13.   // 输入数字，表达式直接拼接，计算运算结果
  14.   this.expression += value
  15.   this.result = JSON.stringify(MATH.evaluate(this.expression))
  16. }
复制代码

注：计算功能的实现依赖于JavaScript的math.js库，使用前需通过npm install mathjs--save命令下载并安装math.js库。

2. 显示模块

显示模块实现了“键入的运算表达式”与“运算结果”的显示，本质上是Text文本，如图5所示：

图5 显示模块

首先我们通过@Component装饰器使该模块具有组件化能力，然后在build方法里描述UI结构，最后使用@Link状态装饰器管理组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。代码如下：
  1. @Component
  2. export struct InPutComponent {
  3.   private isLand: boolean
  4.   [url=home.php?mod=space&uid=41289]@Link[/url] result: string
  5.   @Link expression: string
  6.   build() {
  7.     Stack({ alignContent: this.isLand ? Alignment.BottomStart : Alignment.TopEnd }) {
  8.       Column() {
  9.         //运算表达式文本框
  10.         Scroll() {
  11.           Text(this.expression)
  12.             .maxLines(1)
  13.             .opacity(0.9)
  14.             .fontWeight(400)
  15.             .textAlign(TextAlign.Start)
  16.             .fontSize(this.isLand ? 50 : 35)
  17.         }
  18.         .width(\'90%\')
  19.         .scrollable(ScrollDirection.Horizontal)
  20.         .align(this.isLand ? Alignment.Start : Alignment.End)
  21.         //运算结果文本框
  22.         Scroll() {
  23.           Text(this.result)
  24.             .maxLines(1)
  25.             .opacity(0.38)
  26.             .textAlign(TextAlign.Start)
  27.             .fontSize(this.isLand ? 45 : 30)
  28.             .margin(this.isLand ? { bottom: 64 } : {})
  29.         }
  30.       }
  31.     }
  32.   }
  33. }
复制代码

至此，一个初具计算功能的计算器就实现了。下面我们将实现计算器的分布式功能。

三、分布式功能的实现

计算器的分布式功能以菜单栏模块为入口，并基于分布式设备管理与分布式数据管理技术实现。

1. 菜单栏模块

“菜单栏”模块为计算器顶部菜单栏，是计算器分布式功能的入口。

图6 菜单栏模块

如图6所示，当用户点击图标 时，执行terminate()方法，退出计算器应用。当用户点击 按钮时，执行showDialog()方法，界面上弹出的分布式设备列表弹窗，选择设备后将获取分布式数据管理的权限，最后实现远端设备的拉起。代码如下：
  1. @Component
  2. export struct TitleBar {
  3.   build() {
  4.     Row() {
  5.       Image($r(\"app.media.ic_back\"))
  6.         .height(\'60%\')
  7.         .margin({ left: 32 })
  8.         .width(this.isLand ? \'5%\' : \'8%\')
  9.         .objectFit(ImageFit.Contain)
  10.         //执行terminate()方法，退出计算器应用
  11.         .onClick(() => {
  12.           app.terminate()
  13.         })
  14.       Blank().layoutWeight(1)
  15.       Image($r(\"app.media.ic_hop\"))
  16.         .height(\'60%\')
  17.         .margin({ right: 32 })
  18.         .width(this.isLand ? \'5%\' : \'8%\')
  19.         .objectFit(ImageFit.Contain)
  20.         //执行showDialog()方法，界面上弹出的分布式设备列表弹窗
  21.         .onClick(() => {
  22.           this.showDiainfo()
  23.         })
  24.     }
  25.     .width(\'100%\')
  26.     .height(this.isLand ? \'10%\' : \'8%\')
  27.     .constraintSize({ minHeight: 50 })
  28.     .alignItems(VerticalAlign.Center)
  29.   }
  30. }
复制代码

2. 分布式设备管理

在分布式计算器应用中，分布式设备管理包含了分布式设备搜索、分布式设备列表弹窗、远端设备拉起三部分。首先在分布式组网内搜索设备，然后把设备展示到分布式设备列表弹窗中，最后根据用户的选择拉起远端设备。

(1) 分布式设备搜索

通过SUBSCRIBE_ID搜索分布式组网内的远端设备，代码如下：
  1. startDeviceDiscovery() {
  2.   SUBSCRIBE_ID = Math.floor(65536 * Math.random())
  3.   let info = {
  4.     subscribeId: SUBSCRIBE_ID,
  5.     mode: 0xAA,
  6.     medium: 2,
  7.     freq: 2,
  8.     isSameAccount: false,
  9.     isWakeRemote: true,
  10.     capability: 0
  11.   }
  12.   Logger.info(TAG, `startDeviceDiscovery ${SUBSCRIBE_ID}`)
  13.   this.deviceManager.startDeviceDiscovery(info)
  14. }
复制代码

(2) 分布式设备列表弹窗

分布式设备列表弹窗实现了远端设备的选择，如图7所示，用户可以根据设备名称选择相应的设备进行协同计算。


图7 分布式设备列表弹窗


这里我们使用@CustomDialog装饰器来装饰分布式设备列表弹窗，代码如下：
  1. @CustomDialog
  2. export struct DeviceDialog {
  3.   build() {
  4.     Column() {
  5.       List() {
  6.         ForEach(this.deviceList, (item, index) => {
  7.           ListItem() {
  8.             Row() {
  9.               Text(item.deviceName)
  10.                 .fontSize(21)
  11.                 .width(\'90%\')
  12.                 .fontColor(Color.Black)
  13.               Image(index === this.selectedIndex ? $r(\'app.media.checked\') : $r(\'app.media.uncheck\'))
  14.                 .width(\'8%\')
  15.                 .objectFit(ImageFit.Contain)
  16.             }
  17.             .height(55)
  18.             .margin({ top: 17 })
  19.             .onClick(() => {
  20.                 if (index === this.selectedIndex) {
  21.                 return
  22.               }
  23.               this.selectedIndex = index
  24.               this.onSelectedIndexChange(this.selectedIndex)
  25.             })
  26.           }
  27.         }, item => item.deviceName)
  28.       }
  29.     }
  30.   }
  31. }
复制代码

(3) 远端设备拉起

通过startAbility(deviceId)方法拉起远端设备的FA，代码如下：
  1. startAbility(deviceId) {
  2.   featureAbility.startAbility({
  3.     want: {
  4.       bundleName: \'ohos.samples.DistributeCalc\',
  5.       abilityName: \'ohos.samples.DistributeCalc.MainAbility\',
  6.       deviceId: deviceId,
  7.       parameters: {
  8.         isFA: \'FA\'
  9.       }
  10.     }
  11.   }).then((data) => {
  12.     this.startAbilityCallBack(DATA_CHANGE)
  13.   })
  14. }
复制代码

3. 分布式数据管理

分布式数据管理用于实现协同计算时数据在多端设备之间的相互同步。我们需要创建一个分布式数据库来保存协同计算时数据，并通过分布式数据通信进行同步。

(1) 管理分布式数据库

创建一个KVManager对象实例，用于管理分布式数据库对象。代码如下：
  1. async createKvStore(callback) {
  2.   //创建一个KVManager对象实例
  3.   this.kvManager = await distributedData.createKVManager(config)
  4.   let options = {
  5.     createIfMissing: true,
  6.     encrypt: false,
  7.     backup: false,
  8.     autoSync: true,
  9.     kvStoreType: 1,
  10.     securityLevel: 1,
  11.   }
  12.   // 通过指定Options和storeId，创建并获取KVStore数据库，并通过Promise方式返回，此方法为异步方法。
  13.   this.kvStore = await this.kvManager.getKVStore(STORE_ID, options)
  14.   callback()
  15. }
复制代码

(2) 订阅分布式数据变化

通过订阅分布式数据库所有（本地及远端）数据变化实现数据协同，代码如下：
  1. kvStoreModel.setOnMessageReceivedListener(DATA_CHANGE, (value) => {
  2.   if (this.isDistributed) {
  3.     if (value.search(EXIT) != -1) {
  4.       Logger.info(TAG, `EXIT ${EXIT}`)
  5.       featureAbility.terminateSelf((error) => {
  6.         Logger.error(TAG, `terminateSelf finished, error= ${error}`)
  7.       });
  8.     } else {
  9.       this.expression = value
  10.       if (this.isOperator(this.expression.substr(this.expression.length - 1, this.expression.length))) {
  11.         this.result = JSON.stringify(MATH.evaluate(this.expression.substr(0, this.expression.length - 1)))
  12.       } else {
  13.         this.result = JSON.stringify(MATH.evaluate(this.expression))
  14.       }
  15.     }
  16.   }
  17. })
复制代码

至此，具有分布式能力的计算器就实现了。期待广大开发者能基于TS扩展的声明式开发范式开发出更多有趣的应用。

点击链接，可获取分布式计算器完整代码：https://gitee.com/openharmony/app_samples/tree/master/Preset/DistributeCalc



举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友