Skip to main content

视觉输入属性

所有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

• 多行换行

此属性指定堆叠在节点边界之外的子级会发生什么情况。

数据描述
关闭子对象堆叠在节点边界之外。如果启用了 裁剪,它们将不可见。
打开子项被换行到下一行或列(取决于布局方向)。
反向打开 相同,但布局方向相反。

• 间隔

此属性用于添加组中子项之间的间距。

数据描述
垂直间隔子项之间的垂直空间。如果 布局 设置为 垂直排列多行换行 设置为 打开,则显示。
水平间隔子项之间的水平空间。如果 布局 设置为 水平排列多行换行 设置为 打开,则显示。

• 裁剪内容

此属性控制是否会剪裁太大而无法容纳在节点内的元素。 如果禁用,组将始终展开以包含其所有子级。因此,如果孩子们的身高超过了小组的大小,小组就会扩大,并大于其指定的大小。

对齐内容

此小工具控制默认情况下 子项 的对齐和对齐方式。子项们可以用他们的 对齐 输入覆盖这些设置。

第一组选项控制交叉轴对齐,即水平布局的垂直对齐和垂直布局的水平对齐。从左到右,选项为:

选项描述
顶端对齐子内容与父的顶端对齐。
居中对齐子内容与父的中间对齐。
底端对齐子内容与父的底端对齐。

第二组选项控制与布局相同方向的对齐。从左到右,选项为:

OptionDescription
对齐内容开始控制子元素在主轴上靠近容器的起始位置对齐。
对齐内容中心控制子元素在主轴上中间位置对齐。
对齐内容结尾控制子元素在主轴上靠近容器的末尾位置对齐。
均匀分布,两端对齐控制子元素在主轴上平均分布,两端不留空白。
均匀分布,边距相同控制子元素在主轴上平均分布,每个元素周围留有相等的空白。
均匀分布,两端相等控制子元素在主轴上平均分布元素,并在元素之间和两端留有相等的空白

滚动

此小工具控制如何在节点中处理滚动。

数据描述
启用滚动这指定节点是否应为溢出到节点边界之外的子节点启用滚动。滚动方向由节点[布局](#Layout)方向决定。启用此选项将显示下面的滚动属性。
数据描述
原生平台滚动启用后,将使用依赖于网页自带的滚动条。禁用时使用自定义CIDE滚动。自定义CIDE滚动是独立于平台的,同时支持触摸和鼠标。
显示滚动条仅当禁用了 原生平台滚动 时可用。切换滚动条的可见性。
Bounce at boundaries仅当禁用了 原生平台滚动 时可用。切换当您位于列表的顶部或底部时滚动是否反弹效果。
吸附仅当禁用了 原生平台滚动 时可用。启用此选项将捕捉每个屏幕之间的滚动。
对齐到每个项目仅当 捕获 已启用时可用。启用此选项将强制滚动到各个项目。

文本样式

数据描述
文本样式将现有文本样式设置为此节点,或从当前特性创建新的文本样式。
字体要显示的文本的字体库。在项目文件夹中选择字体或键入字体名称。
字体大小要显示的文本的字体大小,单位为“px”。
字体颜色要显示的文本的颜色。
字体间距要显示的字符串中字母之间的距离。可以用以下单位指定:

px:像素。这是CSS像素,因此一个像素将是视网膜显示器上的两个物理像素
em:相对于字体大小。1em与当前字体大小相同
行高如果字符串在多行上,则字符串的行高。可以用以下单位指定:

无单位:相对于当前字体大小。设置行高的首选方式
px:像素。这是CSS像素,因此一个像素将是视网膜显示器上的两个物理像素
%:百分比
大小写控制如何将文本大写:

:字符未修改
大写:所有字符都将为大写
小写:所有字母都将为小写
首字母大写:每个单词的第一个字母将转换为大写

其他样式

属性设置 控制节点的基本样式。

数据描述
不透明度节点的不透明度。0 是完全透明和不可见的。1 是完全不透明的。
背景颜色设置此节点的背景色。
文本可见打开和关闭此节点的可见性。
层叠顺序此节点的深度索引,可以是任何数字。
混合模式控制此元素应如何与其后面的元素混合。混合模式可以设置为以下之一:倍增 正常 高光 叠加 变暗 变亮 颜色减淡 颜色加深 强光 柔光 差值 排除 色相 饱和度 颜色 亮度

边框样式

边框样式小工具用于设置边框的样式。

可以选择一次设置所有边框的样式,也可以只设置单个边框的样式。单个边框的样式将覆盖“所有边框”选项。

数据描述
边框样式指定此节点是否应具有边框以及其外观。选项为实心点状虚线
边框宽度边框的宽度。仅当 边框样式 设置为具有边框时才可用。
边框颜色边框的颜色。仅当 边框样式 设置为具有边框时才可用。

圆角

该属性设置用于设置元素的圆角。

可以选择一次设置所有角点的角点半径,也可以仅设置单个角点的样式。各个角的样式将覆盖 所有角 选项。 角半径以节点宽度的 px% 指定。

盒子阴影

可设置 盒子(元素)的内阴影或外阴影。

数据描述
启用阴影启用和禁用阴影。
偏移X阴影的水平偏移。正值会将阴影放在节点的右侧,负值会将阴影放置在节点的左侧。
偏移Y阴影的垂直偏移。正值将阴影放置在节点下方,负值将阴影放置到节点上方。
模糊半径模糊半径。数字越高,阴影就越模糊。
扩散半径扩散半径。正值会增大阴影的大小,负值会减小阴影的大小。
插入将阴影从外部阴影(开始)更改为内部阴影。
阴影颜色阴影的颜色。

旋转设置

使用放置小工具可以偏移、旋转和缩放节点。它在引擎盖下使用CSS Transforms,这意味着点头仍将占据视觉树中的原始大小和位置。

数据描述
X轴使用放置小工具可以偏移、旋转和缩放节点。它在引擎盖下使用CSS Transforms,这意味着点头仍将占据视觉树中的原始大小和位置。
Y轴节点的Y位置相对于其父节点的左上角或相对于其布局位置,具体取决于_position_属性。可以以像素或其父对象高度的百分比指定。
角度以度为单位的旋转。
缩放指定此节点的缩放比例。值为0会完全向下缩放节点,使其不再可见。值为1会使其具有原始大小,值为2会使大小加倍,依此类推。
旋转原点X指定此节点内的X位置,该位置将作为旋转和缩放的中心。默认情况下,它是节点的中心(即50%),但您可以以节点宽度的百分比或明确地以像素为单位指定任意值。
旋转原点Y指定此节点内的Y位置,该位置将作为旋转和缩放的中心。默认情况下,它是节点的中心(即50%),但您可以以节点高度的百分比或明确地以像素为单位指定任意值。

尺寸限制

尺寸限制小工具允许您限制尺寸设置的数值范围。

数据描述
最小宽度最小宽度可以通过与子元素或父元素一起自动增长来确定。可以用百分比、像素或 vw(表示窗口宽度的百分比)来指定。
最大宽度最大宽度可以通过与子元素或父元素一起自动增长来确定。可以用百分比、像素或 vw(表示窗口宽度的百分比)来指定。
最小高度最小高度可以通过与子元素或父元素一起自动增长来确定。可以用百分比、像素或 vh(表示窗口高度的百分比)来指定。
最大高度最大高度可以通过与子元素或父元素一起自动增长来确定。可以用百分比、像素或 vh(表示窗口高度的百分比)来指定。

焦点

信号描述
焦点将焦点集中在此节点。这将在该节点上触发 焦点 信号输出,并在其他失去焦点的节点上触发 失去焦点 信号。

其他

数据描述
指针事件模式这指定了节点如何响应指针事件。

继承 将节点设置为与其父节点相同的方式响应指针事件。
默认 将节点设置为根据 启用指针事件 指定的方式响应指针事件。
启用指针事件如果将 指针事件模式 设置为 默认,则此属性才可用。它将指定该节点是否响应指针事件。如果设置为 false,则该节点将完全忽略指针事件。
阻止指针事件这将导致该节点阻止所有指针事件,例如,位于该节点后面的任何节点都将无法接收到指针事件。
装载此属性用于从DOM中完全删除节点。如果此属性设置为false,则节点将从可视化树中删除。它不同于 可见 属性,其中节点仍然是视觉树的一部分,但不可见。

高级HTML

数据描述
标签在应用程序中呈现此节点时使用的标签。仅适用于 容器文本 节点。
CSS Class指定此节点将具有的CSS类。
CSS Style使用此属性来指定您的自定义CSS。