项目6 桌面计算器

项目6桌面计算器目录1项目描述2学习目标3知识图谱4技术准备5项目实施6项目小结7AI赋能1项目描述创建一个桌面计算器，可以显示一个简洁直观的计算器界面，支持基本的数学运算，包括加、减、乘、除功能。长按应用图标可以将卡片添加到桌面，在桌面上对卡片进行计算操作。运行效果如图6-1、图6-2、图6-3所示。

图6-1添加卡片效果

图6-2卡片预览效果

图6-3操作卡片效果2学习目标知识目标1.熟悉FormKit的服务卡片架构、特征与开发模式2.掌握ArkTS卡片的创建方法3.掌握ArkTS卡片配置文件的结构和作用4.掌握ArkTS卡片从创建到销毁的完整生命周期流程技能目标能够使用ArkTS卡片实现开发计算器的卡片功能素质目标1.培养工程化思维与规范意识2.树立职业责任感，强化质量意识3知识图谱本项目所涉及的知识图谱，以“桌面计算器”为核心，系统梳理了构建该项目的核心知识体系。图谱采用中心辐射式结构，在核心主题节点下延伸出四大模块，直观呈现了从FormKit简介、创建ArkTS卡片、ArkTS卡片的配置文件到ArkTS卡片生命周期的完整学习路径。项目知识图谱如图6-4所示。

图6-4

项目知识图谱4技术准备6.4.1FormKit简介FormKit（卡片开发框架）提供了一种在桌面、锁屏等系统应用上嵌入显示应用信息的开发框架和API，可以把应用的重要信息或常用操作抽成卡片，钉在桌面、锁屏或负一屏，用户无需打开App就能看数据、点按钮。适用设备：手机、平板、2-in-1PC、智慧屏、智能手表（轻量级穿戴设备暂不支持）。使用场景：用户可以在桌面、锁屏等系统应用上添加并使用，不支持在普通应用内嵌入显示卡片。1.卡片使用步骤长按应用图标，选择“卡片”>预览卡片>将卡片添加到桌面，如图6-5所示。图6-5

卡片使用步骤4技术准备2.服务卡片架构服务卡片架构如图6-6所示，具体说明如下。卡片使用方：桌面作为宿主应用，负责显示卡片内容并与用户直接交互，实现卡片的添加、删除和展示，并控制卡片在宿主中的具体显示位置。卡片管理服务：卡片管理服务是操作系统内统一管理卡片信息的系统服务，充当卡片提供方与使用方之间的桥梁。它向使用方提供卡片的查询、添加和删除等管理能力。同时，向提供方通知卡片的添加、删除、刷新及点击事件等相关状态变化。卡片提供方：提供卡片功能的应用或元服务，作为卡片的具体实现方，需负责卡片UI设计、数据更新及点击交互处理功能的实现。

图6-6服务卡片架构4技术准备3.特征信息呈现：将应用或元服务的重要信息以卡片形式呈现在桌面上，并具备定时更新能力，使用户能够随时查看所关注的内容。服务直达：用户通过点击卡片内按钮，即可快速执行功能操作，也可跳转至应用或元服务的相应功能页面，实现功能服务的一步直达。4技术准备6.4.2创建ArkTS卡片1.新建工程在DevEcoStudio中，选择创建Application或AtomicService工程，这两种都支持创建卡片。这里创建“Application”工程，然后选择“EmptyAbility”模板，单击“Next”按钮，如图6-7所示。在CreateProject中，修改工程名，并设置设备类型为”phone”，单击”Finish”按钮，如图6-8所示。

图6-7新建工程

图6-8配置工程4技术准备2.新建卡片在已有的应用工程中新建ArkTS卡片，具体操作如下。(1)选中entry目录，右击后选择“New>ServiceWidget>DynamicWidget”，如图6-9所示。在API10及以上Stage模型的工程中，开发者可通过ServiceWidget菜单直接创建动态卡片（DynamicWidget）或静态卡片（StaticWidget）。其中，动态卡片支持数据实时刷新和用户交互，而静态卡片内容固定不变。创建卡片后，也可在entry/src/main/resources/base/profile/form_config.json配置文件中通过isDynamic参数修改卡片类型：若isDynamic为空或设为"true"，则为动态卡片；设为"false"则为静态卡片。静态卡片与动态卡片切换后，对应的用户交互实现也需相应调整。

图6-9新建卡片4技术准备（2）选择“HelloWorld”模板后，单击“Next”按钮，如图6-10所示。

图6-10选择模板（3）选择卡片的开发语言类型（Language）为ArkTS选项。在卡片支持的外观规格（Supportdimension）中，勾选所需的卡片尺寸，并指定默认外观规格（Defaultdimension），其余设置如图6-11所示，最后单击“Finish”完成ArkTS卡片的创建。后续如需调整卡片规格，可在form_config.json配置文件中进行修改。

图6-11创建ArkTS卡片4技术准备建议根据实际使用场景为卡片命名。完成ArkTS卡片创建后，工程中将自动生成以下卡片相关文件：卡片生命周期管理文件（EntryFormAbility.ets）、卡片页面文件（WidgetCard.ets）和卡片配置文件（form_config.json），如图6-12所示。

图6-12卡片的相关文件4技术准备{

"module":{

//...

"extensionAbilities":[

{

"name":"EntryFormAbility",

"srcEntry":"./ets/entryformability/EntryFormAbility.ets",

"label":"$string:EntryFormAbility_label",

"description":"$string:EntryFormAbility_desc",

"type":"form",

"metadata":[

{

"name":"ohos.extension.form",

"resource":"$profile:form_config"

}

]

}

],

"formWidgetModule":"library"

//只在独立卡片包形态中会使用，用来关联卡片包模块。

}}6.4.3ArkTS卡片的配置文件1.FormExtensionAbility配置卡片需要在module.json5配置文件的extensionAbilities标签下，配置FormExtensionAbility相关信息。FormExtensionAbility需要填写metadata元信息标签，其中键名称为固定字符串“ohos.extension.form”，资源为卡片具体配置信息的资源索引。配置示例如右：4技术准备2.卡片配置在上述FormExtensionAbility的元信息metadata配置项中，可以指定卡片具体配置信息的资源索引。例如当resource指定为$profile:form_config时，会使用开发视图的resources/base/profile/目录下的form_config.json作为卡片profile配置文件。在创建卡片时会自动生成form_config.json配置文件。配置示例如右：{

"forms":[

{

"name":"widget",

"displayName":"$string:widget_display_name",

"description":"$string:widget_desc",

"src":"./ets/widget/pages/WidgetCard.ets",

"uiSyntax":"arkts",

"window":{

"designWidth":720,

"autoDesignWidth":true

},"colorMode":"auto","isDynamic":true,"isDefault":true,"updateEnabled":false,"scheduledUpdateTime":"10:30","updateDuration":1,"defaultDimension":"2*2","supportDimensions":["2*2"]

}

]}4技术准备6.4.4ArkTS卡片生命周期EntryFormAbility.ets文件是HarmonyOS应用中卡片提供方的扩展入口，通过继承FormExtensionAbility并实现卡片添加、更新、事件、移除等生命周期回调，来管理卡片的创建、数据更新及状态维护，其所在文件为entry/src/mainets/entryformability/EntryFormAbility.ets。exportdefaultclassEntryFormAbilityextendsFormExtensionAbility{onAddForm(want:Want){//卡片使用方创建卡片时触发，提供方需要返回卡片数据绑定对象constformData='';returnformBindingData.createFormBindingData(formData);}onCastToNormalForm(formId:string){//卡片服务端回调，将卡片从临时状态切换为常态，常规应用无须实现}onUpdateForm(formId:string){//若卡片支持定时更新/定点更新/卡片使用方主动请求更新等功能，则提供方需要重写该方法以支持数据更新}onFormEvent(formId:string,message:string){//若卡片支持事件，则需要重写该方法以处理卡片使用方触发的对应事件}onRemoveForm(formId:string){//删除卡片实例数据，在此完成卡片移除时的清理工作，删除之前持久化的卡片实例数据}onAcquireFormState(want:Want){//卡片提供方接收查询卡片状态通知接口，默认返回卡片初始状态returnformInfo.FormState.READY;}}import{formBindingData,FormExtensionAbility,formInfo}from'@kit.FormKit';import{Want}from'@kit.AbilityKit';5项目实施6.5.1项目目录结构项目目录结构如图6-13所示。

图6-13

项目目录结构图5项目实施6.5.2准备项目资源1.string.json——语言字符串资源string.json集中管理应用中所有可本地化的文本内容，包括模块、Ability和服务的显示名称与描述，其所在文件为entry/src/main/resources/base/element/string.json。2.应用图标应用图标如图6-14所示，其所在文件为entry/src/main/resources/base/media/icon.png。

图6-14应用图标{

"string":[

{

"name":"module_desc",

"value":"模块描述"

},

{

"name":"EntryAbility_desc",

"value":"description"

},

{

"name":"EntryAbility_label",

"value":"计算器"

},

{

"name":"EntryFormAbility_desc",

"value":"添加一个桌面计算器"

},

{

"name":"EntryFormAbility_label",

"value":"桌面计算器"

}

]}注意"value":"计算器"是应用在桌面的显示名称，且

name

不能重复。5项目实施6.5.3计算器主界面实现（代码实现参见教材）Index.ets是计算器应用的主界面入口文件，其核心作用是构建完整的计算器UI并处理所有交互逻辑。该文件通过ArkUI声明式语法定义了计算器的整体布局，包括显示区域和按钮排列，并管理表达式和结果两种核心状态。它实现了用户输入处理、运算逻辑调度（包括中缀表达式解析与后缀表达式计算）以及界面实时更新功能，为用户提供了一个支持基本数学运算的交互式计算界面。1.Index.ets代码注意处理除零错误和连续输入运算符的情况，掌握这些后可以轻松扩展更多计算功能。5项目实施6.5.4计算器卡片页面实现计算器卡片页面（CardCalculator.ets）复用主计算器页面（Index.ets）的完整逻辑，仅需将入口组件名称修改为CardCalculator，其余代码（包括状态管理、UI布局、计算逻辑等）与Index.ets完全一致。这种设计实现了功能复用,即桌面卡片与主应用保持相同的计算能力。CardCalculator.ets文件代码如下。letstorage=newLocalStorage()@Entry(storage)@ComponentstructCardCalculator{

//修改入口组件名称为CardCalculator

@Stateresult:string='';

@Stateexpression:string='';

//其余代码与Index.ets一致5项目实施6.5.5

配置ArkTS卡片的配置文件（代码实现参见教材）1.module.json5——应用配置文件module.json5是应用模块的配置文件，其结构分为三个部分：模块基础配置：定义模块名称、类型、设备支持等基本信息页面与Ability配置：声明应用组件EntryAbility及其界面与入口技能卡片服务扩展：通过extensionAbilities配置FormExtensionAbility卡片功能在extensionAbilities中通过类型为"form"的扩展项实现，其中name和srcEntry分别指定卡片Ability的名称和代码路径，metadata中的resource字段（$profile:form_config）则关联了定义卡片具体规格和行为的独立配置文件。2.form_config.json——卡片配置文件form_config.json文件中，"forms"数组下的对象配置了一个名为"calculator"的卡片："src"字段指定了卡片的UI组件路径（CardCalculator.ets），"uiSyntax"声明其使用ArkTS语言开发，"window"设置了UI设计的基准宽度。卡片的关键属性还包括默认尺寸("defaultDimension")为4*4、支持的尺寸列表("supportDimensions")、颜色模式自适应("colorMode")以及更新策略（本例中自动更新功能被关闭，即"updateEnabled":false）。该配置文件共同决定了卡片的显示样式、更新逻辑和可用尺寸。5项目实施6.5.6管理ArkTS卡片生命周期卡片生命周期处理文件定义了卡片从创建到销毁的生命周期管理，它通过7个关键方法处理卡片的添加、更新、事件响应和状态变化等。EntryFormAbility.ets文件代码如右。import{formBindingData,formInfo,FormExtensionAbility}from'@kit.FormKit';import{Want}from'@kit.AbilityKit';exportdefaultclassEntryFormAbilityextendsFormExtensionAbility{onAddForm(want:Want){//当系统请求创建新卡片时调用letformData='';returnformBindingData.createFormBindingData(formData);}onCastToNormalForm(formId:string){//当临时卡片转为普通卡片时触发}onUpdateForm(formId:string){//当需要更新卡片内容时调用}onChangeFormVisibility(newS