HarmonyOS卡片 harmonyos桌面卡片

博客中所有涉及到的代码都可在Gitee获得，点击到达

服务卡片（以下简称“卡片”），在桌面点击图标向上推动会弹出一个小卡片。弹出卡片后也可将卡片固定在屏幕中作为一个小组件显示。卡片中可以显示自定义的UI，也可以点击产生互动。

先看下完成后的效果。 

目录

卡片服务基本概念

创建模板

布局文件代码

配置文件

---

卡片服务基本概念

• 卡片使用方

        显示卡片内容的宿主应用，控制卡片在宿主中展示的位置。

• 卡片管理服务

        用于管理系统中所添加卡片的常驻代理服务，包括卡片对象的管理与使用，以及卡片周期性刷新等。

• 卡片提供方

        提供卡片显示内容的HarmonyOS应用或原子化服务，控制卡片的显示内容、控件布局以及控件点击事件。

运作机制如下：

创建模板

我们可以用DevEco Studio自带的模板。

在工程列表中右键 -> 新建 -> Service Widget

 以基础配置的immersive Pattern 为例，点击下一步。

 设置这个服务小装置设置名称、描述，创建新的实体，类型为Java，支持2*2和5*4两种大小。

点击完成后会自动为我们生成相关配置、类文件与布局文件。

 

假若我们需要写的时天气的服务卡，我们就需要修改两个配置文件。

• form_immersive_pattern_widget_weather_2_2.xml
• form_immersive_pattern_widget_weather_2_4.xml

布局文件代码

form_immersive_pattern_widget_weather_2_2.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#0086D4"
    ohos:remote="true">

    <Image
        ohos:height="240"
        ohos:width="240"
        ohos:align_parent_end="true"
        ohos:image_src="$media:100"
        ohos:scale_mode="zoom_center"/>

    <Text
        ohos:id="$+id:title"
        ohos:text="北京"
        ohos:text_size="39px"
        ohos:text_color="#b0c4de"
        ohos:top_margin="42px"
        ohos:left_margin="20px"
        ohos:width="match_content"
        ohos:height="match_content"/>

    <Text
        ohos:id="$+id:temperature"
        ohos:text="35°"
        ohos:text_size="100px"
        ohos:text_color="#FFFFFF"
        ohos:top_margin="70px"
        ohos:left_margin="20px"
        ohos:below="$id:title"
        ohos:width="match_content"
        ohos:height="match_content"/>
    <Text
        ohos:id="$+id:textView4"
        ohos:text="28° ~ 35°"
        ohos:text_size="39px"
        ohos:text_color="#b0c4de"
        ohos:top_margin="10px"
        ohos:left_margin="20px"
        ohos:below="$id:temperature"
        ohos:width="match_content"
        ohos:height="match_content"/>

    <Text
        ohos:id="$+id:textView5"
        ohos:text="晴"
        ohos:text_size="39px"
        ohos:text_color="#b0c4de"
        ohos:top_margin="10px"
        ohos:left_margin="20px"
        ohos:below="$id:textView4"
        ohos:width="match_content"
        ohos:height="match_content"/>
</DependentLayout>

form_immersive_pattern_widget_weather_2_4.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:background_element="#0086D4"
    ohos:height="match_parent"
    ohos:remote="true"
    ohos:width="match_parent">

    <Image
        ohos:align_parent_end="true"
        ohos:height="240"
        ohos:image_src="$media:100"
        ohos:scale_mode="zoom_center"
        ohos:width="240"/>

    <Text
        ohos:height="match_content"
        ohos:id="$+id:title"
        ohos:left_margin="20px"
        ohos:text="北京"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="42px"
        ohos:width="match_content"/>

    <Text
        ohos:below="$id:title"
        ohos:height="match_content"
        ohos:id="$+id:temperature"
        ohos:left_margin="20px"
        ohos:text="35°"
        ohos:text_color="#FFFFFF"
        ohos:text_size="100px"
        ohos:top_margin="70px"
        ohos:width="match_content"/>

    <Text
        ohos:below="$id:temperature"
        ohos:height="match_content"
        ohos:id="$+id:textView4"
        ohos:left_margin="20px"
        ohos:text="28° ~ 35°"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="10px"
        ohos:width="match_content"/>

    <Text
        ohos:below="$id:textView4"
        ohos:height="match_content"
        ohos:id="$+id:textView5"
        ohos:left_margin="20px"
        ohos:text="多云"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="10px"
        ohos:width="match_content"/>

    <Text
        ohos:height="match_content"
        ohos:id="$+id:textView6"
        ohos:left_margin="300px"
        ohos:right_of="$id:title"
        ohos:text="宜洗车"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="80px"
        ohos:width="match_content"/>

    <Text
        ohos:align_left="$id:textView6"
        ohos:below="$id:textView6"
        ohos:height="match_content"
        ohos:id="$+id:textView7"
        ohos:text="紫外线强度：80"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="20px"
        ohos:width="match_content"/>

    <Text
        ohos:align_left="$id:textView6"
        ohos:below="$id:textView7"
        ohos:height="match_content"
        ohos:text="今日运势：你需要应付低迷的运势，意味着要步步为营，千万不能受利益的诱惑。你或许只是充当别人的“绿叶”"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="20px"
        ohos:multiple_lines="true"
        ohos:max_text_lines="4"
        ohos:truncation_mode="ellipsis_at_end"
        ohos:width="500"/>
</DependentLayout>

配置文件

服务卡的配置文件如下：

{
    "name": "com.example.helloharmony.widget.WeatherFomrAbility",
    "icon": "$media:icon",
    "description": "$string:widget_weatherfomrability_description",
    "formsEnabled": true,
    "label": "$string:entry_WeatherFomrAbility",
    "type": "page",
    "forms": [
        {
            "landscapeLayouts": [
                "$layout:form_immersive_pattern_widget_weather_2_2",
                "$layout:form_immersive_pattern_widget_weather_2_4"
            ],
            "isDefault": true,
            "scheduledUpdateTime": "10:30",
            "defaultDimension": "2*2",
            "name": "widget_weather",
            "description": "This is a weather service widget",
            "colorMode": "auto",
            "type": "Java",
            "supportDimensions": [
                "2*2",
                "2*4"
            ],
            "portraitLayouts": [
                "$layout:form_immersive_pattern_widget_weather_2_2",
                "$layout:form_immersive_pattern_widget_weather_2_4"
            ],
            "updateEnabled": true,
            "updateDuration": 1
        }
    ],
    "launchType": "singleton"
}

属性解读

可能比较陌生的是forms中的配置，如果需要了解外部配置请看之前的文章。

属性名称	子属性	含义
name	-	表示卡片的类名。
description	-	表示卡片的描述。取值可以是描述性内容，也可以是对描述性内容的资源索引，以支持多语言。
isDefault	-	表示该卡片是否为默认卡片，每个Ability有且只有一个默认卡片。 true：默认卡片。 false：非默认卡片。
type	-	表示卡片的类型。取值范围如下： Java：Java卡片。 JS：JS卡片。
colorMode	-	表示卡片的主题样式，取值范围如下： auto：自适应。 dark：深色主题。 light：浅色主题。
supportDimensions	-	表示卡片支持的外观规格，取值范围： 1*2：表示1行2列的二宫格。 2*2：表示2行2列的四宫格。 2*4：表示2行4列的八宫格。 4*4：表示4行4列的十六宫格。
defaultDimension	-	表示卡片的默认外观规格，取值必须在该卡片supportDimensions配置的列表中。
landscapeLayouts	-	表示卡片外观规格对应的横向布局文件，与supportDimensions中的规格一一对应。
portraitLayouts	-	表示卡片外观规格对应的竖向布局文件，与supportDimensions中的规格一一对应。
updateEnabled	-	表示卡片是否支持周期性刷新，取值范围： true：表示支持周期性刷新，可以在定时刷新（updateDuration）和定点刷新（scheduledUpdateTime）两种方式任选其一，优先选择定时刷新。 false：表示不支持周期性刷新。
scheduledUpdateTime	-	表示卡片的定点刷新的时刻，采用24小时制，精确到分钟。
updateDuration		表示卡片定时刷新的更新周期，单位为30分钟，取值为自然数。 当取值为0时，表示该参数不生效。 当取值为正整数N时，表示刷新周期为30*N分钟。
formConfigAbility	-	表示卡片的配置跳转链接，采用URI格式。
metaData	-	表示卡片的自定义信息，包含customizeData数组标签。
customizeData	-	表示自定义的卡片信息。
	name	表示数据项的键名称。
	value	表示数据项的值。