属性+

• 通过内容栏定义

• 通过开关控制

• 通过滑块控制

• 基础属性选项卡用于定义对象的宽度、高度等基本属性，所有对象都具备。
• 样式选项卡用于定义对象的样式，例如阴影、模糊、边框等更高级的外观属性，可折叠和展开，大部分对象都具备样式属性。
• 自定义样式用于为对象设定自定义属性及值（参照CSS语法），默认为空，需要开发者自行添加，所有对象都具备。

属性分类

在iVX中的对象-都分别具备以下的两类属性：
1. 基础属性
（1）尺寸（宽度、高度）
此处添加了一个相对定位图片，它的宽度和高度默认状态下都为“原始宽（高）”，即自动读取素材的原始尺寸，单位为像素。px
可以将其设定为一个固定值，例如 2030（px），此时需要在宽度、高度窗格内分别键入 20、30（由于此时属性窗格的单位为像素，固无需*附带单位）：

也可以将其设定为一个依据父级元素宽 高的百分比值，例如，20%30%，对应于父对象宽度的 20%、高度的 30%。由于此时属性窗格的*默认单位仍为像素，需要将属性值更改为百分比，则需要在宽度、高度窗格内分别带单位地键入“20%”、“30%”，单位将切换为百分比：

切换为20px30px大小-只需重新带单位地键入“20px”和“30px”即可，在相对定位环境下，我们可以通过百分比和具体尺寸来设置对象的大小， 在切换时只需要重新输入一次单位就能实现百分比和像素间的切换。
对于绝对定位对象，其宽度和高度只能通过像素定义为*固定值，不允许定义为浮动值。

（2）可见
可见属性为一个开关，用以切换是或否。默认为是（橙色），对象可见；单击一下即可切换为否（灰色），对象不可见。

对象不可见则该对象暂时从舞台中隐藏，但并非删除。可以通过交互重新令其可见。
对于相对定位组件而言，某组件切换可见状态将同时影响到其他组件的布局。

（3）不透明度
不透明度用于控制当前组件的可视程度，默认为 100%，即完全可视。
可通过拖动滑块进行调节，或直接在数值窗口中键入目标值。如果设置为 0，则完全透明，不可视：

注意，此时虽然对象由于透明度为 0 而不可视，其仍然为可见状态。

（4）外边距
外边距是相对定位对象的特有属性，用于定义该对象与相邻对象的外部距离。默认为上、下、左、右四个方向，示例如下：

该属性默认为 0。同样可定义为固定像素值，或浮动百分比值。

（5）背景颜色
背景颜色用于定义对象的背景颜色。对于图片对象而言，由于素材默认完全填充图像区域，除非素材为透明 PNG 素材，否则该背景颜色将不可见。
背景颜色默认为无色，点击选择栏，在弹出的颜色选择器中选取，或通过键入色号直接指定颜色。点击“清空”则清空当前背景颜色。

（6）素材资源地址
素材资源地址-用于为当前图片对象设定素材资源地址。如果素材通过本地上传，则该图片被存储在服务器中，地址由服务器自动生成：

点击地址窗格，即可切换为编辑状态，系统将自动弹出本地浏览器窗口供选取图片重新上传。
此外还可以使用网络图片地址。

2. 样式属性
除了基础属性，每种组件还提供了丰富的样式属性。用于设定对象的旋转、模糊、色度、阴影等效果。

（1）旋转
对象的旋转状态由原点和旋转角度共同定义。其含义如下：
● X、Y原点
原点既是绝对定位对象的定位基准点，也是对象的旋转中心。默认原点为左上顶点，通过调整 X、Y 原点可以分别定义原点的偏移。
● 旋转角度
对象围绕其原点的旋转角度，默认为 0°，增大则顺时针旋转，减小则逆时针旋转。

（2）边框样式
对象的边框样式是通过四个属性共同定义：
● 边框圆角
对象矩形外框的圆角，单位为像素。默认为 0，即没有圆角。当增大圆角时，可能会对其中的图片素材产生剪切效果：
● 边框宽度
对象矩形外框的宽度，单位为像素。默认为 0，即没有边框。
● 边框类型
对象矩形外框的类型，通过下拉列表进行选取。可选类别包括无边框、实线、虚线、点状边框。
● 边框颜色
对象矩形外框的颜色，默认为无色，即不可视。

（3）对象的阴影效果样式
为对象添加阴影，并设定阴影效果。该样式通过以下四个属性共同定义：4
● 阴影偏X
阴影偏离对象的 X 值。默认为 0，即阴影在X方向与图片完全重合。当 X 与 Y 均为 0 时，阴影与对象完全重合，阴影效果不可见。
● 阴影偏Y
阴影偏离对象的 Y 值。默认为 0，即阴影在Y方向与图片完全重合。当 X 与 Y 均为 0 时，阴影与对象完全重合，阴影效果不可见。
● 阴影模糊
阴影的模糊程度，默认为 0，即无模糊效果。
● 阴影颜色
阴影颜色，默认为无色。此时阴影不可见，需设定为其他颜色。

（4）对象的效果和样式
对象的效果和样式-用于为对象添加一些特殊效果。
● 模糊
对象的模糊程度，默认为 0，即无模糊效果，该值越大，则模糊效果越明显。
● 亮度/对比度/饱和度/灰度
此四个属性用于定义对象的色度。默认为 100%，即对应素材的默认值，可在 0 - 100% 之间进行调整。
● 反转图像
对象色相反转的程度，默认为 0%，即不反转，可在 0 - 100% 之间调节。
● 色相旋转
对象色相反转的程度，默认为 0°，即不旋转，可在 0 - 360° 之间调节。

自定义样式属于高级功能，将在其他文档中另行讲解。

通过上述讲解，我们可以看到，属性窗格提供了非常多样化的属性类别，具有非常高的自由度，实现精细的效果设定。每种属性都可以通过可视化的方法进行快速定义，使用起来非常便捷。
因此，了解每种组件的属性即定义方法是使用 iVX 产品的基础。可通过查看“组件详解”查看每种组件都包含哪些属性及每个属性的含义。

属性数据绑定

在 iVX 中，我们允许通过数据绑定的方式实时控制对象的属性变化。它的基本原理是

将对象的某个属性绑定至一个变量，当变量值发生变化时，属性值也发生即时变化。
但是该数据路径为单向运行，当属性值发生变化时，并不会反过来影响变量值。

通过数据绑定，我们可以将对象化的程序设计抽象成以数据结构为基础的程序设计。举例而言，在面向对象的程序设计中，如果我们要改变 UI 对象的属性，需要对每个对象进行逐一调整，对于具有不确定数量或数量庞大的对象群而言，这种做法显然是低效而不可取的。而如果我们使用一套由变量、数组组成的数据结构来控制 UI 对象，只需要修改数据结构或数据就可以实现对象的属性调节，开发过程的可重用性、可维护性都会大大增强。

假设我们希望通过一个输入框控制滑块数值，可以通过数值绑定的方式，将输入框的数值先赋值给变量，由变量决定滑块数值，其具体的实现方式如下：
步骤 1 添加组件
此处添加一个滑块、一个输入框，一个数值变量

步骤 2 数值绑定
选中滑块，在其属性面板中将“默认数值”属性与变量绑定。具体操作方式如下图所示

首先点击属性栏右侧的按钮，将赋值窗口切换为数值绑定状态。然后点击左侧的箭头，可在对象树中选取变量。或通过下拉列表选取变量。
选择后可以看到窗格内显示为橙色变量名称，即为绑定成功。

步骤 3 为变量赋值
当输入框失焦时为变量赋值为当前内容

进行预览，可以看到，此时已经可以通过输入框控制滑块值了。

Q & A
Q：为什么某些属性经过数值绑定之后无法调整 值？
A：在本例中，因为变量的值只能单向影响到滑块值，滑块值不能反过来改变变量值，所以当滑块与变量进行了数值绑定后，滑块表现为锁死，不能滑动的状态。
要实现数据的双向绑定，需要借助于反向赋值操作，当滑块数值改变时反过来赋值给变量。