Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 70ac2e36 编写于 作者: K kangchongtao
浏览文件
操作

类型文档整改 

Signed-off-by: Nkangchongtao <kangchongtao@huawei.com>
上级 df6d4baa
隐藏空白更改
内联 并排
Showing with 179 addition and 114 deletion
zh-cn/application-dev/ui/ts-types.md
浏览文件 @ 70ac2e36
# 类型定义
## 长度类型
## Resource
| 名称 | 类型定义 | 描述 |
| ------ | -------------------------- | ---------------------------------------- |
| Length | string&nbsp;\|&nbsp;number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 |
资源引用类型，用于设置组件属性的值。
可以通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。
## 角度类型
- `$r('belonging.type.name')`
| 名称 | 类型定义 | 描述 |
| ----- | -------------------------- | ---------------------------------------- |
| Angle | string&nbsp;\|&nbsp;number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：<br/>-&nbsp;deg：如'100deg'。<br/>-&nbsp;rad：如'3.14rad'。 |
belonging：系统资源或者应用资源，相应的取值为'sys'和'app'；
type：资源类型，支持'color'、'float'、'string'、'media'等；
## 点类型
name：资源名称，在资源定义时确定。
| 名称 | 类型定义 | 描述 |
| ----- | --------------------- | --------------------------- |
| Point | [Length,&nbsp;Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 |
- `$rawfile('filename')`
filename：工程中resources/rawfile目录下的文件名称。
## 颜色类型
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ----------------------- | ------ | ---- | ---- | ---------- |
| id | number | 是 | 否 | 资源id值。 |
| type | number | 是 | 否 | 资源类型。 |
| params | any[] | 是 | 否 | 资源可选参数 |
| bundleName<sup>9+</sup> | string | 是 | 否 | 资源包名称。 |
| moduleName<sup>9+</sup> | string | 是 | 否 | 资源模块名称。|
组件属性方法使用的颜色Color说明如下：
## Length
| 名称 | 类型定义 | 描述 |
| ----- | ---------------------------------------- | ---------------------------------------- |
| Color | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Color](../reference/arkui-ts/ts-appendix-enums.md#color) | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。<br/>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'。<br/>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'。<br/>-&nbsp;HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。<br/>-&nbsp;枚举格式：Color.Black，Color.White等。 |
长度类型，用于描述尺寸单位。
| 类型 | 说明 |
| -------- | ------------------------------------------------------------ |
| string | 需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 |
| number | 默认单位vp。 |
| Resource | 使用引入资源的方式，引入系统资源或者应用资源中的尺寸。 |
## ColorStop类型
## ResourceStr<sup>8+</sup>
颜色断点类型，用于描述渐进色颜色断点。
字符串类型，用于描述字符串入参可以使用的类型。
| 名称 | 类型定义 | 描述 |
| --------- | -------------------- | -------------------------------------- |
| ColorStop | [Color,&nbsp;number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 |
| 类型 | 说明 |
| -------- | --------------------------------------------------- |
| string | 字符串类型。 |
| Resource | 使用引入资源的方式，引入系统资源或者应用资源中的字符串。 |
## Padding
## Resource类型
内边距类型，用于描述组件不同方向的内边距。
资源引用类型，用于设置组件属性的值。
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- |------------------------ |
| top | Length | 否 | 组件内元素距组件顶部的尺寸。 |
| right | Length | 否 | 组件内元素距组件右边界的尺寸。 |
| bottom | Length | 否 | 组件内元素距组件底部的尺寸。 |
| left | Length | 否 | 组件内元素距组件左边界的尺寸。 |
可以通过`$r`或者`$rawfile`创建Resource类型对象，详见[资源访问](ts-resource-access.md)。
## Margin
- `$r('belonging.type.name')`
外边距类型，用于描述组件不同方向的外边距。
belonging：系统资源或者应用资源，相应的取值为'sys'和'app'；
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- |------------------------ |
| top | Length | 否 | 组件外元素距组件顶部的尺寸。 |
| right | Length | 否 | 组件外元素距组件右边界的尺寸。 |
| bottom | Length | 否 | 组件外元素距组件底部的尺寸。 |
| left | Length | 否 | 组件外元素距组件左边界的尺寸。 |
type：资源类型，支持'color'、'float'、'string'、'media'等；
## EdgeWidths<sup>9+</sup>
name：资源名称，在资源定义时确定。
边框宽度类型，用于描述组件边框不同方向的宽度。
- `$rawfile('filename')`
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- |--------------------- |
| top | Length | 否 | 组件上边框宽度。 |
| right | Length | 否 | 组件右边框宽度。 |
| bottom | Length | 否 | 组件下边框宽度。 |
| left | Length | 否 | 组件左边框宽度。 |
## BorderRadiuses<sup>9+</sup>
圆角类型，用于描述组件边框圆角半径。
| 名称 | 类型 | 必填 | 说明 |
| ----------- | ------ | ---- |--------------------- |
| topLeft | Length | 否 | 组件上边框宽度。 |
| topRight | Length | 否 | 组件右边框宽度。 |
| bottomLeft | Length | 否 | 组件下边框宽度。 |
| bottomRight | Length | 否 | 组件左边框宽度。 |
## EdgeColors<sup>9+</sup>
边框颜色，用于描述组件边框四条边的颜色。
| 名称 | 类型 | 必填 | 说明 |
| ------- | --------------- | ---- |--------------------- |
| top | ResourceColor | 否 | 组件上边框颜色。 |
| right | ResourceColor | 否 | 组件右边框颜色。 |
| bottom | ResourceColor | 否 | 组件下边框颜色。 |
| left | ResourceColor | 否 | 组件左边框颜色。 |
## EdgeStyles<sup>9+</sup>
边框样式，用于描述组件边框四条边的样式。
| 名称 | 类型 | 必填 | 说明 |
| ------- | ------------- | ---- |--------------------- |
| top | BorderStyle | 否 | 组件上边框样式。 |
| right | BorderStyle | 否 | 组件右边框样式。 |
| bottom | BorderStyle | 否 | 组件下边框样式。 |
| left | BorderStyle | 否 | 组件左边框样式。 |
filename：工程中resources/rawfile目录下的文件名称。
| 名称 | 类型定义 | 描述 |
| -------- | ---------------------------------------- | ---------------------------------------- |
| Resource | {<br/>readonly&nbsp;id:&nbsp;[number];<br/>readonly&nbsp;type:&nbsp;[number];<br/>readonly&nbsp;params?:&nbsp;any[];<br/>} | - id：资源id值。<br/>- type：资源类型（枚举值）。<br/>- params：可选参数。<br/>通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 |
## Offset
相对布局完成位置坐标偏移量。
## ResourceStr类型<sup>8+</sup>
| 名称 | 类型 | 必填 | 说明 |
| -------- | ------ | ---- |--------------------- |
| dx | Length | 是 | 水平方向偏移量。 |
| dy | Length | 是 | 竖直方向偏移量。 |
| 名称 | 类型定义 | 描述 |
| ----------- | ---------------------------- | ------------- |
| ResourceStr | string&nbsp;\|&nbsp;Resource | 用于描述资源字符串的类型。 |
## ResourceColor<sup>8+</sup>
颜色类型，用于描述资源颜色类型。
## ResourceColor类型<sup>8+</sup>
| 类型 | 说明 |
| -------- | ----------------------- |
| [Color](../reference/arkui-ts/ts-appendix-enums.md#color) | 颜色枚举值。 |
| number | HEX格式颜色。 |
| string | rgb或者rgba格式颜色。 |
| Resource | 使用引入资源的方式，引入系统资源或者应用资源中的颜色。 |
| 名称 | 类型定义 | 描述 |
| ------------- | ---------------------------------------- | ----------- |
| ResourceColor | Color&nbsp;\|&nbsp;number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;Resource | 用于描述资源颜色类型。 |
## LengthConstrain
## Font类型<sup>8+</sup>
长度约束，用于对组件最大、最小长度做限制。
| 名称 | 类型定义 | 描述 |
| ---- | ---------------------------------------- | ---------------------------------------- |
| Font | {<br/>size?: Length;<br/>weight?: <a href="https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md#li24391125115311">FontWeight</a> &nbsp;\| number &nbsp;\| string;<br/>family?: string &nbsp;\| <a href="ts-types.md#Resource">Resource</a>;<br/>style?: <a href="https://gitee.com/superFat/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md#li6906111945316">FontStyle</a>;<br/>} | 设置文本样式：<br/>size: 设置文本尺寸，Length为number类型时，使用fp单位。<br/>weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。<br/>style: 设置文本的字体样式。 |
| 名称 | 类型 | 必填 | 说明 |
| --------- | ------ | ---- |---------------- |
| minLength | Length | 是 | 组件最小长度。 |
| maxLength | Length | 是 | 组件最大长度。 |
## ColorFilter类型<sup>9+</sup>
## Font
| 名称 | 类型定义 | 描述 |
| ----------- | -------- | ----------------------------------------------------------- |
| ColorFilter | number[] | 用于描述颜色矩阵信息。<br/>行优先矩阵，长度为20的浮点数组。 |
设置文本样式。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------------------------------ | ---- | ------------------------------------------------------------ |
| size | number | 否 | 设置文本尺寸，Length为number类型时，使用fp单位。 |
| weight | number | 否 | 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。 |
| family | [FontWeight](../reference/arkui-ts/ts-appendix-enums.md#fontweight) \| number \| string | 否 | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。 |
| style | string \| Resource | 否 | 设置文本的字体样式。 |
## CustomBuilder类型<sup>8+</sup>
## Area<sup>8+</sup>
区域类型，用于存储元素所占区域信息
| 名称 | 类型 | 说明 |
| -------------- | -------- | ------------------------------------------------- |
| width | Length | 目标元素的宽度，作为返回值时，类型为number，单位vp。 |
| height | Length | 目标元素的高度，作为返回值时，类型为number，单位vp。 |
| position | Position | 目标元素左上角相对父元素左上角的位置。 |
| globalPosition | Position | 目标元素左上角相对页面左上角的位置。 |
## Position<sup>8+</sup>
位置类型，用于表示一个坐标点。
| 名称 | 类型 | 必填 | 说明 |
| ----- | ------- | ---- | ------------------------------------------- |
| x | Length | 否 | x轴坐标，作为返回值时，类型为number，单位vp。 |
| y | Length | 否 | y轴坐标，作为返回值时，类型为number，单位vp。 |
## ConstraintSizeOptions
设置约束尺寸，组件布局时，进行尺寸范围限制。
| 名称 | 类型 | 必填 | 说明 |
| --------- | -------- | ---- | -------------- |
| minWidth | Length | 否 | 元素最小宽度。 |
| maxWidth | Length | 否 | 元素最大宽度。 |
| minHeight | Length | 否 | 元素最小高度。 |
| maxHeight | Length | 否 | 元素最大高度。 |
## SizeOptions
设置宽高尺寸。
| 名称 | 类型 | 必填 | 说明 |
| ------- | -------- | ---- | -------------- |
| width | Length | 否 | 元素宽度。 |
| height | Length | 否 | 元素高度。 |
## BorderOptions
边框属性集合，用于描述边框相关信息。
| 名称 | 类型 | 必填 | 说明 |
| ------ | ----------------------- | ---- | ----------- |
| width | Length \| EdgeWidths<sup>9+</sup> | 否 | 边框宽度。 |
| color | ResourceColor \| EdgeColors<sup>9+</sup> | 否 | 边框颜色。 |
| radius | Length \| BorderRadiuses<sup>9+</sup> | 否 | 边框角度。 |
| style | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | 否 | 边框样式。 |
## ColorFilter<sup>9+</sup>
创建具有4*5矩阵的颜色过滤器。
| 名称 | 类型 | 必填 | 描述 |
| ----------- | -------- | ------ | --------------------------------------------------------------- |
| constructor | number[] | 是 | 创建具有4*5矩阵的颜色过滤器, 入参为[m*n]位于m行和n列中矩阵值, 矩阵是行优先的。 |
## CustomBuilder<sup>8+</sup>
组件属性方法参数可使用CustomBuilder类型来自定义UI描述。
| 名称 | 类型定义 | 描述 |
| ------------- | ---------------------- | ---------------------------------------- |
| 名称 | 类型定义 | 描述 |
| ------------- | ---------------------- | ------------------------------------------------------------ |
| CustomBuilder | ()&nbsp;=&gt;&nbsp;any | 这种方法类型必须使用@Builder装饰器修饰。具体用法见[@Builder](ts-component-based-builder.md)。 |
## 示例
```ts
// xxx.ets
@Entry
@Component
struct dataTypeExample {
build() {
Column({ space: 5 }) {
Text('Length').fontColor(0xCCCCCC).fontSize(9).width('90%')
Text('90%').width('90%').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
Text('320').width(320).height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
Text('1000px').width('1000px').height(40).backgroundColor(0xF9CF93)
.textAlign(TextAlign.Center).fontColor(Color.White)
Text('Angle').fontColor(0xCCCCCC).fontSize(9).width('90%')
Text('45deg')
.width(40).height(40)
.rotate({ x: 0, y: 0, z: 1, angle: 45, centerX: '50%', centerY: '50%' })
.fontColor(Color.White)
.backgroundColor(0xF9CF93).textAlign(TextAlign.Center)
Text('45rad')
.width(40).height(40)
.rotate({ x: 0, y: 0, z: 1, angle: '45rad', centerX: '50%', centerY: '50%' })
.fontColor(Color.White)
.backgroundColor(0xF9CF93).textAlign(TextAlign.Center).margin({ top: 30 })
Text('Point').fontColor(0xCCCCCC).fontSize(9).width('90%')
Line().width(300).height(40).startPoint([0, 20]).endPoint([300, 20])
Text('Color').fontColor('#CCCCCC').fontSize(9).width('90%')
Text('0xF9CF93')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor(0xF9CF93)
Text('#F9CF93')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('#F9CF93')
Text('rgb(249, 207, 147)')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('rgb(249, 207, 147)')
Text('rgba(249, 207, 147, 1.0)')
.fontColor(Color.White).textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor('rgba(249, 207, 147, 1.0)')
Text('Color.Yellow')
.textAlign(TextAlign.Center)
.width('90%').height(40).backgroundColor(Color.Yellow)
}
.width('100%').margin({ top: 5 })
}
}
```
![zh-cn_image_0000001219982719](figures/zh-cn_image_0000001219982719.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或