鸿蒙应用开发-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>

显示效果：

布局中的代码

<?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>

TV版

显示效果：

可进行操作 裁剪不一样的

布局中的代码

<?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>

完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/mbty3