03 · 画面组态
搭画面就是:双击一张画面打开 → 从图元库拖控件到画布 → 摆好、对齐、叠层。所见即所得——你在编辑器里摆成什么样,运行时就是什么样(编辑和运行共用同一套渲染)。
【配图：画面编辑器——中间画布,右侧图元库分组列表,选中一个控件后八个缩放手柄】
打开一张画面
左侧工程树 窗口 → 窗口文件 → 双击画面名,画面在中间画布以标签页打开。新建画面走画面菜单(新建画面 / 删除 / 重命名 / 设为启动画面 / 画面分辨率)。
图元库:拖控件到画布
右侧图元库按分组列出所有控件,搜索框可过滤。分组:
| 分组 | 里面有 |
|---|---|
| 常用 | 按钮、文本、指示灯、开关… |
| 整品按钮 | 各种成品风格按钮 |
| 输入/选择 | 输入框、下拉、复选、单选… |
| 列表/容器 | 列表、容器、分组框、标签页、浮动小窗(能装子元件)… |
| 导航 | 导航树等 |
| 警报 | 报警显示控件 |
| 安全/登录 | 登录框等运行态控件 |
| 图表 | 棒图、趋势图… |
| 图形 | 基础图形(矩形/圆/线…) |
| 多媒体 | 图片/视频 |
| 标识码 | 二维码 / 条码 |
| 定时器 | 定时器(无外观元素) |
| 工业图元 | 工业专用图元(电机 / 阀门 / 罐 / 仪表等) |
用法:把图元从库里拖到画布,或点一下再在画布点放。分类默认全部折叠(一屏能看全所有分类,点标题才展开),标题右边的数字是该组控件数;搜索时命中的分类会自动展开。
图库:符号 / 特效 / 基础图形,三个入口
图元库顶部有三个按钮,各开一个选择器:
| 按钮 | 里面 | 数量 |
|---|---|---|
| 工业图库… | 按行业分的现成 SVG 工业符号 | 16 类 / 130 个 |
| 特效库… | 会动的氛围与工艺特效(汽 / 烟 / 水 / 火 / 粒子 / 流体 / 电力 / 光效 / 纹理) | 9 组 / 37 个 |
| 基础图形库… | 基础可编辑图元 + 常用形状(心形 / 四叶草 / 星形 / 多边形 / 箭头…) | 6 组 / 50 个 |
工业图库的 16 类:消防系统、暖通空调、给排水、楼宇机电、照明系统、炉窑热工、水处理、物料输送、电机 / 泵、阀门、管件、罐槽 / 容器、仪表、电气、安全警示、电气原理图(断路器 / 熔断器 / 接触器 / 热继电器 / 三相电机 / 变压器 / 变频器等,按 GB/T 4728 画法)。
选中插入即落成一个图元(SVG 矢量,任意缩放不糊)。工业符号的每个颜色角色(描边 / 填充 / 强调 / 报警 / 警示)都能单独绑点,运行态按点值换色。
选中、移动、缩放
- 单击选中(八个手柄),拖动移动,拖手柄缩放。
- 框选 / Shift 多选;全选 = 编辑菜单或 Ctrl+A。
- 锁定 / 解锁选中元素(编辑或图元菜单)——锁住的元素不会被误拖。
- 剪切 / 复制 / 粘贴 / 创建副本 / 删除都在编辑菜单。
对齐、分布、图层
多选后在图元菜单里:
- 对齐:左 / 右 / 上 / 下 / 水平居中 / 垂直居中。
- 分布:水平分布 / 垂直分布(等间距铺开)。
- 图层:置于顶层 / 置于底层 / 上移一层 / 下移一层。
配合视图菜单的栅格、标尺摆得更准;裁剪预览开着能提前看到"屏幕外的元素在真机上不显示"。
图形编辑:布尔运算与图片裁剪
选中图元后右键:
- 图片裁剪… —— 图片图元弹可视化裁剪框,拖四角留出要显示的部分;确定后只写 4 个裁剪参数,原图不动、随时改回来。
- 布尔运算 —— 选中 2 个以上可编辑矢量图形(矩形 / 椭圆 / 多边形 / 箭头),做 合并 / 交集 / 切割 / 异或; 结果落成一个可继续编辑的多边形(不是一张死图),一步可撤销。
布尔运算只吃可编辑矢量图形。图片和工业符号要先换成「基础图形库 › 基础(可编辑)」里的图形, 或先用预设多边形(预设多边形现在也是可编辑的)。
母版:跨画面共用的浮层
一张画面可设为母版,再被其它画面引用——像顶部标题栏、公共导航这类每张画面都要的东西,做一次到母版里,所有引用它的画面都带上,改一处全改。母版是纯浮层,叠在画面之上(业务画面内容在下层)。
一张业务画面最多引 3 张母版,且有层次:母版1 最上、母版2 次之、母版3 最下(但三张都在业务画面内容之上)。母版元素属于母版画面,脚本要引用得写「母版名.元素名」;业务画面存盘不含母版元素,不会重复写。
浮动小窗:能装子元件的容器
浮动小窗是图元库里唯一能装别的元件的元件(在「列表/容器」组)。它是一块带标题栏的浮层, 把按钮、数值、曲线拖进去,就成了一块可以整体开关、整体移动的控制面板——点设备弹一块面板、弹报警详情、 弹配方编辑,都用它。
怎么把元件放进去:两种都行,效果一样。 - 从图元库直接拖进小窗的内容区; - 或者选中元件,在右侧属性面板底部「所属容器」里选这个小窗的名字(选「(画面顶层)」就拿出来)。
放进去之后,子元件的坐标是相对小窗内容区左上角的,所以拖动小窗时里面的一起走;超出内容区的部分会被裁掉。
属性:
| 属性 | 说明 |
|---|---|
| 标题 | 标题栏文字 |
| 标题栏 | 关掉就只留内容区,自己用子元件摆标题 |
| 关闭按钮 | 标题栏右侧的「×」。运行态点它只是把窗口藏起来(不写回工程,下次启动照旧出现) |
| 作用域 | 「跟随本画面」= 切到别的画面就消失;「全局」= 放在启动画面上,切到任何画面都保留并浮在最上 |
| 窗体底色 / 边框色 / 圆角 / 内边距 | 外观 |
两条要注意的: - 「全局」作用域只有摆在启动画面上的才生效——摆在别的画面上,运行态永远收不到它。 - 小窗里不能再放小窗(只支持一层)。指向不存在的容器、指向自己、或者两层嵌套,元件都会按画面顶层画出来, 不会消失——拖回去就行。
一句话总结
双击画面打开,从右侧图元库(常用 / 整品按钮 / 输入选择 / 文本显示 / 图形 / 列表容器 / 导航 / 警报 / 安全登录 / 图表 / 现代交互 / 多媒体 / 标识码 / 定时器 / 工业图元共 15 组)拖控件到画布;顶部三个图库入口(工业图库 130 个符号 / 特效库 37 个 / 基础图形库 50 个);右键可做图片裁剪与图形布尔运算;用图元菜单对齐分布叠层,母版做跨画面共用浮层——所见即所得,运行时长一个样。