HarmonyOS原子化卡片云端通讯录的实践 原创

一、需求创意
网络的发展，所有的事物都在不断变化。很多看似恒定的事物，都在不断被变革，比如微信取代了短信。
在我们手机中，几波大的变化中，通讯录一直在保持原样，我们尝试通过HarmonyOS原子化服务卡片的方式，来尝试重塑新一代的通讯录工具方式。
我们希望通过原子化卡片服务的方式将传统的手机本地通讯录转化为云端形式，让其更加便捷、友好、可以通过多种方式来进行管理和具备分享、多种唤起方等更多的可能性。

二、技术相关
项目名称: List_card
项目语言: JAVA
使用模板：List
工具：deveco studio

三、效果如下
图片

四、开发过程
新建一个java的应用项目
然后构建完成项目后在jltf_template下new->module

选择的空的 java模板

选择项目的empty，新建Service Widget

选择image and information模板，点击下一步

选择卡片类型，我选择的是24和44的模板，点击finish

登录你的账号然后启动模拟器即可实现效果

五、项目结构介绍

六、关键代码（2*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:background_element=“#FFFFFFFF”
ohos:remote=“true”>

<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="张某"
                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="17800000000"
                ohos:text_color="#99000000"
                ohos:text_size="10fp"
                ohos:text_weight="400"
                ohos:top_margin="2vp"
                ohos:truncation_mode="ellipsis_at_end"/>
        </DirectionalLayout>
    </DirectionalLayout>

    <Image
        ohos:height="1vp"
        ohos:width="match_parent"
        ohos:image_src="$graphic:form_list_pattern_widget_default_divide_line"
        ohos:scale_mode="zoom_center"/>

    <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="赵某"
                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="13000000000"
                ohos:text_color="#99000000"
                ohos:text_size="10fp"
                ohos:text_weight="400"
                ohos:top_margin="2vp"
                ohos:truncation_mode="ellipsis_at_end"/>
        </DirectionalLayout>
    </DirectionalLayout>
</DirectionalLayout>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.

</DependentLayout>

六、完整代码地址：
https://gitee.com/jltfcloudcn/jump_to/tree/master/list_cart
本文已经投稿51CTO征文活动