电子发烧友

征文#鸿蒙卡片-物联网DTU污水液位计卡片查看详情：https://bbs.elecfans.com/jishu_2106011_1_1.html5、HarmonyOSAPP开发-JS时钟练习尝试查看详情：https://bbs.elecfans.com/jishu_2104144_1_1.html

2021-06-29 11:30

一、技术相关项目名称:jltf-SettingsAbilitty项目语言:js体验模板： SettingsAbilitty工具：deveco studio二、效果如下：三、开发体验过程第一步 建立项目新建一个js的应用项目，直接点击next进行下一步第二步修改部分代码主要部分：Hml部分 {{ title }} {{ list_group.value }} {{ list_group.value }} {{ tv_img_text }} Css部分.all { flex-direction: column; background-color: #f1f3f5;}.list_container { flex-direction: column;}.container_tv { display: none;}.content { justify-content: center;}@MEDIA screen and (device-type: tv) { .bar_container {display: none; } .title_container {width: 100%;text-align: left;margin: 24px 45px;height: 100px; } .title {font-weight: bold;font-size: 45px; } /** left */ .list_container {display: none; } .container_tv {display: flex;flex-direction: column;background-image: url("/common/Wallpaper.png"); } .list_tv_container {width: 100%; } .list_tv {margin-left: 24px; } .wearable_item {display: none; } .content_tv {height: 48px;background-color: #33f1f3f5;border-radius: 12px;margin: 6px 0;padding-left: 12px; } .content_tv_text {font-size: 18px;color: #E5FFFFFF; } /** right */ .content_img {flex-direction: column;justify-content: flex-start;align-items: center; } .img_box {margin-top: 76px;background-color: #808080;width: 180px;height: 180px; } .img_img {object-fit: contain;width: 180px;height: 180px; } .text_box {width: 100%;margin-top: 20px;justify-content: center; } .img_text {width: 280px;font-size: 18px;color: #99FFFFFF;text-align: center; }}@media screen and (device-type: wearable) { .bar_container {display: none; } .title_container {justify-content: center;height: 20%; } .title {font-size: 19px;font-weight: bold; } .content_img {display: none; } .list_container {display: none; } .container_tv {display: flex;flex-direction: column;background-color: black; } .list_tv_container {width: 100%;justify-content: center; } .list_tv {width: 90%; } .sub_item {justify-content: center;align-items: center; } .content_tv {justify-content: center; } .content_tv_text {display: none; } .wearable_item {flex-direction: column;align-items: center;justify-content: center; } .wearable_item_img {height: 5px; } .wearable_item_text {height: 48px;padding-bottom: 6px;justify-content: center; } .wearable_item_text_content {font-size: 19px;text-align: center; }}Js部分：const TAG = '[fragment_main]';export default { data: {title: "",array: [[1, 0], [1, 1], [1, 2], [2, 2], [2, 2], [2, 3], [3, 3], [3, 5]],list: [],tv_img_add: "common/profile.png",tv_img_text: "",file_data: [{ "image_add": "common/profile.png",},{ "image_add": "common/ic.png",},{ "image_add": "common/more.png",},{ "image_add": "common/add64.png",},{ "image_add": "common/add64.png",},{ "image_add": "common/add64.png",},{ "image_add": "common/add64.png",},{ "image_add": "common/add64.png",}] }, onInit() {this.title = this.$t('strings.title');this.list = [];this.tv_img_text = this.$t('strings.img_text_0');var str = 'strings.Setting';for (var i = 0; i < this.array.length; i++) {var resource = str + i;var dataItem = { value: this.$t(resource)};this.list.push(dataItem);} }, changeList($idx) {console.log(TAG + $idx);this.tv_img_add = this.file_data[$idx].image_add;this.tv_img_text = this.$t('strings.img_text_' + $idx);this.$element($idx).focus({focus: true}); }}第三步登录你的账号然后启动模拟器即可实现效果完整代码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/SettingsAbility附件：

2021-08-09 09:40

`显示效果： 上下拖动改变选中的值 布局中的代码：&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;DirectionalLayout xmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot; ohos:height=&quot;match_parent&quot; ohos:width=&quot;match_parent&quot; ohos:orientation=&quot;vertical&quot;&gt; &lt;TimePickerohos:id=&quot;$+id:time_picker&quot;ohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:normal_text_color=&quot;#007DFF&quot;ohos:normal_text_size=&quot;25fp&quot;ohos:operated_text_color=&quot;#FF9912&quot;ohos:shader_color=&quot;#00BFFF&quot;/&gt;&lt;/DirectionalLayout&gt;Slice文件中package com.example.jltftiyan5.slice;import com.example.jltftiyan5.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.TimePicker;public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);TimePicker timePicker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);int hour = timePicker.getHour();int minute = timePicker.getMinute();int second = timePicker.getSecond();timePicker.setHour(19);timePicker.setMinute(18);timePicker.setSecond(12);timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {@Overridepublic void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {}}); } @Override public void onActive() {super.onActive(); } @Override public void onForeground(Intent intent) {super.onForeground(intent); }}完整代码下载地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_TimePicker_component`

2021-03-20 12:26

`Switch是切换单个设置开/关两种状态的组件。我们体验效果如下。显示效果： 滑动按钮 代码如下：布局中&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;DirectionalLayout xmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot; ohos:height=&quot;match_parent&quot; ohos:width=&quot;match_parent&quot; ohos:orientation=&quot;vertical&quot;&gt; &lt;Switchohos:id=&quot;$+id:btn_switch&quot;ohos:height=&quot;30vp&quot;ohos:width=&quot;60vp&quot;ohos:top_margin=&quot;40px&quot;ohos:left_margin=&quot;400px&quot;ohos:text_state_off=&quot;OFF&quot;ohos:text_state_on=&quot;ON&quot;/&gt;&lt;/DirectionalLayout&gt; 完整源码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_switch_component`

2021-03-24 10:12

`RoundProgressBar用于显示环形进度 代码如下&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;DirectionalLayoutxmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot;ohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;ohos:background_element=&quot;#FF000000&quot;&gt; &lt;DirectionalLayoutohos:height=&quot;0px&quot;ohos:width=&quot;match_parent&quot;ohos:weight=&quot;1&quot;&gt;&lt;RoundProgressBarohos:id=&quot;$+id:round_progress_bar&quot;ohos:height=&quot;200vp&quot;ohos:width=&quot;200vp&quot;ohos:progress_width=&quot;10vp&quot;ohos:progress=&quot;20&quot;ohos:progress_color=&quot;#47CC47&quot;ohos:layout_alignment=&quot;center&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;0px&quot;ohos:width=&quot;match_parent&quot;ohos:weight=&quot;1&quot;&gt;&lt;RoundProgressBarohos:height=&quot;200vp&quot;ohos:width=&quot;200vp&quot;ohos:progress_width=&quot;10vp&quot;ohos:progress=&quot;20&quot;ohos:progress_color=&quot;#47CC47&quot;ohos:start_angle=&quot;45&quot;ohos:max_angle=&quot;270&quot;ohos:progress_hint_text=&quot;加载中。。。&quot;ohos:progress_hint_text_color=&quot;#007DFF&quot;ohos:layout_alignment=&quot;center&quot; /&gt; &lt;/DirectionalLayout&gt;&lt;/DirectionalLayout&gt;完整代码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_RoundProgressBar_component`

2021-03-29 14:29

`ProgressBar用于显示内容或操作的进度。下面将进行对该组件简单的操作，通过添加不同的属性展示出不同的样式效果。如下：效果显示： 布局中的代码&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;DirectionalLayout xmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot; ohos:height=&quot;match_parent&quot; ohos:width=&quot;match_parent&quot; ohos:orientation=&quot;vertical&quot; ohos:background_element=&quot;#FF5A5858&quot;&gt;&lt;Text ohos:height=&quot;match_content&quot; ohos:width=&quot;match_content&quot; ohos:text=&quot;创建ProgressBar效果&quot; ohos:text_size=&quot;22fp&quot; ohos:text_color=&quot;red&quot;/&gt; &lt;ProgressBarohos:progress_width=&quot;10vp&quot;ohos:height=&quot;60vp&quot;ohos:width=&quot;800px&quot;ohos:max=&quot;100&quot;ohos:min=&quot;0&quot;ohos:progress=&quot;60&quot;/&gt; &lt;Textohos:height=&quot;match_content&quot;ohos:width=&quot;match_content&quot;ohos:text=&quot;垂直ProgressBar效果。&quot;ohos:text_size=&quot;22fp&quot;ohos:text_color=&quot;red&quot;/&gt; &lt;Textohos:height=&quot;match_content&quot;ohos:width=&quot;match_content&quot;ohos:text=&quot;设置ProgressBar颜色效果。&quot;ohos:text_size=&quot;22fp&quot;ohos:text_color=&quot;red&quot;/&gt; &lt;ProgressBarohos:orientation=&quot;vertical&quot;ohos:top_margin=&quot;20vp&quot;ohos:height=&quot;150vp&quot;ohos:width=&quot;60vp&quot;ohos:progress_width=&quot;10vp&quot;ohos:max=&quot;100&quot;ohos:min=&quot;0&quot;ohos:progress=&quot;60&quot;ohos:background_instruct_element=&quot;#FFFFFF&quot;ohos:progress_element=&quot;#FF9900&quot;/&gt; &lt;Textohos:height=&quot;match_content&quot;ohos:width=&quot;match_content&quot;ohos:text=&quot;添加分割线效果。&quot;ohos:text_size=&quot;22fp&quot;ohos:text_color=&quot;red&quot;/&gt; &lt;ProgressBarohos:progress_width=&quot;10vp&quot;ohos:height=&quot;60vp&quot;ohos:width=&quot;800px&quot;ohos:max=&quot;100&quot;ohos:min=&quot;0&quot;ohos:progress=&quot;40&quot;ohos:divider_lines_enabled=&quot;true&quot;ohos:divider_lines_number=&quot;5&quot;/&gt; &lt;Textohos:height=&quot;match_content&quot;ohos:width=&quot;match_content&quot;ohos:text=&quot;设置提示文字效果。&quot;ohos:text_size=&quot;22fp&quot;ohos:text_color=&quot;red&quot;/&gt; &lt;ProgressBarohos:progress_width=&quot;10vp&quot;ohos:height=&quot;60vp&quot;ohos:width=&quot;800px&quot;ohos:max=&quot;100&quot;ohos:min=&quot;0&quot;ohos:progress=&quot;40&quot;ohos:divider_lines_enabled=&quot;true&quot;ohos:divider_lines_number=&quot;5&quot;ohos:progress_hint_text=&quot;40%&quot;ohos:progress_hint_text_color=&quot;#FFCC99&quot; /&gt;&lt;/DirectionalLayout&gt;完整代码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_progressBar_component`

2021-03-29 14:31

`这里敲了一个简单的案例，我们可以通过使用DatePicker来实现一个日期选择器的创建，在xml文件中使用DatePicker标签就可以创建出一个日期选择器来。 我们可以通过DatePicker默认选择当前时间，也可以设置当前的时间，我们还可以获取选择器里面的时间进行展示等操作。 可以设置最小日期值和最大日期值。 这里可以通过year_fixed，month_fixed，day_fixed对年月日进行一个值的固定。 也可以通过一些相关属性进行字体，背景等美化，如下图所示： 完成代码下载地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_DatePicker_component`

2021-03-20 12:40

`ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。这里我做了一个小案例，在ScrollView里面套ScrollView，当然我们也可以使用DirectionalLayout中的horizontal或者vertical属性控制图片滑动的方向这里使用ScrollView可以很方便的展示跟多的内容。 &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;DirectionalLayoutxmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot;ohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt; &lt;DirectionalLayoutohos:height=&quot;1800px&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;ScrollViewohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;Imageohos:height=&quot;600px&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:tupian1&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;Textohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;颜色展示&quot;ohos:text_size=&quot;18fp&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;700px&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;ScrollViewohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;Textohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;红色&quot;ohos:text_size=&quot;18fp&quot;/&gt;&lt;Imageohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:red&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;Textohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;蓝色&quot;ohos:text_size=&quot;18fp&quot;/&gt;&lt;Imageohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:blue&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;Textohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;黄色&quot;ohos:text_size=&quot;18fp&quot;/&gt;&lt;Imageohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:yellow&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;Textohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;粉色&quot;ohos:text_size=&quot;18fp&quot;/&gt;&lt;Imageohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:pink&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;Textohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;绿色&quot;ohos:text_size=&quot;18fp&quot;/&gt;&lt;Imageohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:grenn&quot;/&gt; &lt;/DirectionalLayout&gt;&lt;/DirectionalLayout&gt;&lt;/ScrollView&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;Textohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;图片展示&quot;ohos:text_size=&quot;18fp&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;500px&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;ScrollViewohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt; &lt;Imageohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:fengjing&quot;/&gt; &lt;Imageohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:mao&quot;/&gt; &lt;Imageohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:gou&quot;/&gt;&lt;/DirectionalLayout&gt;&lt;/ScrollView&gt; &lt;/DirectionalLayout&gt;&lt;/DirectionalLayout&gt;&lt;/ScrollView&gt; &lt;/DirectionalLayout&gt;&lt;/DirectionalLayout&gt; 代码如下： &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;DirectionalLayoutxmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot;ohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt; &lt;DirectionalLayoutohos:height=&quot;1800px&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;ScrollViewohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;Imageohos:height=&quot;600px&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:tupian1&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;Textohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;颜色展示&quot;ohos:text_size=&quot;18fp&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;700px&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;ScrollViewohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;Textohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;红色&quot;ohos:text_size=&quot;18fp&quot;/&gt;&lt;Imageohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:red&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;Textohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;蓝色&quot;ohos:text_size=&quot;18fp&quot;/&gt;&lt;Imageohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:blue&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;Textohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;黄色&quot;ohos:text_size=&quot;18fp&quot;/&gt;&lt;Imageohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:yellow&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;Textohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;粉色&quot;ohos:text_size=&quot;18fp&quot;/&gt;&lt;Imageohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:pink&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;Textohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;绿色&quot;ohos:text_size=&quot;18fp&quot;/&gt;&lt;Imageohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:grenn&quot;/&gt; &lt;/DirectionalLayout&gt;&lt;/DirectionalLayout&gt;&lt;/ScrollView&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;80px&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;Textohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:text=&quot;图片展示&quot;ohos:text_size=&quot;18fp&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;500px&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt;&lt;ScrollViewohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;&gt;&lt;DirectionalLayoutohos:height=&quot;match_content&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;&gt; &lt;Imageohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:fengjing&quot;/&gt; &lt;Imageohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:mao&quot;/&gt; &lt;Imageohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:image_src=&quot;$media:gou&quot;/&gt;&lt;/DirectionalLayout&gt;&lt;/ScrollView&gt; &lt;/DirectionalLayout&gt;&lt;/DirectionalLayout&gt;&lt;/ScrollView&gt; &lt;/DirectionalLayout&gt;&lt;/DirectionalLayout&gt;完整代码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_ScrollView_component`

2021-03-27 11:44

一、基本情况具备JS与JAVA的入门级知识，初次接触HarmonyOS，学习时间一周以内。二、学习教程https://developer.huawei.com/con

2021-06-16 15:45

`TextField提供了一种文本输入框。下面会通过一个案例给大家展示一下这个组件。显示效果： 代码如下：Slice文件中package com.example.jltftiyan3.slice;import com.example.jltftiyan3.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.Button;import ohos.agp.components.Component;import ohos.agp.components.Text;import ohos.agp.components.TextField;import ohos.agp.components.element.ShapeElement;public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main); } @Override public void onActive() {super.onActive(); } @Override public void onForeground(Intent intent) {super.onForeground(intent); }}布局中的代码：&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;DirectionalLayout xmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot; ohos:width=&quot;match_parent&quot; ohos:height=&quot;match_parent&quot; ohos:background_element=&quot;#FFC9C3C3&quot; ohos:orientation=&quot;vertical&quot;&gt; &lt;StackLayoutohos:top_margin=&quot;60vp&quot;ohos:width=&quot;match_parent&quot;ohos:height=&quot;match_content&quot;ohos:layout_alignment=&quot;center&quot;&gt;&lt;TextFieldohos:id=&quot;$+id:name_textField&quot;ohos:width=&quot;1000px&quot;ohos:height=&quot;match_content&quot;ohos:multiple_lines=&quot;false&quot;ohos:left_padding=&quot;24vp&quot;ohos:right_padding=&quot;24vp&quot;ohos:top_padding=&quot;8vp&quot;ohos:bottom_padding=&quot;8vp&quot;ohos:min_height=&quot;44vp&quot;ohos:text_size=&quot;18fp&quot;ohos:layout_alignment=&quot;center&quot;ohos:text_alignment=&quot;center_vertical&quot;ohos:background_element=&quot;$graphic:jltfbackground_text_field&quot;ohos:hint=&quot;请输入账号&quot; /&gt; &lt;/StackLayout&gt; &lt;TextFieldohos:top_margin=&quot;40vp&quot;ohos:id=&quot;$+id:password_text_field&quot;ohos:width=&quot;1000px&quot;ohos:height=&quot;match_content&quot;ohos:multiple_lines=&quot;false&quot;ohos:left_padding=&quot;24vp&quot;ohos:right_padding=&quot;24vp&quot;ohos:top_padding=&quot;8vp&quot;ohos:bottom_padding=&quot;8vp&quot;ohos:min_height=&quot;44vp&quot;ohos:text_size=&quot;18fp&quot;ohos:layout_alignment=&quot;center&quot;ohos:text_alignment=&quot;center_vertical&quot;ohos:background_element=&quot;$graphic:jltfbackground_text_field&quot;ohos:hint=&quot;请输入密码&quot; /&gt; &lt;Buttonohos:top_margin=&quot;40vp&quot;ohos:id=&quot;$+id:ensure_button&quot;ohos:width=&quot;120vp&quot;ohos:height=&quot;35vp&quot;ohos:background_element=&quot;$graphic:jltfbackground_btn&quot;ohos:text=&quot;Log in&quot;ohos:text_size=&quot;20fp&quot;ohos:layout_alignment=&quot;horizontal_center&quot;/&gt;&lt;/DirectionalLayout&gt; 完整代码包地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_TextField_component`

2021-03-15 18:54