窗口设计器
[🕒 预计 30 分钟] | 难度：入门
1. 打开窗口设计器
在 解决方案资源管理器 中双击任意 .lcpp 文件，先用中文代码编辑器打开。编辑器右上角有一个切换按钮：
- 代码视图下显示 查看设计器 (Designer)（快捷键
Shift+F7），点击后以独立标签页 界面设计 打开窗口设计器。 - 设计器视图下同一位置变成 查看代码 (Code)（快捷键
F7），点击返回中文事件代码。
NOTE
设计器顶部标题为 多窗口可视化界面设计器，一个项目可以有多个窗口，每个窗口对应一份 *.xml 布局模型；切换窗口下拉列表即可编辑其它窗口。
2. 添加控件
- 在设计器左侧点击 控件，打开控件列表面板。
- 控件 面板按 基础控件、高级控件、浏览器控件、New_Emoji 控件 分组，顶部 搜索控件 输入框可按中文名称过滤。
- 单击 目标控件即把它添加到当前窗口画布中央——界面提示原文是「点击控件即可添加到当前窗口，随后可在画布中拖拽、改尺寸、绑定中文事件。」不需要从面板往画布拖拽。
- 添加后可直接在画布上拖动位置、拖动手柄改尺寸。
NOTE
控件分组来自模块贡献。分组标题带 （未启用） 时，说明当前项目还没有在 配置项目所使用模块 中启用对应模块，该组控件不可添加。
常用控件及其默认事件（事件名列出的是设计器 事件 选项卡中的中文名）：
| 控件 | 分组 | 常用事件 |
|---|---|---|
| 按钮 | 基础控件 | 被单击、鼠标被按下、获得焦点、失去焦点 |
| 编辑框 | 基础控件 | 内容被改变、获得焦点、失去焦点 |
| 标签/静态控件 | 基础控件 | 鼠标被按下、鼠标移入、鼠标移出 |
| 复选框 / 单选框 | 基础控件 | 被选中、被取消选中 |
| 列表框 | 基础控件 | 选择项被改变、被双击 |
| 组合框 | 基础控件 | 选择项被改变、内容被改变 |
| 滚动条 | 基础控件 | 数值被改变 |
| 进度条 / 分组框 / 图片框 | 基础控件 | 进度条与分组框无事件；图片框为鼠标类事件 |
| 动态图像控件 | 基础控件 | 播放完毕 |
| 列表视图 | 高级控件 | 选择项被改变、被双击、列被单击 |
| 数据表格 | 高级控件 | 通过列配置与命令读取 |
| 树形视图 | 高级控件 | 选择节点被改变、节点被展开、节点被折叠、被双击 |
| 选项卡 | 高级控件 | 标签页被改变 |
| 日期时间选择器 / 月历 | 高级控件 | 日期被改变 |
| 滑块 / 数值调节器 / 平面滚动条 | 高级控件 | 数值被改变 |
| 富文本框 | 高级控件 | 内容被改变、选择区被改变 |
| 颜色选择器 | 高级控件 | 颜色被改变、选择窗口被打开、选择被确认、选择被取消 |
| 超链接 | 高级控件 | 链接被单击 |
| 工具栏 / 状态栏 | 高级控件 | 按钮被单击 / 分区被双击 |
| 文件对话框 | 高级控件（非可视） | 文件已选择、文件被拖入、选择被取消 |
| 上下文菜单 / 弹出菜单 | 高级控件（非可视） | 菜单项被选择（逐项绑定） |
| 视频播放器 | 高级控件 | 媒体已打开、播放完毕、播放错误 |
| Edge浏览器 / CEF3浏览器 / FBro指纹浏览器 | 浏览器控件 | 需启用对应浏览器模块 |
3. 调整控件布局
- 选中：单击画布上的控件，四周出现调节手柄。
- 移动：按住控件拖到新位置；或用方向键微调，每次 1 像素，按住
Shift为每次 10 像素。 - 调整大小：拖拽控件边缘或四角的手柄。
- 多选：按住
Ctrl或Shift逐个加选。 - 对齐与等分：使用画布顶部布局工具栏的 左齐、顶齐、右齐、底齐、水平居中、垂直居中、横向分布、纵向分布、等宽、等高。选区少于 2 个控件时按钮置灰。
- 撤销与重做：工具栏 撤销（
Ctrl+Z）/ 重做（Ctrl+Y），布局调整可随时回退。 - 缩放：工具栏 适应 · N% 一键适配画布，另有缩小/放大按钮（25%~150%），便于在大窗口上精确摆放。
- 锁定：通过画布右键菜单 锁定 选中控件，再次选择可 解除锁定；锁定后控件右上角显示「锁定」角标，不能被移动、缩放、更换父容器或删除。
TIP
初次添加的控件使用默认尺寸与位置。建议在 属性 选项卡里把 左距、顶距、宽度、高度 设成确定数值，比靠肉眼对齐更利于不同分辨率下保持一致。
4. 配置属性
右侧面板分 属性、事件、布局 三个选项卡。选中不同对象时，属性 选项卡按分组展示字段。
选中控件时的分组：
| 分组 | 字段 |
|---|---|
| 控件 / 布局 | 父级容器、左距、顶距、宽度、高度 |
| 控件 / 代码标记 | 标记文本、标记整数 |
| 控件 / 外观 | 控件类型（只读）、中文名称、显示内容、字体名称、字体大小、字体样式、文字颜色、背景颜色 |
| 控件 / 专属属性 | 随控件类型变化，例如按钮的按钮样式、圆角大小、按下状态、工具提示文字、工具提示延迟 |
| 控件 / 状态 | 启用、可见性 |
未选中控件时展示窗口级属性，分组为 当前窗口 / 布局（设计后端、宽度、高度）、当前窗口 / 打开位置、当前窗口 / 外观（窗口标题、背景颜色、标题栏颜色、标题文字颜色、窗口边框、窗口图标）、当前窗口 / 原生框架、当前窗口 / 状态。面板底部另有 删除此控件。
IMPORTANT
中文名称 就是代码里引用该控件用的名字，默认按类型自动编号（第一个按钮为 按钮1，第二个为 按钮2）。这个名称会作为裸标识符出现在 .lcpp 里（如 控件_设置文本(按钮1, "确定")），改名后所有引用它的代码必须同步改，否则会得到「控件不存在」诊断。
5. 绑定事件
有两条入口，结果完全一致：
- 双击画布上的控件：自动生成并跳到该控件的默认事件处理器，默认名按
_控件名_事件名规则生成，例如按钮的_按钮1_被单击。 - 属性面板 → 事件选项卡：逐个事件以卡片列出，卡片显示处理器名和 未绑定 / 已绑定 状态，按钮文字为 生成并打开（未绑定）或 打开代码（已绑定）。
先在窗口中放一个标签控件（默认名 标签1），再双击按钮写入响应逻辑。生成的 .lcpp 用缩进和 结束 表示代码块，不使用花括号：
类 MainWindow
事件 _按钮1_被单击()
控件_设置文本(标签1, "按钮已被点击")
结束
结束类NOTE
开头的 _ 表示这是设计器绑定的处理器。生成 C++ 时该前缀会被去掉，_按钮1_被单击 对应 void 按钮1_被单击()。设计器绑定与代码里的 事件 名称必须逐字一致。
除上表按控件列出的事件外，每个窗口自身还有一组窗口级事件，处理器名按 _窗口类名_事件名 生成（如 _MainWindow_创建完毕）：
| 分类 | 事件 |
|---|---|
| 生命周期 | 创建完毕、关闭前、已关闭、显示状态被改变 |
| 布局与状态 | 大小被改变、位置被改变、被激活、失去激活、被最小化、被最大化、被恢复 |
| 焦点与键盘 | 获得焦点、失去焦点、按键被按下、按键被放开、字符被输入 |
| 系统与拖放 | DPI 被改变、文件被拖入 |
带参数的窗口事件在处理器签名里写中文类型，参数之间用全角逗号分隔（设计器生成的代码即为此形式）：
事件 _MainWindow_按键被按下(整数型 键码，逻辑型 Ctrl键按下，逻辑型 Shift键按下，逻辑型 Alt键按下)
调试输出("收到按键消息")
结束
事件 _MainWindow_文件被拖入(文本型[] 文件集合)
调试输出("有文件被拖入窗口")
结束关闭前 事件里可以调用 窗口_取消关闭() 阻止本次关闭；已关闭 只用于释放资源，无法取消。
6. 使用布局容器
控件较多时，用容器组织界面：
- 分组框：为相关控件提供带标题的视觉分组。
- 选项卡：把界面拆成多个分页，配合
标签页被改变事件切换内容。
NOTE
网格容器（旧项目兼容）、Rebar 容器（旧项目兼容）、分页容器（旧项目兼容） 只用于打开和维持旧项目布局，新项目不要选用；新界面请用绝对定位配合分组框、选项卡组织。
下一步
- 学习 LingCpp 语法：LingCpp 快速上手
- 使用模块扩展功能：模块市场
- 用 AI 生成界面代码：AI 聊天助手