鸿蒙HarmonyOS原子化服务卡片图片颜色体验

问题：请给出一个鸿蒙HarmonyOS原子化服务卡片图片颜色体验（卡片色彩）的项目。

回答：

卡片名称：JLTFCardTemplateImage；卡片语言：JAVA；工具：deveco studio（DevEco Studio没有Linux版本提供，仅支持Windows和Mac系统）。

一、效果与说明如下

二、具体开发体验过程

请先新建一个java的应用项目（不必选择show in service center）。

然后构建完成项目后在src下new->service widget：

选择basic下的gird pattern模板：

然后next配置你的卡片名和类型和尺寸。

登录你的账号然后启动模拟器。

即可实现效果Xml (4*4)。

三、部分核心代码

<?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:remote="true">

    <DependentLayout

        ohos:height="match_parent"

        ohos:width="match_parent"

        ohos:align_parent_bottom="true"

        ohos:bottom_margin="198vp"

        ohos:background_element="#ffffff">

        <Image

            ohos:id="$+id:image"

            ohos:height="60vp"

            ohos:width="60vp"

            ohos:image_src="$media:color"

            ohos:scale_mode="zoom_start"

            ohos:start_margin="12vp"

            ohos:top_margin="12vp"/>

        <DirectionalLayout

            ohos:height="match_content"

            ohos:width="match_parent"

            ohos:align_parent_bottom="true"

            ohos:bottom_margin="12vp"

            ohos:end_margin="12vp"

            ohos:orientation="vertical"

            ohos:start_margin="12vp">

            <Text

                ohos:height="match_content"

                ohos:width="match_parent"

                ohos:text="$string:widget_title"

                ohos:text_color="#000000"

                ohos:text_size="24fp"

                ohos:text_weight="500"

                ohos:truncation_mode="ellipsis_at_end"/>

            <Text

                ohos:height="match_content"

                ohos:width="match_parent"

                ohos:text="$string:widget_introduction"

                ohos:text_color="#000000"

                ohos:text_size="20fp"

                ohos:text_weight="400"

                ohos:top_margin="2vp"

                ohos:truncation_mode="ellipsis_at_end"/>

        </DirectionalLayout>

    </DependentLayout>

    <DependentLayout

        ohos:height="198vp"

        ohos:width="match_parent"

        ohos:align_parent_bottom="true"

        ohos:background_element="#FFFFFFFF">

        <DirectionalLayout

            ohos:height="match_content"

            ohos:width="match_parent"

            ohos:center_in_parent="true"

            ohos:end_margin="8vp"

            ohos:orientation="horizontal"

            ohos:start_margin="8vp">

            <DirectionalLayout

                ohos:height="match_parent"

                ohos:width="match_parent"

                ohos:orientation="vertical"

                ohos:weight="1">

                <Image

                    ohos:height="64vp"

                    ohos:width="64vp"

                    ohos:background_element="$graphic:red"

                    ohos:layout_alignment="horizontal_center"

                    ohos:scale_mode="zoom_center"

                    ohos:top_margin="12vp"/>

                <Text

                    ohos:height="match_content"

                    ohos:width="64vp"

                    ohos:layout_alignment="horizontal_center"

                    ohos:text="red"

                    ohos:text_alignment="horizontal_center"

                    ohos:text_color="#FF0000"

                    ohos:text_size="12fp"

                    ohos:text_weight="500"

                    ohos:top_margin="2vp"

                    ohos:truncation_mode="ellipsis_at_end"/>

                <Image

                    ohos:height="64vp"

                    ohos:width="64vp"

                    ohos:background_element="$graphic:orange"

                    ohos:layout_alignment="horizontal_center"

                    ohos:scale_mode="zoom_center"

                    ohos:top_margin="12vp"/>

                <Text

                    ohos:height="match_content"

                    ohos:width="64vp"

                    ohos:layout_alignment="horizontal_center"

                    ohos:text="orange"

                    ohos:text_alignment="horizontal_center"

                    ohos:text_color="#FFA500"

                    ohos:text_size="12fp"

                    ohos:text_weight="500"

                    ohos:top_margin="2vp"

                    ohos:truncation_mode="ellipsis_at_end"/>

            </DirectionalLayout>

        </DirectionalLayout>

    </DependentLayout>

</DependentLayout>

完整代码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/%E5%8D%A1%E7%89%87%E8%89%B2%E5%BD%A9