鸿蒙系统版面（鸿蒙操作系统应用笔记211107A）

鸿蒙系统版面（鸿蒙操作系统应用笔记211107A）☀️代码查找☀️代码结构树☀️代码格式化☀️代码折叠☀️代码快速注释

开物室编辑器编码辅助功能

☀️代码高亮

☀️代码智能补齐

☀️代码错误检查

☀️代码自动跳转

☀️代码格式化

☀️代码折叠

☀️代码快速注释

☀️代码结构树

☀️代码查找

☀️查看Java接口文档

低代码开发

我称 低代码开发 为“元件界面开发”。

鸿蒙系统 元件界面 开发方式，具有丰富的UI界面编辑功能，遵循鸿蒙系统JS开发规范，通过可视化界面开发方式快速构建布局，可有效降低用户的时间成本和提升用户构建UI界面的效率。元件界面开发时，界面中包括如下5部分：

☀️一，UI Control：UI控件栏，可以将相应的组件选中并拖动到画布（Canvas）中，实现控件的添加。

☀️二，Component Tree：组件树，在低代码开发界面中，可以方便开发者直观地看到组件的层级结构、摘要信息以及错误提示。开发者可以通过选中组件树中的组件（画布中对应的组件被同步选中），实现画布内组件的快速定位；点击组件后的或图标，可以隐藏/显示相应的组件。

☀️三，Panel：功能面板，包括常用的画布缩小放大、撤销、显示/隐藏组件虚拟边框、设备切换、模式切换、可视化布局界面一键转换为hml和css文件等。

☀️四，Canvas：画布，开发者可在此区域对组件进行拖拽、拉伸等可视化操作，构建UI界面布局效果。

☀️五，Attributes & Styles：属性样式栏，选中画布中的相应组件后，在右侧属性样式栏可以对该组件的属性样式进行配置。包括：

• Properties：用于设置组件基本标识和外观显示特征的属性，如组件的ID、If等属性。
• General：用于设置Width、Height、Background、Position、Display等常规样式。
• Feature：用于设置组件的特有样式，如描述Text组件文字大小的FontSize样式等。
• Flex：用于设置Flex布局相关样式。
• Events：为组件绑定相关事件，并设置绑定事件的回调函数。
• Dimension：用于设置Padding、Border、Margin等与盒式模型相关的样式。
• Grid：用于设置Grid网格布局相关样式，该图标只有Div组件的Display样式被设置为grid时才会出现。
• Atom：用于设置原子布局相关样式。