一文读懂HarmonyOS服务卡片怎么换肤

原文：一文读懂服务卡片怎么换肤，点击链接查看更多技术内容。

作者：zhenyu，华为软件开发工程师

关注HarmonyOS的小伙伴肯定对服务卡片已经很熟悉了。服务卡片（也简称为“卡片”）是FA（FeatureAbility，元服务）的一种界面展示形式，将FA的重要信息或操作前置到卡片，以达到服务直达，减少体验层级的目的。

类似手机上应用的换肤，服务卡片也支持换肤。本期，我们就来聊一聊卡片换肤。

目录

一、“卡片换肤”换的是什么？

二、如何实现卡片换肤？

三、开发实例

四、结束语

---

一、“卡片换肤”换的是什么？

服务卡片的UI界面由一系列的资源组成，这些资源包括颜色、文本、图标和圆角等等。不同资源有对应的资源ID，通过替换资源ID对应的资源就可以实现换肤。

为了让大家更了解卡片换肤，下面来看两个示例：

1.更改卡片的圆角大小。
 

图1 卡片的圆角大小

2.更改卡片的背景颜色和文字颜色。

图2 卡片的文本和背景颜色

通过上面两个示例，我们看到：通过修改卡片的圆角资源参数、背景颜色、文本颜色等就对卡片进行了简单的换肤。实际场景中，我们还可以对图标、多彩色板、切图资源等各类卡片资源进行修改和替换，实现更复杂的换肤。

二、如何实现卡片换肤？

卡片换肤需要应用开发者、主题开发者和系统三者的配合。卡片换肤的整体流程如图3所示。

图3 卡片换肤流程

卡片换肤流程说明如下：

• 步骤一：应用开发者在开发卡片时，可以自定义卡片的各项资源及其资源ID。
• 步骤二：主题开发者在开发主题包时会使用新的资源来替换资源ID对应的资源信息。
• 步骤三：用户下载和安装主题包后，在切换主题时，由系统自动完成卡片相应的资源替换，从而达到卡片换肤的目的。

下面我们以JS卡片为例分别从应用开发者、主题开发者、系统三者的角度来介绍卡片换肤的实现方案。

1. 应用开发者：开发卡片

JS卡片工程中，应用开发者可以使用的资源，包括三类：JS模块资源、应用资源和系统资源。下面一一介绍如何引用这三类资源。

（1）JS模块资源

JS模块资源指的是src/main/js/Component下resources目录中的资源，如图4所示。