共计 10084 个字符，预计需要花费 26 分钟才能阅读完成。
可点击上面视频链接，查看残缺步骤：
DevEco Studio 模板体验 2.1
DevEco Studio 模板体验 2.2
DevEco Studio 模板体验 2.3
显示成果：
点击已敞开左边的按钮能够开启
能够调节亮度
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…
原文链接：https://developer.huawei.com/…
原作者：蛟龙腾飞
正文完
