Cocos装饰器

属性检查器相关参数

属性装饰器的各种特性是通过 @property() 的参数来指定的。完整可选择参数可以参考：

参数名	说明	类型	默认值	备注
type	限定属性的数据类型	(Any)	undefined
visible	在 属性检查器 面板中显示或隐藏	boolean	(注1)
displayName	在 属性检查器 面板中显示为另一个名字	string	undefined
tooltip	在 属性检查器 面板中添加属性的 Tooltip	string	undefined
multiline	在 属性检查器 面板中使用多行文本框	boolean	false
readonly	在 属性检查器 面板中只读	boolean	false
min	限定数值在编辑器中输入的最小值	number	undefined
max	限定数值在编辑器中输入的最大值	number	undefined
step	指定数值在编辑器中调节的步长	number	undefined
range	一次性设置 min、max、step	[min, max, step]	undefined	step 值可选
slide	在 属性检查器 面板中显示为滑动条	boolean	false
group	在 属性检查器 面板中显示为分组，样式默认为 tab	{ name } 或 { id, name, displayOrder, style }	undefined

属性装饰器

@property({
    type: Node,
    visible: true,
})
targetNode: Node | null = null;

声明属性 children 的 cc 类型为 Node 数组

@property({
    type: [Node]
})
children: Node[] = [];

@property({
    type: String,
}) // 警告：不应该使用构造函数 String。等价于 CCString。也可以选择不声明类型
text = '';

分组

当脚本中定义的属性过多且杂时，可通过 group 对属性进行分组、排序，方便管理。同时还支持对组内属性进行分类。

group 写法包括以下两种：

• @property({ group: { name } })
• @property({ group: { id, name, displayOrder, style } })

参数	说明
id	分组 ID，string 类型，是属性分组组号的唯一标识，默认为 default。
name	组内属性分类的名称，string 类型。
displayOrder	对分组进行排序，number 类型，数字越小，排序越靠前。默认为 Infinity，表示排在最后面。 若存在多个未设置的分组，则以在脚本中声明的先后顺序进行排序
style	分组样式，目前支持 tab 和 section 样式。 默认为 tab。

// 分组一
// 组内名为 “bar” 的属性分类，其中包含一个名为 label 的 Label 属性
@property({ group: { name: 'bar' }, type: Label }) 
label: Label = null!; 
// 组内名为 “foo” 的属性分类，其中包含一个名为 sprite 的 Sprite 属性
@property({ group: { name: 'foo' }, type: Sprite }) 
sprite: Sprite = null!;

// 分组二
// 组内名为 “bar2” 的属性分类，其中包含名为 label2 的 Label 属性和名为 sprite2 的 Sprite 属性，并且指定排序为 1。
@property({ group: { name: 'bar2', id: '2', displayOrder: 1 }, type: Label }) 
label2: Label = null!; 
@property({ group: { name: 'bar2', id: '2' }, type: Sprite }) 
sprite2: Sprite = null!;

 

因为分组一未指定 displayOrder，分组二指定了 displayOrder 为 1，所以分组二会排在分组一的前面。 

若需要对分组内的属性排序，也可以使用 displayOrder。以分组二为例，目前是按照在脚本中定义的先后顺序进行排序，label2 在 sprite2 的前面。我们将其调整为：

// 分组二
// 组内名为 “bar” 的属性分类，其中包含名为 label2 的 Label 属性和名为 sprite2 的 Sprite 属性，并且指定排序为 1。
@property({ group: { name: 'bar2', id: '2', displayOrder: 1 }, displayOrder: 2, type: Label }) 
label2: Label = null!; 
@property({ group: { name: 'bar2', id: '2' }, displayOrder: 1, type: Sprite }) 
sprite2: Sprite = null!;

内置类型界面 

针对一些常用类型，引擎内部提供了默认界面，开发者可以根据自身的需求使用：

• 颜色界面：

代码示例如下：

@property(Color)
color:Color

•  曲线：用于保存曲线类型、样式以及采样数据。

代码示例如下：

@property(RealCurve)
realCurve:RealCurve = new RealCurve();

•  曲线范围：可以通过常量、曲线、双曲线或双常量进行控制。

代码示例如下：

@property(CurveRange)
curveRang : CurveRange = new CurveRange();

•  渐变色：记录渐变色的关键值和用于计算渐变色的结果

代码示例如下：

@property(Gradient)
gradient = new Gradient();

•  渐变色范围：通过颜色、渐变色、双颜色或双渐变色控制颜色

 

代码示例如下：

@property(GradientRange)
gradientRange:GradientRange = new GradientRange();