1# 类型定义 2 3## Resource 4 5资源引用类型，用于设置组件属性的值。 6 7可以通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 8 9- `$r('belonging.type.name')` 10 11 belonging：系统资源或者应用资源，相应的取值为'sys'和'app'； 12 13 type：资源类型，支持'color'、'float'、'string'、'media'等； 14 15 name：资源名称，在资源定义时确定。 16 17- `$rawfile('filename')` 18 19 filename：工程中resources/rawfile目录下的文件名称。 20 21 **说明：** 在引用资源类型时，注意其数据类型要与属性方法本身的类型一致，例如某个属性方法支持设置string | Resource，那么在使用Resource引用类型时，其数据类型也应当为string。 22 23## Length 24 25长度类型，用于描述尺寸单位。 26 27| 类型 | 说明 | 28| --------------------- | -------------------------------------- | 29| string | 需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 | 30| number | 默认单位vp。 | 31| [Resource](#resource) | 资源引用类型，引入系统资源或者应用资源中的尺寸。 | 32 33## ResourceStr 34 35字符串类型，用于描述字符串入参可以使用的类型。 36 37| 类型 | 说明 | 38| --------------------- | ------------------------- | 39| string | 字符串类型。 | 40| [Resource](#resource) | 资源引用类型，引入系统资源或者应用资源中的字符串。 | 41 42## Padding 43 44内边距类型，用于描述组件不同方向的内边距。 45 46| 名称 | 类型 | 必填 | 说明 | 47| ------ | ----------------- | ---- | -------------------- | 48| top | [Length](#length) | 否 | 上内边距，组件内元素距组件顶部的尺寸。 | 49| right | [Length](#length) | 否 | 右内边距，组件内元素距组件右边界的尺寸。 | 50| bottom | [Length](#length) | 否 | 下内边距，组件内元素距组件底部的尺寸。 | 51| left | [Length](#length) | 否 | 左内边距，组件内元素距组件左边界的尺寸。 | 52 53## Margin 54 55外边距类型，用于描述组件不同方向的外边距。 56 57| 名称 | 类型 | 必填 | 说明 | 58| ------ | ----------------- | ---- | -------------------- | 59| top | [Length](#length) | 否 | 上外边距，组件顶部距组件外元素的尺寸。 | 60| right | [Length](#length) | 否 | 右外边距，组件右边界距组件外元素的尺寸。 | 61| bottom | [Length](#length) | 否 | 下外边距，组件底部距组件外元素的尺寸。 | 62| left | [Length](#length) | 否 | 坐外边距，组件左边界距组件外元素的尺寸。 | 63 64## EdgeWidths<sup>9+</sup> 65 66边框宽度类型，用于描述组件边框不同方向的宽度。 67 68| 名称 | 类型 | 必填 | 说明 | 69| ------ | ----------------- | ---- | -------- | 70| top | [Length](#length) | 否 | 组件上边框宽度。 | 71| right | [Length](#length) | 否 | 组件右边框宽度。 | 72| bottom | [Length](#length) | 否 | 组件下边框宽度。 | 73| left | [Length](#length) | 否 | 组件左边框宽度。 | 74 75## BorderRadiuses<sup>9+</sup> 76 77圆角类型，用于描述组件边框圆角半径。 78 79| 名称 | 类型 | 必填 | 说明 | 80| ----------- | ----------------- | ---- | ---------- | 81| topLeft | [Length](#length) | 否 | 组件左上角圆角半径。 | 82| topRight | [Length](#length) | 否 | 组件右上角圆角半径。 | 83| bottomLeft | [Length](#length) | 否 | 组件左下角圆角半径。 | 84| bottomRight | [Length](#length) | 否 | 组件右下角圆角半径。 | 85 86## EdgeColors<sup>9+</sup> 87 88边框颜色，用于描述组件边框四条边的颜色。 89 90| 名称 | 类型 | 必填 | 说明 | 91| ------ | ------------------------------- | ---- | -------- | 92| top | [ResourceColor](#resourcecolor) | 否 | 组件上边框颜色。 | 93| right | [ResourceColor](#resourcecolor) | 否 | 组件右边框颜色。 | 94| bottom | [ResourceColor](#resourcecolor) | 否 | 组件下边框颜色。 | 95| left | [ResourceColor](#resourcecolor) | 否 | 组件左边框颜色。 | 96 97## EdgeStyles<sup>9+</sup> 98 99边框样式，用于描述组件边框四条边的样式。 100 101| 名称 | 类型 | 必填 | 说明 | 102| ------ | ---------------------------------------- | ---- | -------- | 103| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 组件上边框样式。 | 104| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 组件右边框样式。 | 105| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 组件下边框样式。 | 106| left | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 组件左边框样式。 | 107 108 109## Offset 110 111相对布局完成位置坐标偏移量。 112 113| 名称 | 类型 | 必填 | 说明 | 114| ---- | ----------------- | ---- | -------- | 115| dx | [Length](#length) | 是 | 水平方向偏移量。 | 116| dy | [Length](#length) | 是 | 竖直方向偏移量。 | 117 118## ResourceColor 119 120颜色类型，用于描述资源颜色类型。 121 122| 类型 | 说明 | 123| ----------------------------------- | --------------------------- | 124| [Color](ts-appendix-enums.md#color) | 颜色枚举值。 | 125| number | HEX格式颜色，支持rgb。示例：0xffffff。 | 126| string | rgb或者rgba格式颜色。示例：'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'。 | 127| [Resource](#resource) | 使用引入资源的方式，引入系统资源或者应用资源中的颜色。 | 128 129## LengthConstrain 130 131长度约束，用于对组件最大、最小长度做限制。 132 133| 名称 | 类型 | 必填 | 说明 | 134| --------- | ----------------- | ---- | ------- | 135| minLength | [Length](#length) | 是 | 组件最小长度。 | 136| maxLength | [Length](#length) | 是 | 组件最大长度。 | 137 138 139## Font 140 141设置文本样式。 142 143| 名称 | 类型 | 必填 | 说明 | 144| ------ | ---------------------------------------- | ---- | ---------------------------------------- | 145| size | [Length](#length) | 否 | 设置文本尺寸，Length为number类型时，使用fp单位。不支持设置百分比字符串。 | 146| weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。 | 147| family | string \| [Resource](#resource) | 否 | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。当前只支持'sans-serif'字体。 | 148| style | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 设置文本的字体样式。 | 149 150## Area<sup>8+</sup> 151 152区域类型，用于存储元素所占区域信息 153 154| 名称 | 类型 | 说明 | 155| -------------- | ---------------------- | ------------------------------ | 156| width | [Length](#length) | 目标元素的宽度，作为返回值时，类型为number，单位vp。 | 157| height | [Length](#length) | 目标元素的高度，作为返回值时，类型为number，单位vp。 | 158| position | [Position](#position8) | 目标元素左上角相对父元素左上角的位置。 | 159| globalPosition | [Position](#position8) | 目标元素左上角相对页面左上角的位置。 | 160 161## Position<sup>8+</sup> 162 163位置类型，用于表示一个坐标点。 164 165| 名称 | 类型 | 必填 | 说明 | 166| ---- | ----------------- | ---- | --------------------------- | 167| x | [Length](#length) | 否 | x轴坐标，作为返回值时，类型为number，单位vp。 | 168| y | [Length](#length) | 否 | y轴坐标，作为返回值时，类型为number，单位vp。 | 169 170## ConstraintSizeOptions 171 172设置约束尺寸，组件布局时，进行尺寸范围限制。 173 174| 名称 | 类型 | 必填 | 说明 | 175| --------- | ----------------- | ---- | ------- | 176| minWidth | [Length](#length) | 否 | 元素最小宽度。 | 177| maxWidth | [Length](#length) | 否 | 元素最大宽度。 | 178| minHeight | [Length](#length) | 否 | 元素最小高度。 | 179| maxHeight | [Length](#length) | 否 | 元素最大高度。 | 180 181## SizeOptions 182 183设置宽高尺寸。 184 185| 名称 | 类型 | 必填 | 说明 | 186| ------ | ----------------- | ---- | ----- | 187| width | [Length](#length) | 否 | 元素宽度。 | 188| height | [Length](#length) | 否 | 元素高度。 | 189 190 191## BorderOptions 192 193边框属性集合，用于描述边框相关信息。 194 195| 名称 | 类型 | 必填 | 说明 | 196| ------ | ---------------------------------------- | ---- | ------- | 197| width | [Length](#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> | 否 | 边框宽度。 | 198| color | [ResourceColor](#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> | 否 | 边框颜色。 | 199| radius | [Length](#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> | 否 | 边框圆角半径。 | 200| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | 否 | 边框样式。 | 201 202## ColorFilter<sup>9+</sup> 203 204创建具有4*5矩阵的颜色过滤器。 205 206| 名称 | 类型 | 必填 | 描述 | 207| ----------- | -------- | ---- | ---------------------------------------- | 208| constructor | number[] | 是 | 创建具有4\*5矩阵的颜色过滤器, 入参为[m\*n]位于m行和n列中矩阵值，每个值的有效范围是[0, 1], 矩阵是行优先的。 | 209 210 211## CustomBuilder<sup>8+</sup> 212 213组件属性方法参数可使用CustomBuilder类型来自定义UI描述。 214 215| 名称 | 类型定义 | 描述 | 216| ------------- | ---------------------- | ---------------------------------------- | 217| CustomBuilder | () => any | 该方法类型必须使用@Builder装饰器修饰。具体用法见[@Builder](../../quick-start/arkts-builder.md)。 | 218 219