鸿蒙应用开发在线体验,鸿蒙应用开发-DevEco Studio 模板体验（二）

显示效果：

图片1.png (39.37 KB, 下载次数: 0)

2021-4-29 17:05 上传

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

图片2.png (42.47 KB, 下载次数: 0)

2021-4-29 17:05 上传

可以调节亮度

图片3.png (42.92 KB, 下载次数: 0)

2021-4-29 17:05 上传

hml中的代码

{{ deviceName }}

{{ errorMessage }}

{{ message }}

{{ spreadText }}

@submit-server-click="dialogSubmitServer"

@cancel-click="dialogCancel()">

{{ $t('strings.prompt') }}

{{ $t('strings.useHiLink') }}

{{ $t('strings.hiLinkUrl') }}

显示效果：

图片4.png (124.13 KB, 下载次数: 0)

2021-4-29 17:06 上传

布局中的代码

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:id="$+id:root_layout"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:orientation="vertical">

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"/>

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"

>

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

ohos:height="match_content"

ohos:width="match_parent"

ohos:alignment="center"

ohos:orientation="vertical">

ohos:id="$+id:table_layout_up"

ohos:height="match_content"

ohos:width="match_parent"

ohos:orientation="vertical">

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

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

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"/>

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

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

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

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

TV版

图片5.png (29.53 KB, 下载次数: 0)

2021-4-29 17:06 上传

显示效果：

图片6.png (32.16 KB, 下载次数: 0)

2021-4-29 17:06 上传

可进行操作 裁剪不一样的

图片7.png (31.62 KB, 下载次数: 0)

2021-4-29 17:07 上传

布局中的代码

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

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

ohos:id="$+id:appBar_leftPart"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:alignment="center"

ohos:orientation="horizontal"

ohos:weight="1">

ohos:id="$+id:appBar_backButton_touchTarget"

ohos:height="match_parent"

ohos:width="$float:size_touchTarget"

ohos:alignment="center">

ohos:id="$+id:appBar_backButton"

ohos:height="$float:size_appBar_buttons"

ohos:width="$float:size_appBar_buttons"

ohos:image_src="$graphic:ic_back"/>

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"/>

ohos:id="$+id:appBar_rightPart"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:alignment="vertical_center|right"

ohos:orientation="horizontal"

ohos:weight="1">

ohos:id="$+id:appBar_undoButton_touchTarget"

ohos:height="$float:size_touchTarget"

ohos:width="$float:size_touchTarget"

ohos:alignment="center">

ohos:id="$+id:appBar_undoButton"

ohos:height="$float:size_appBar_buttons"

ohos:width="$float:size_appBar_buttons"

ohos:image_src="$graphic:ic_undo"/>

ohos:id="$+id:appBar_redoButton_touchTarget"

ohos:height="$float:size_touchTarget"

ohos:width="$float:size_touchTarget"

ohos:alignment="center">

ohos:id="$+id:appBar_redoButton"

ohos:height="$float:size_appBar_buttons"

ohos:width="$float:size_appBar_buttons"

ohos:image_src="$graphic:ic_redo"/>

ohos:id="$+id:appBar_saveButton_touchTarget"

ohos:height="$float:size_touchTarget"

ohos:width="$float:size_touchTarget"

ohos:alignment="center">

ohos:id="$+id:appBar_saveButton"

ohos:height="$float:size_appBar_buttons"

ohos:width="$float:size_appBar_buttons"

ohos:image_src="$graphic:ic_save"/>

ohos:height="match_parent"

ohos:width="match_parent"

ohos:orientation="vertical"

ohos:weight="1">

ohos:id="$+id:edit_fraction_container"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:weight="1">

ohos:id="$+id:edit_fraction"

ohos:height="match_parent"

ohos:width="match_parent"/>

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"/>

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"/>

ohos:id="$+id:paraBar_container"

ohos:height="$float:height_paraBar"

ohos:width="match_parent"

ohos:alignment="center">

ohos:id="$+id:paraBar"

ohos:height="match_content"

ohos:width="match_parent"

ohos:fixed_mode="true"

ohos:orientation="horizontal"/>

ohos:id="$+id:toolBar_container"

ohos:height="$float:height_toolBar"

ohos:width="match_parent"

ohos:alignment="center"

ohos:bottom_margin="$float:margin_interval">

ohos:id="$+id:toolBar"

ohos:height="match_content"

ohos:width="match_parent"

ohos:fixed_mode="true"

ohos:orientation="horizontal"/>

完整代码地址：