视觉输入属性
所有UI节点都具有大量的视觉属性,这些属性可以通过属性面板和输入方 式进行访问。下面将对这些属性进行说明。请参考各个节点的文档页面,了解哪些节点具有哪些视觉属性。
外边距
边距是节点周围的间距,位于边框之外。节点的边距可以在间距工具中单独设置。
属性 | 描述 |
---|---|
左边距 | 左边距以像素(px)或相对于父元素宽度的百分比(%)来表示。 |
右边距 | 右边距以像素(px)或相对于父元素宽度的百分比(%)来表示。 |
上边距 | 上边距以像素(px)或相对于父元素宽度的百分比(%)来表示。 |
下边距 | 下边距以像素(px)或相对于父元素宽度的百分比(%)来表示。 |
内边距
内边距是指边界内节点内容周围的间距。节点的边距可以在“间距小工具”中单独设置。
属性 | 描述 |
---|---|
内边距左 | 内边距左以像素(px)或相对于父元素宽度的百分比(%)来表示。 |
内边距右 | 内边距右以像素(px)或相对于父元素宽度的百分比(%)来表示。 |
内边距上 | 内边距上以像素(px)或相对于父元素宽度的百分比(%)来表示。 |
内边距下 | 内边距下以像素(px)或相对于父元素宽度的百分比(%)来表示。 |
对齐方式
若要指定节点与其父节点的对齐方式,可以使用 对齐属性。
从左到右,对齐选项为:
属性名 | 描述 |
---|---|
下对齐 | 将此节点与其父节点的底部对齐。 |
垂直居中对齐 | 将此节点与其父节点垂直居中对齐 |
上对齐 | 将此节点与其父节点顶部对齐。 |
左对齐 | 将此节点与其父节点的左侧对齐。 |
水平居中对齐 | 将此节点与其父节点水平居中对齐。 |
右对齐 | 将此节点与其父节点的右侧对齐。 |
连接值
连接到布局属性时,值与下拉列表中的值略有不同。以下是应传入的值列表:
显示名称 | 值 |
---|---|
下对齐 | bottom |
垂直居中对齐 | center |
上对齐 | top |
左对齐 | left |
水平居中对齐 | center |
右对齐 | right |
尺寸
控制节点的宽度和高度是通过"尺寸控制工具"来实现的
前四个控制节点的 大小模式 。它决定如何指定节点的宽度和高度。从左到右,选项为:
属性 | 描述 |
---|---|
显式设置宽度和高度 | 直接以像素或百分比设置宽度和高度。百分比与父项有关,因此100%与父项大小相同。 |
显示设置宽度,高度自适应内容 | 根据节点的内容计算适合的宽度。高度是明确设置的。 |
显示设置高度, 宽度自适应内容 | 根据节点的内容计算适合的高度。宽度是明确设置的。 |
内容大小 | 宽度和高度都根据节点的所有子元素进行计算以适应。 |
其他属性包括:
属性 | 描述 |
---|---|
宽度 | 设置此节点的宽度(以像素为单位)、父节点宽度的百分比或浏览器窗口宽度的百分比单位vw 。 |
高度 | 设置此节点的高度(以像素为单位)、父节点高度的百分比或浏览器窗口高度的百分比单位vw 。 |
固定 | 控制元素是否会尝试在不超出父元素边界的情况下调整大小并与同级元素共享空间 |
如果启用 固定,则元素将为指定的大小。如果禁用该选项,则元素将调整大小以填充空白空间,或者收缩以为同级元素腾出空间。
可以使用 尺寸限制设置节点的最小和最大宽高。
布局
布局工具 支持的属性可能因节点而异,下面列出了所有可能的属性。
• 位置
控制此节点在其父容器中的布局。
选项 | 描述 |
---|---|
相对 | 此节点是父容器布局的一部分,它将与其同级节点正常堆叠,具体取决于父容器布局设置。 |
绝对 | 此节点将不属于父容器布局的一部分,相反,您可以自由使用“Pos X”和“Pos Y”来显式放置此节点。 |
吸附 | 行为类似于 相对,除非节点将在父容器之外滚动。它将粘贴到父对象的边缘,而不是滚动离开。可以使用 对齐 属性来控制其粘贴的边缘。 |
固定 | 此节点将不属于父容器布局的一部分,脱离原来的布局,将会固定在窗口的某个指定区域,会跟随视窗的滚动而滚动。 |
• 布局方向
默认情况下,所有子项都是堆叠的。此属性指定堆叠方向。
属性 | 描述 |
---|---|
垂直 | 子元素按垂直方向排列 |
水平 | 子元素按水平方向排列 |
无 | 子元素没有任何堆叠 |
连接到布局属性时,值与下拉列表中的值略有不同。 以下是应传入的 值列表:
显示名称 | 值 |
---|---|
垂直 | column |
水平 | row |
无 | none |
• 多行换行
此属性指定堆叠在节点边界之外的子级会发生什么情况。
数据 | 描述 |
---|---|
关闭 | 子对象堆叠在节点边界之外。如果启用了 裁剪,它们将不可见。 |
打开 | 子项被换行到下一行或列(取决于布局方向)。 |
反向 | 与 打开 相同,但布局方向相反。 |
• 间隔
此属性用于添加组中子项之间的间距。
数据 | 描述 |
---|---|
垂直间隔 | 子项之间的垂直空间。如果 布局 设置为 垂直排列 或 多行换行 设置为 打开,则显示。 |
水平间隔 | 子项之间的水平空间。如果 布局 设置为 水平排列 或 多行换行 设置为 打开,则显示。 |