外观
04 控件与图层
控件与图层 面板同时承担两个任务:上半部分添加普通控件,下半部分用图层树管理选择、父子关系和同层顺序。
直接添加的六种控件
| 控件 | 主要用途 | 关键属性 |
|---|---|---|
| 输入框 | 让使用者输入文本 | 占位符、默认值 |
| 标签 | 显示说明或状态文字 | 文本 |
| 下拉框 | 从固定选项中选择一项 | 逗号分隔的选项 |
| 复选框 | 表示可同时成立的开关 | 文本、默认选中 |
| 单选框 | 表示一个布尔选择状态 | 文本、默认选中 |
| 分组框 | 容纳并归类其他控件 | 标题 |
添加方法:在面板的 控件 区域找到类型,选择右侧的加号按钮;按钮提示会显示 添加输入框、添加标签 等对应名称。新控件会出现在画布中,并加入图层树。
Tab、按钮、设置页和账号表格不在这六种入口中。模板内建内容见界面市场。
选择控件
- 单击画布中的控件或图层树项目,选择一个控件。
- 按住
Ctrl、Shift或系统多选键再单击,可以追加或取消选择。 - 在画布空白处拖出选区,可以框选多个控件。
- 单击画布空白处或在图层树中选择 画布,切换到画布选择。
选中单个控件时右侧显示 控件配置。选中多个控件时,画布会显示共同选择边界和删除按钮。
移动和调整尺寸
- 选中控件。
- 拖动控件主体改变位置。
- 拖动控件右下角的尺寸手柄改变宽高。
- 需要精确值时,在 控件配置 > 布局 中填写
X、Y、宽度 和 高度。
移动多个已选控件时,它们保持彼此间距一起移动。模板内建控件的位置和尺寸可能由系统布局锁定,不能按普通控件调整。
图层树和父子层级
图层树从 画布 开始显示所有控件。容器可以展开和收起,子控件缩进显示。
拖动图层树项目可以:
- 拖入分组框或可接收内容的模板页,建立父子关系;
- 拖回 画布,移出当前容器;
- 拖到同层项目之前或之后,调整同层显示顺序。
无效的放置位置不会生效。分组框层级和模板 Tab 页的详细规则见分组框、Tab 与脚本配置页。
对齐多个控件
对齐工具要求至少选中两个同层级控件。底部工具栏提供:
- 左对齐、水平居中对齐、右对齐;
- 顶部对齐、垂直居中对齐、底部对齐。
如果所选控件分属不同容器或不同 Tab 页,对齐工具不可用,并提示 请选择同一层级的至少两个控件。先在图层树中调整层级,再重新选择。
删除控件
选择控件后,可以使用画布上的删除按钮或按 Delete、Backspace。图层树中的删除入口也会删除对应控件。
删除分组框或其他含子控件的容器时,整个子树会一并删除,而且普通容器没有额外的子树确认提示。删除含子控件的 Tab 页时,系统会显示直接子控件数量,并在确认后删除该页的整个子树;空 Tab 页会直接删除。操作前先展开图层树核对内容,误删后立即使用底部工具栏的撤销按钮或Ctrl+Z。
结果确认
- 新增控件同时出现在画布和图层树中。
- 拖入分组框后,控件在树中缩进到分组框下面。
- 同层多选后,对齐工具可用;跨层选择时不可用。
- 删除普通叶子控件后,只有该控件从画布和树中消失。