创建服务卡片
======

#### 概述

[服务卡片（简称“卡片”）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/formkit-overview)可将元服务/应用的重要信息以卡片的形式展示在桌面，用户可通过快捷手势使用卡片，通过轻量交互行为实现服务直达、减少层级跳转的目的。

卡片类型分静态卡片和动态卡片两种。静态卡片内存占用较小，有助于实现整机内存优化，可实现静态信息展示、刷新和点击跳转；动态卡片支持自定义交互、动效、滑动等功能，功能丰富但内存占用较大。

从编译产物角度，卡片包产物分为共包和独立包两种类型，详情请参考[创建ArkTS卡片](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-widget-creation)。

| 
创建方式

 | 

卡片类型

 |
| :-- | :-- |
| 

共包

 | 

静态卡片（Static Widget）

 |
| 

动态卡片（Dynamic Widget）

 |
| 

独立包

 | 

独立静态卡片（Static Widget(Standalone)）

 |
| 

独立动态卡片（Dynamic Widget(Standalone)）

 |

创建卡片后可选择不同卡片模板以满足业务需求，具体卡片模板和详细描述如下。

| 
模板名称

 | 

支持的设备

 | 

支持的开发语言

 | 

模板描述

 |
| :-- | :-- | :-- | :-- |
| 

Hello World

 | 

Phone、Tablet、2in1、Wearable、Car、TV

 | 

ArkTS、JS

 | 

HelloWorld卡片，用于高效直观地构建UI。当前Hello World卡片模板支持使用6\*4尺寸。

 |
| 

Image With Information（图文卡片模板）

 | 

Phone、Tablet、2in1、Wearable、Car

 | 

ArkTS、JS

 | 

图文卡片模板主要在于展现图片和一定数量文本的搭配，在这种布局下，图片和文本属于同等重要的信息。在不同尺寸下，图片大小和文本数量会发生一定变化，用于凸显关键信息。

 |
| 

Immersive Information（沉浸图文卡片模板）

 | 

Phone、Tablet、2in1、Wearable、Car

 | 

ArkTS、JS

 | 

沉浸式卡片的装饰性较强，能够较好的提升卡片品质感并起到装饰桌面的作用，合理的去布局信息与背景图片之间的空间比例，可以提升用户的个性化使用体验。

 |
| 

List

 | 

Phone、Tablet、2in1、Car

 | 

ArkTS

 | 

提供基本的列表功能。当前仅动态卡片支持在API 11及以上工程创建List卡片模板。

 |
| 

Control Button

 | 

Phone、Tablet、2in1、Car

 | 

ArkTS

 | 

操控类型的卡片，展示文本信息与按钮操作，点击按钮响应事件。当前仅静态卡片支持API 11及以上工程创建Control Button卡片模板。

 |
| 

Control Search

 | 

Phone、Tablet、2in1、Car

 | 

ArkTS

 | 

操控类型的卡片，适用于搜索场景。当前仅静态卡片支持API 11及以上工程创建Control Search卡片模板。

 |

#### 使用约束

*   卡片不支持调试。
*   仅应用的Hello World、Image With Information、Immersive Information的动态卡片和独立动态卡片支持JS语言，元服务不支持JS语言。
*   从DevEco Studio 5.0.4 Release开始，支持在API 16及以上工程创建Wearable设备可用的卡片。
*   从DevEco Studio 6.0.0 Beta3开始，支持在API 20及以上工程创建Car设备可用的卡片。
*   从DevEco Studio 6.0.0 Beta3开始，支持Phone设备创建独立静态/动态卡片。
*   DevEco Studio 5.1.1 Release（Build Version:5.1.1.850）版本、DevEco Studio 6.0.0 Release（Build Version:6.0.0.868）及以上版本，支持工程创建TV设备可用的卡片。
*   一个工程模块内，仅支持创建共包类型卡片或独立包类型卡片。
*   每个模块最多可以配置16张卡片。

#### 创建服务卡片

[创建一个工程](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-create-new-project)后，可以通过如下方法进行创建卡片。

1.  创建卡片包括如下两种方式：
    
    *   选择模块（如entry模块）下的任意文件，单击菜单栏**File > New > Service Widget**，[按需选择卡片](#section6353219163116)。
    *   选择模块（如entry模块）下的任意文件，单击**右键 > New > Service Widget**，[按需选择卡片](#section6353219163116)。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8e/v3/6vghBdYfRPubty-vuiSRew/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073823Z&HW-CC-Expire=86400&HW-CC-Sign=3DD8FDFB892FA92AC88078493CA745F2B36F241CCBE68160886224629823EBF5)
    
    *   API 11 Stage模型及以上，创建元服务工程或在元服务工程中创建模块时，不再默认创建卡片和EntryCard。
    
2.  在**Choose a Template for Your Service Widget**界面中，选择卡片模板，单击**Next**。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/21/v3/gTxKVBH_TlSTjISTFtuShA/zh-cn_image_0000002594634216.png?HW-CC-KV=V1&HW-CC-Date=20260612T073823Z&HW-CC-Expire=86400&HW-CC-Sign=35674CB3B5816AAC2A28809A0C1462137EF82DC0B39AE3FD22F83B98960A4ADB)
    
3.  在**Configure Your Service Widget**界面中，配置卡片的基本信息，包括：
    
    *   **Service widget name**：卡片的名称，在同一个应用/元服务中，卡片名称不能重复，且只能包含大小写字母、数字和下划线。
    *   **Display name**：卡片预览面板上显示的卡片名称。仅API 11 及以上Stage工程支持配置该字段。
    *   **Description**：卡片的描述信息。
    *   **Language：**界面开发语言，可选择创建ArkTS/JS卡片。
    *   **Support dimension**：选择卡片的规格。部分卡片支持同时设置多种规格。首次创建卡片时，将默认生成一个EntryCard目录，用于存放卡片快照。
    *   **Default dimension**：在下拉框中可选择默认的卡片。
    *   **Ability name：**选择一个挂靠卡片的Form Ability，或者创建一个新的Form Ability。
    *   **Module name：**卡片所属的模块。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/44/v3/mEZsjb-2Q72wvP4M3OTHow/zh-cn_image_0000002625073801.png?HW-CC-KV=V1&HW-CC-Date=20260612T073823Z&HW-CC-Expire=86400&HW-CC-Sign=DE8A29355A6472AEB71C6A03C6F6EC0F56D749B6BC4E41F8ED9762D876234036)
    
4.  单击**Finish**完成卡片的创建。创建完成后，工具会自动创建出卡片的布局文件，并在form\_config.json文件中写入服务卡片的属性字段，关于各字段的说明请参考[配置文件说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-widget-configuration)。
5.  卡片创建完成后，请根据开发指导，完成卡片的开发，详情请参考[服务卡片开发指南](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-widget)。

#### 预览服务卡片

在开发卡片过程中，支持对卡片进行实时预览。卡片通过ArkTS文件进行布局设计，在开发过程中，可以对布局文件进行实时预览，只要在布局文件中保存了修改的源代码，在预览器中就可以实时查看布局效果。在Phone和Tablet卡片的预览效果中，每个尺寸的卡片提供3种场景的预览效果，分别为极窄（Minimum）、默认（Default）、极宽(Maximum)，开发者应确保三种尺寸的显示效果均正常，以便适应不同屏幕尺寸的设备。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ff/v3/zSJSFOSzQo2ONKMgPOzCDw/zh-cn_image_0000002624993657.png?HW-CC-KV=V1&HW-CC-Date=20260612T073823Z&HW-CC-Expire=86400&HW-CC-Sign=BBDFD192BE8DA1BFFD6DEA8B68990CA461CDC6A8FA77873813531B39CFCFEF63)

关于预览器的使用详细说明请参考[界面预览](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-previewer-01)。