可点击上面视频链接，查看残缺步骤：
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/...
原作者：蛟龙腾飞