HarmonyOS原子化服务卡片个人名片体验展示 原创

一、简要描述

卡片名称:  JLTFCardTemplate；卡片语言:  JAVA；使用模板： List Pattern；工具：deveco studio。

二、应用场景

相当于基于HarmonyOS原子化服务的个人名片，可以向别人清晰地展示自我的各项信息，我们后续会增加信息的展示方式；会进行各种分享方式的开发以及多用户可以自动生成名片的开发等，成为一个基于HarmonyOS原子化服务的名片社交应用。

三、前端初步效果如下

四、开发过程

第一步

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

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

选择basic下的list pattern模板

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

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

即可实现效果Xml (2*2)

五、部分代码展示

<Image
    ohos:height="24vp"
    ohos:width="24vp"
    ohos:image_src="$media:form_list_pattern_widget_default_app_icon"
    ohos:scale_mode="zoom_center"
    ohos:start_margin="12vp"
    ohos:top_margin="12vp"/>

<Text
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:end_margin="12vp"
    ohos:start_margin="44vp"
    ohos:text="$string:widget_app_name"
    ohos:text_color="#E5000000"
    ohos:text_size="16fp"
    ohos:text_weight="500"
    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">

    <DirectionalLayout
        ohos:height="48vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:layout_alignment="vertical_center"
            ohos:orientation="vertical">

            <Text
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:text="$string:widget_user"
                ohos:text_color="#E5000000"
                ohos:text_size="14fp"
                ohos:text_weight="500"
                ohos:truncation_mode="ellipsis_at_end"/>

            <Text
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:text="$string:widget_user_name"
                ohos:text_color="#99000000"
                ohos:text_size="10fp"
                ohos:text_weight="400"
                ohos:top_margin="2vp"
                ohos:truncation_mode="ellipsis_at_end"/>
        </DirectionalLayout>
    </DirectionalLayout>

六、完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/%E5%90%8D%E7%89%87