From 70ac2e367829f8d035933a5dacd37728a5ec719f Mon Sep 17 00:00:00 2001 From: kangchongtao Date: Fri, 26 Aug 2022 16:30:24 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E6=96=87=E6=A1=A3=E6=95=B4?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: kangchongtao --- zh-cn/application-dev/ui/ts-types.md | 293 ++++++++++++++++----------- 1 file changed, 179 insertions(+), 114 deletions(-) diff --git a/zh-cn/application-dev/ui/ts-types.md b/zh-cn/application-dev/ui/ts-types.md index dbbc20f706..7dd533eac7 100644 --- a/zh-cn/application-dev/ui/ts-types.md +++ b/zh-cn/application-dev/ui/ts-types.md @@ -1,160 +1,225 @@ # 类型定义 -## 长度类型 +## Resource -| 名称 | 类型定义 | 描述 | -| ------ | -------------------------- | ---------------------------------------- | -| Length | string \| number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 | +资源引用类型，用于设置组件属性的值。 +可以通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 -## 角度类型 +- `$r('belonging.type.name')` -| 名称 | 类型定义 | 描述 | -| ----- | -------------------------- | ---------------------------------------- | -| Angle | string \| number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：
- deg：如'100deg'。
- rad：如'3.14rad'。 | + belonging：系统资源或者应用资源，相应的取值为'sys'和'app'； + type：资源类型，支持'color'、'float'、'string'、'media'等； -## 点类型 + name：资源名称，在资源定义时确定。 -| 名称 | 类型定义 | 描述 | -| ----- | --------------------- | --------------------------- | -| Point | [Length, Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 | +- `$rawfile('filename')` + filename：工程中resources/rawfile目录下的文件名称。 -## 颜色类型 + | 名称 | 类型 | 可读 | 可写 | 说明 | + | ----------------------- | ------ | ---- | ---- | ---------- | + | id | number | 是 | 否 | 资源id值。 | + | type | number | 是 | 否 | 资源类型。 | + | params | any[] | 是 | 否 | 资源可选参数 | + | bundleName9+ | string | 是 | 否 | 资源包名称。 | + | moduleName9+ | string | 是 | 否 | 资源模块名称。| -组件属性方法使用的颜色Color说明如下： +## Length -| 名称 | 类型定义 | 描述 | -| ----- | ---------------------------------------- | ---------------------------------------- | -| Color | string \| number \| [Color](../reference/arkui-ts/ts-appendix-enums.md#color) | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。
- 'rgb(255, 255, 255)'。
- 'rgba(255, 255, 255, 1.0)'。
- HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。
- 枚举格式：Color.Black，Color.White等。 | +长度类型，用于描述尺寸单位。 +| 类型 | 说明 | +| -------- | ------------------------------------------------------------ | +| string | 需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 | +| number | 默认单位vp。 | +| Resource | 使用引入资源的方式，引入系统资源或者应用资源中的尺寸。 | -## ColorStop类型 +## ResourceStr8+ -颜色断点类型，用于描述渐进色颜色断点。 +字符串类型，用于描述字符串入参可以使用的类型。 -| 名称 | 类型定义 | 描述 | -| --------- | -------------------- | -------------------------------------- | -| ColorStop | [Color, 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'等； +## EdgeWidths9+ - name：资源名称，在资源定义时确定。 +边框宽度类型，用于描述组件边框不同方向的宽度。 -- `$rawfile('filename')` + | 名称 | 类型 | 必填 | 说明 | + | ------- | ------ | ---- |--------------------- | + | top | Length | 否 | 组件上边框宽度。 | + | right | Length | 否 | 组件右边框宽度。 | + | bottom | Length | 否 | 组件下边框宽度。 | + | left | Length | 否 | 组件左边框宽度。 | + +## BorderRadiuses9+ + +圆角类型，用于描述组件边框圆角半径。 + + | 名称 | 类型 | 必填 | 说明 | + | ----------- | ------ | ---- |--------------------- | + | topLeft | Length | 否 | 组件上边框宽度。 | + | topRight | Length | 否 | 组件右边框宽度。 | + | bottomLeft | Length | 否 | 组件下边框宽度。 | + | bottomRight | Length | 否 | 组件左边框宽度。 | + +## EdgeColors9+ + +边框颜色，用于描述组件边框四条边的颜色。 + + | 名称 | 类型 | 必填 | 说明 | + | ------- | --------------- | ---- |--------------------- | + | top | ResourceColor | 否 | 组件上边框颜色。 | + | right | ResourceColor | 否 | 组件右边框颜色。 | + | bottom | ResourceColor | 否 | 组件下边框颜色。 | + | left | ResourceColor | 否 | 组件左边框颜色。 | + +## EdgeStyles9+ + +边框样式，用于描述组件边框四条边的样式。 + + | 名称 | 类型 | 必填 | 说明 | + | ------- | ------------- | ---- |--------------------- | + | top | BorderStyle | 否 | 组件上边框样式。 | + | right | BorderStyle | 否 | 组件右边框样式。 | + | bottom | BorderStyle | 否 | 组件下边框样式。 | + | left | BorderStyle | 否 | 组件左边框样式。 | - filename：工程中resources/rawfile目录下的文件名称。 -| 名称 | 类型定义 | 描述 | -| -------- | ---------------------------------------- | ---------------------------------------- | -| Resource | {
readonly id: [number];
readonly type: [number];
readonly params?: any[];
} | - id：资源id值。
- type：资源类型（枚举值）。
- params：可选参数。
通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 | +## Offset +相对布局完成位置坐标偏移量。 -## ResourceStr类型8+ + | 名称 | 类型 | 必填 | 说明 | + | -------- | ------ | ---- |--------------------- | + | dx | Length | 是 | 水平方向偏移量。 | + | dy | Length | 是 | 竖直方向偏移量。 | -| 名称 | 类型定义 | 描述 | -| ----------- | ---------------------------- | ------------- | -| ResourceStr | string \| Resource | 用于描述资源字符串的类型。 | +## ResourceColor8+ +颜色类型，用于描述资源颜色类型。 -## ResourceColor类型8+ +| 类型 | 说明 | +| -------- | ----------------------- | +| [Color](../reference/arkui-ts/ts-appendix-enums.md#color) | 颜色枚举值。 | +| number | HEX格式颜色。 | +| string | rgb或者rgba格式颜色。 | +| Resource | 使用引入资源的方式，引入系统资源或者应用资源中的颜色。 | -| 名称 | 类型定义 | 描述 | -| ------------- | ---------------------------------------- | ----------- | -| ResourceColor | Color \| number \| string \| Resource | 用于描述资源颜色类型。 | +## LengthConstrain -## Font类型8+ +长度约束，用于对组件最大、最小长度做限制。 -| 名称 | 类型定义 | 描述 | -| ---- | ---------------------------------------- | ---------------------------------------- | -| Font | {
size?: Length;
weight?: FontWeight  \| number  \| string;
family?: string  \| Resource;
style?: FontStyle;
} | 设置文本样式：
size: 设置文本尺寸，Length为number类型时，使用fp单位。
weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
style: 设置文本的字体样式。 | + | 名称 | 类型 | 必填 | 说明 | + | --------- | ------ | ---- |---------------- | + | minLength | Length | 是 | 组件最小长度。 | + | maxLength | Length | 是 | 组件最大长度。 | -## ColorFilter类型9+ +## Font -| 名称 | 类型定义 | 描述 | -| ----------- | -------- | ----------------------------------------------------------- | -| ColorFilter | number[] | 用于描述颜色矩阵信息。
行优先矩阵，长度为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类型8+ +## Area8+ + +区域类型，用于存储元素所占区域信息 + +| 名称 | 类型 | 说明 | +| -------------- | -------- | ------------------------------------------------- | +| width | Length | 目标元素的宽度，作为返回值时，类型为number，单位vp。 | +| height | Length | 目标元素的高度，作为返回值时，类型为number，单位vp。 | +| position | Position | 目标元素左上角相对父元素左上角的位置。 | +| globalPosition | Position | 目标元素左上角相对页面左上角的位置。 | + + +## Position8+ + +位置类型，用于表示一个坐标点。 + +| 名称 | 类型 | 必填 | 说明 | +| ----- | ------- | ---- | ------------------------------------------- | +| 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 \| EdgeWidths9+ | 否 | 边框宽度。 | +| color | ResourceColor \| EdgeColors9+ | 否 | 边框颜色。 | +| radius | Length \| BorderRadiuses9+ | 否 | 边框角度。 | +| style | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) \| EdgeStyles9+ | 否 | 边框样式。 | + +## ColorFilter9+ + +创建具有4*5矩阵的颜色过滤器。 + +| 名称 | 类型 | 必填 | 描述 | +| ----------- | -------- | ------ | --------------------------------------------------------------- | +| constructor | number[] | 是 | 创建具有4*5矩阵的颜色过滤器, 入参为[m*n]位于m行和n列中矩阵值, 矩阵是行优先的。 | + + +## CustomBuilder8+ 组件属性方法参数可使用CustomBuilder类型来自定义UI描述。 -| 名称 | 类型定义 | 描述 | -| ------------- | ---------------------- | ---------------------------------------- | +| 名称 | 类型定义 | 描述 | +| ------------- | ---------------------- | ------------------------------------------------------------ | | CustomBuilder | () => 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) -- GitLab