窗体设计

窗体设计是 ENERGY Designer 的核心功能，提供可视化画布用于拖拽放置 UI 组件，支持多窗体并行设计。

设计画布

设计画布位于设计器中央区域，是放置和编辑 UI 组件的主要工作区。

画布特性

• ❌ 网格点 - 画布上显示网格点，辅助组件对齐
• 实时预览 - 组件放置后立即显示实际效果
• 多标签页 - 支持同时打开多个窗体设计标签页

画布提示

当没有打开任何项目或窗体时，画布中央会显示快捷操作提示：

• 新建项目 (Ctrl+P)
• 打开项目 (Ctrl+O)
• 新建窗体 (Ctrl+N)
• 应用配置 (Ctrl+F11)
• 运行 (F9)

放置组件

操作步骤

1. 在左侧 组件库 面板中选择要使用的组件（单击选中，组件图标高亮）
2. 将鼠标移到设计画布上，鼠标变为放置状态
3. 在目标位置 单击 鼠标左键，组件即被放置
4. 组件自动获得唯一名称（如 Button1、Label2）

放置规则

• 只有接受子控件的容器组件（如 TPanel、TGroupBox、窗体本身）才能作为目标容器
• 非可视组件（如 TTimer、TMainMenu）放置后显示默认图标
• 放置后自动选中新组件，右侧对象检查器同步显示其属性

选择工具

组件库中每个分类下都有一个 选择指针 工具。选中选择指针后，在画布上点击组件不会放置新组件，而是选中已有组件进行编辑。这是默认的工作状态。

选择组件

鼠标选择

在设计画布上 单击 组件即可选中。选中后：

• 组件周围显示 拖拽控制点（8 个方向的手柄）
• 右侧对象检查器显示该组件的属性和事件
• 项目管理器中对应的树节点高亮
• 状态栏显示组件名称和位置信息

点击穿透

当点击容器组件内部的子组件时，会自动选中最上层的子组件，而不是容器本身。

移动组件

选中组件后，按住鼠标左键 拖拽 可移动组件位置。

拖拽行为

• 拖拽时实时显示当前位置坐标（X, Y）和尺寸（W, H）
• 松开鼠标后自动更新属性列表和 UI 布局文件
• 窗体（Form）本身不可移动

位置提示

拖拽过程中，跟随鼠标会显示一个提示框，实时显示：

X: 100 Y: 50
W: 120 H: 30

调整组件大小

选中组件后，通过 拖拽控制点 可调整组件大小。

控制点说明

控制点位置	鼠标样式	操作说明
左中	← →	调整左边距，改变宽度
上中	↑ ↓	调整上边距，改变高度
右中	← →	调整右边距，改变宽度
下中	↑ ↓	调整下边距，改变高度
左上	↖ ↘	同时调整左边距和上边距
右上	↗ ↙	同时调整右边距和上边距
左下	↙ ↗	同时调整左边距和下边距
右下	↘ ↖	同时调整右边距和下边距

调整行为

• 拖拽控制点时实时显示位置和尺寸提示
• 松开鼠标后自动更新属性列表和 UI 布局文件
• 支持从任意方向调整大小

组件 Z 序管理

组件的 Z 序（前后层级）可通过项目管理器中的 右键菜单 进行调整：

• 置顶 - 将组件移到最前面
• 置底 - 将组件移到最后面
• 上移一层 - 向前移动一层
• 下移一层 - 向后移动一层

调整 Z 序后，组件树中的节点顺序同步更新。

删除组件

选中组件后，通过以下方式删除：

• 在项目管理器中右键组件节点，选择删除
• 使用键盘快捷键删除

删除组件后，对应的组件树节点同步移除。

多窗体设计

ENERGY Designer 支持同时打开多个窗体进行并行设计。

标签页切换

• 点击设计器顶部的窗体标签页切换当前设计的窗体
• 切换窗体时，对象检查器自动同步显示对应窗体的属性
• 每个窗体标签页可独立显示/隐藏

窗体属性

选中窗体本身（点击画布空白区域或在组件树中选择窗体根节点），对象检查器显示窗体的属性，如：

• Caption - 窗体标题
• Width / Height - 窗体尺寸
• Position - 窗体初始位置
• BorderStyle - 窗体边框样式

实时自动保存

ENERGY Designer 在设计过程中实时自动保存 UI 布局。每次属性变更、组件增删、位置调整等操作都会自动同步到 .ui 布局文件，无需手动保存。