鸿蒙应用开发-DevEco Studio 模板体验（二）原创

鸿蒙时代

发布于 2021-4-29 15:36

1.1w浏览

0收藏

显示效果：

鸿蒙应用开发-DevEco Studio 模板体验（二）-鸿蒙开发者社区

点击已关闭右边的按钮可以开启

鸿蒙应用开发-DevEco Studio 模板体验（二）-鸿蒙开发者社区

可以调节亮度

鸿蒙应用开发-DevEco Studio 模板体验（二）-鸿蒙开发者社区

hml中的代码

<element name='control' src='../../../../../../node_modules/ailife-view/control/control.hml'></element>
<element name='dialogbox' src='../../../../../../node_modules/ailife-view/dialog/dialogbox/dialogbox.hml'></element>
<element name="customdisplay" src="../../../../../../node_modules/ailife-view/customdisplay/customdisplay.hml">
</element>

<div class="container" style="background-color : {{ backgroundColor }};">
    <div class="title">
        <image class="title-back-image" src="/common/ic_back.png" onclick="backClick()"/>
        <text class="title-text">{{ deviceName }}</text>
        <image class="title-more-image" src="/common/ic_more.png" onclick="moreClick()"/>
    </div>
    <div class="error-location">
        <div if="{{ showErrorMessage }}" class="error-container">
            <image class="error-image" src="/common/ic_error.png"/>
            <text class="error-text">{{ errorMessage }}</text>
        </div>
    </div>
    <div class="device-info">
        <image class="device-image" src="{{ imageSrc }}"/>
        <div if="{{ ! showMessage }}" class="center-container">
            <image class="device-logo" src="{{ logoSrc }}"></image>
        </div>
        <div if="{{ showMessage }}" class="center-container">
            <image class="device-logo-message" src="{{ logoSrc }}"></image>
            <div class="message">
                <progress type="circular" class="progress"></progress>
                <text class="message-text">{{ message }}</text>
            </div>
        </div>
    </div>
    <control control-data="{{ controlData }}"></control>
    <div if="{{ showSpread }}" class="spread" onclick="spreadClick()">
        <text class="spread-text">{{ spreadText }}</text>
        <image class="spread-image" src="{{ spreadIcon }}"/>
    </div>
    <customdisplay custom-display-item-list="{{ customDisplayItemList }}" @icon-click="customDisplayClick()">
    </customdisplay>
    <dialog id="dialog" class="dialog" oncancel="dialogCancel()">
        <dialogbox dialog-box-data="{{ dialog }}" @submit-click="dialogSubmit()"
                   @submit-server-click="dialogSubmitServer"
                   @cancel-click="dialogCancel()">
        </dialogbox>
    </dialog>
    <dialog id="hiLinkDialog" class="hi-link-dialog">
        <div class="dialog-container">
            <text class="dialog-title">{{ $t('strings.prompt') }}</text>
            <text class="font-16">{{ $t('strings.useHiLink') }}</text>
            <text class="font-16 url-text" onclick="urlClick()">{{ $t('strings.hiLinkUrl') }}</text>
            <button type="text" value="{{ $t('strings.cancel') }}" class="cancel-button" onclick="cancelClick()">
            </button>
        </div>
    </dialog>
</div>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.

显示效果：

鸿蒙应用开发-DevEco Studio 模板体验（二）-鸿蒙开发者社区

布局中的代码

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:root_layout"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <include
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:id="$+id:app_bar"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:layout="$layout:app_bar_layout"/>
    <DependentLayout
        ohos:id="$+id:app_content"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:bottom_margin="$float:default_layout_margin"
        ohos:end_margin="$float:default_layout_margin"
        ohos:orientation="vertical"
        ohos:start_margin="$float:default_layout_margin"
        >
        <ScrollView
            ohos:id="$+id:grid_layout"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:align_parent_top="true"
            ohos:background_element="$graphic:background_table_layout_up"
            ohos:bottom_margin="$float:grid_layout_bottom_margin">
            <DirectionalLayout
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:alignment="center"
                ohos:orientation="vertical">
                <DirectionalLayout
                    ohos:id="$+id:table_layout_up"
                    ohos:height="match_content"
                    ohos:width="match_parent"
                    ohos:orientation="vertical">
                    <com.example.jltfmoban7.component.GridView
                        ohos:id="$+id:grid_view_up"
                        ohos:height="match_content"
                        ohos:width="match_parent"
                        ohos:bottom_margin="4vp"
                        ohos:column_count="$integer:column_count"
                        ohos:end_margin="$float:default_layout_margin"
                        ohos:start_margin="$float:default_layout_margin"
                        ohos:top_margin="24vp">
                    </com.example.jltfmoban7.component.GridView>
                </DirectionalLayout>
                <DirectionalLayout
                    ohos:id="$+id:table_layout_down"
                    ohos:height="match_content"
                    ohos:width="match_parent"
                    ohos:background_element="$graphic:background_table_layout_down"
                    ohos:orientation="vertical">
                    <Text
                        ohos:id="$+id:table_layout_down_desc"
                        ohos:height="match_content"
                        ohos:width="match_parent"
                        ohos:bottom_margin="$float:grid_layout_desc_bottom_margin"
                        ohos:end_margin="$float:default_layout_margin"
                        ohos:max_text_lines="2"
                        ohos:multiple_lines="true"
                        ohos:start_margin="$float:default_layout_margin"
                        ohos:text="$string:grid_layout_desc_text"
                        ohos:text_size="$float:grid_layout_desc_size"
                        ohos:top_margin="$float:grid_layout_desc_top_margin"/>
                    <com.example.jltfmoban7.component.GridView
                        ohos:id="$+id:grid_view_down"
                        ohos:height="match_content"
                        ohos:width="match_content"
                        ohos:column_count="$integer:column_count"
                        ohos:end_margin="$float:default_layout_margin"
                        ohos:start_margin="$float:default_layout_margin">
                    </com.example.jltfmoban7.component.GridView>
                </DirectionalLayout>
            </DirectionalLayout>
        </ScrollView>

        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:align_parent_bottom="true"
            ohos:background_element="$graphic:background_bottom_layout"
            ohos:layout_direction="locale"
            ohos:orientation="horizontal">
            <Button
                ohos:id="$+id:bottom_left_button"
                ohos:height="$float:bottom_button_height"
                ohos:width="$float:bottom_button_width"
                ohos:background_element="$graphic:background_bottom_button"
                ohos:bottom_margin="$float:bottom_button_bottom_margin"
                ohos:start_margin="$float:bottom_button_left_right_margin"
                ohos:text="$string:bottom_button_text"
                ohos:text_color="$color:bottom_button_text_color"
                ohos:text_size="$float:grid_layout_desc_size"
                ohos:top_margin="$float:bottom_button_top_margin">
            </Button>
            <Button
                ohos:id="$+id:bottom_right_button"
                ohos:height="$float:bottom_button_height"
                ohos:width="$float:bottom_button_width"
                ohos:background_element="$graphic:background_bottom_button"
                ohos:bottom_margin="$float:bottom_button_bottom_margin"
                ohos:end_margin="$float:bottom_button_left_right_margin"
                ohos:start_margin="$float:bottom_left_button_margin"
                ohos:text="$string:bottom_button_text"
                ohos:text_color="$color:bottom_button_text_color"
                ohos:text_size="$float:grid_layout_desc_size"
                ohos:top_margin="$float:bottom_button_top_margin">
            </Button>
        </DirectionalLayout>
    </DependentLayout>

</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.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.

TV版

鸿蒙应用开发-DevEco Studio 模板体验（二）-鸿蒙开发者社区

显示效果：

鸿蒙应用开发-DevEco Studio 模板体验（二）-鸿蒙开发者社区

可进行操作裁剪不一样的

鸿蒙应用开发-DevEco Studio 模板体验（二）-鸿蒙开发者社区

布局中的代码

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:image_editor_main"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="$color:background"
    ohos:orientation="vertical">
    <DirectionalLayout
        ohos:id="$+id:appBar"
        ohos:height="$float:height_appBar"
        ohos:width="match_parent"
        ohos:end_margin="$float:maxPadding"
        ohos:orientation="horizontal"
        ohos:start_margin="$float:maxPadding">
        <DirectionalLayout
            ohos:id="$+id:appBar_leftPart"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:alignment="center"
            ohos:orientation="horizontal"
            ohos:weight="1">
            <DirectionalLayout
                ohos:id="$+id:appBar_backButton_touchTarget"
                ohos:height="match_parent"
                ohos:width="$float:size_touchTarget"
                ohos:alignment="center">
                <Image
                    ohos:id="$+id:appBar_backButton"
                    ohos:height="$float:size_appBar_buttons"
                    ohos:width="$float:size_appBar_buttons"
                    ohos:image_src="$graphic:ic_back"/>
            </DirectionalLayout>

            <Text
                ohos:id="$+id:appBar_userName"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:start_margin="$float:leftMargin_appBar_text"
                ohos:text="$string:title_appBar"
                ohos:text_color="$color:appBar_Text"
                ohos:text_size="$float:textSize_appBar"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:appBar_rightPart"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:alignment="vertical_center|right"
            ohos:orientation="horizontal"
            ohos:weight="1">
            <DirectionalLayout
                ohos:id="$+id:appBar_undoButton_touchTarget"
                ohos:height="$float:size_touchTarget"
                ohos:width="$float:size_touchTarget"
                ohos:alignment="center">
                <Image
                    ohos:id="$+id:appBar_undoButton"
                    ohos:height="$float:size_appBar_buttons"
                    ohos:width="$float:size_appBar_buttons"
                    ohos:image_src="$graphic:ic_undo"/>
            </DirectionalLayout>
            <DirectionalLayout
                ohos:id="$+id:appBar_redoButton_touchTarget"
                ohos:height="$float:size_touchTarget"
                ohos:width="$float:size_touchTarget"
                ohos:alignment="center">
                <Image
                    ohos:id="$+id:appBar_redoButton"
                    ohos:height="$float:size_appBar_buttons"
                    ohos:width="$float:size_appBar_buttons"
                    ohos:image_src="$graphic:ic_redo"/>
            </DirectionalLayout>
            <DirectionalLayout
                ohos:id="$+id:appBar_saveButton_touchTarget"
                ohos:height="$float:size_touchTarget"
                ohos:width="$float:size_touchTarget"
                ohos:alignment="center">
                <Image
                    ohos:id="$+id:appBar_saveButton"
                    ohos:height="$float:size_appBar_buttons"
                    ohos:width="$float:size_appBar_buttons"
                    ohos:image_src="$graphic:ic_save"/>
            </DirectionalLayout>
        </DirectionalLayout>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:weight="1">
        <DependentLayout
            ohos:id="$+id:edit_fraction_container"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:weight="1">
            <com.example.jltfmoban8.view.ImageEditView
                ohos:id="$+id:edit_fraction"
                ohos:height="match_parent"
                ohos:width="match_parent"/>
            <com.example.jltfmoban8.view.ShadowTextView
                ohos:id="$+id:adjust_toast"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:text_alignment="center"
                ohos:text_color="$color:adjust_text_normal"
                ohos:text_size="$float:size_adjust_tips"/>
        </DependentLayout>
        <DirectionalLayout
            ohos:id="$+id:slideBar_container"
            ohos:height="$float:height_slideBar"
            ohos:width="match_parent"
            ohos:alignment="center"
            ohos:left_padding="$float:padding_slideBar"
            ohos:right_padding="$float:padding_slideBar"/>
        <DirectionalLayout
            ohos:id="$+id:paraBar_container"
            ohos:height="$float:height_paraBar"
            ohos:width="match_parent"
            ohos:alignment="center">
            <TabList
                ohos:id="$+id:paraBar"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:fixed_mode="true"
                ohos:orientation="horizontal"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:id="$+id:toolBar_container"
            ohos:height="$float:height_toolBar"
            ohos:width="match_parent"
            ohos:alignment="center"
            ohos:bottom_margin="$float:margin_interval">
            <TabList
                ohos:id="$+id:toolBar"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:fixed_mode="true"
                ohos:orientation="horizontal"/>
        </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.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.