HarmonyOS原子化服务卡片图片颜色体验展示 原创

发布于 2021-6-21 16:28
浏览
1收藏

卡片名称:  JLTFCardTemplateImage;卡片语言:  JAVA;体验模板: 工具:deveco studio。

 

一、效果与说明如下

  

HarmonyOS原子化服务卡片图片颜色体验展示-开源基础软件社区

 

二、具体开发体验过程

 

第一步

新建一个java的应用项目(不必选择show in service center)

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

  HarmonyOS原子化服务卡片图片颜色体验展示-开源基础软件社区

选择basic下的gird pattern模板

  

HarmonyOS原子化服务卡片图片颜色体验展示-开源基础软件社区

然后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>

 

HarmonyOS原子化服务卡片图片颜色体验展示-开源基础软件社区

完整代码地址:

https://gitee.com/jltfcloudcn/jump_to/tree/master/%E5%8D%A1%E7%89%87%E8%89%B2%E5%BD%A9

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
HarmonyOS原子化服务卡片图片颜色体验展示.rar 1.96M 17次下载
5
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐