diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md index cf0d166c82d783ea7028e0bf9ca4a56d8762cee5..5b156b7bffefe8b1e34d718c789e38d4dc1c4249 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md @@ -58,6 +58,8 @@
+ Value + 123 Type Color @@ -94,6 +96,7 @@ select{ /* index.js */ export default { data: { + qr_value:'', qr_type: 'rect', qr_size: '300px', qr_col: '#87ceeb', diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642902.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642902.png new file mode 100644 index 0000000000000000000000000000000000000000..36eab44e87c075e01baa66bfc48a86ba703b7835 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001118642902.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md index 2372325ad9b0c0631aec9b003d353f14d749b6e7..d026aafb2b56387c3f553655d5fc885e7de03c80 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -1,26 +1,26 @@ # 属性动画 +组件的某些通用属性变化时，可以通过属性动画实现渐变效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。 + > **说明：** > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。 - -| 接口名称 | 功能描述 | -| ------------------------------ | ------------------------------------------------------------ | -| animation(value: AnimateParam) | 为组件添加动画属性，控制调用此属性的组件从一种状态到另一种状态的过渡效果。 | +animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void}) -## AnimateParam对象说明 +为组件添加属性动画，实现组件属性状态变化时的过渡动画效果。 -- 属性 +**参数：** -| 名称 | 参数类型 | 默认值 | 描述 | -| ---------- | ---------------------------------------- | --------------- | ----------------------- | -| duration | number | 1000 | 单位为毫秒，默认动画时长为1000毫秒。 | -| curve | [Curve](ts-appendix-enums.md#curve) | Curve.Linear | 默认曲线为线性。 | -| delay | number | 0 | 单位为毫秒，默认不延时播放。 | -| iterations | number | 1 | 默认播放一次，设置为-1时表示无限次播放。 | -| playMode | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | 设置动画播放模式，默认播放完成后重头开始播放。 | +| 名称 | 参数类型 | 必填 | 描述 | +| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| duration | number | 否 | 设置动画时长。单位为毫秒，默认动画时长为1000毫秒。
默认值：1000 | +| tempo | number | 否 | 动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢
值为0时，表示不存在动画。
默认值：1 | +| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve9+ | 否 | 设置动画曲线。默认曲线为线性。
默认值：Curve.Linear | +| delay | number | 否 | 设置动画延迟执行的时长。单位为毫秒，默认不延时播放。
默认值：0 | +| iterations | number | 否 | 设置播放次数。默认播放一次，设置为-1时表示无限次播放。
默认值：1 | +| playMode | [PlayMode](ts-appendix-enums.md#playmode) | 否 | 设置动画播放模式，默认播放完成后重头开始播放。
默认值：PlayMode.Normal | +| onFinish | () => void | 否 | 状态回调，动画播放完成时触发。 | ## 示例 @@ -30,9 +30,9 @@ @Entry @Component struct AttrAnimationExample { - @State widthSize: number = 200 - @State heightSize: number = 100 - @State flag: boolean = true + @State widthSize: number = 200; + @State heightSize: number = 100; + @State flag: boolean = true; build() { Column() { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md index 06e6e577f758bfe0020a84625bc793e7a35aeb07..4e4a7386adb5156e7e7cb6b3d46dee72e7c10f36 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -100,10 +100,12 @@ ## FillMode -| 名称 | 描述 | -| -------- | -------------------------------- | -| None | 播放完成后恢复初始状态。 | -| Forwards | 播放完成后保持动画结束时的状态。 | +| 名称 | 描述 | +| --------- | ------------------------------------------------------------ | +| None | 动画未执行时不会将任何样式应用于目标，动画播放完成之后恢复初始默认状态。 | +| Forwards | 目标将保留动画执行期间最后一个关键帧的状态。 | +| Backwards | 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在delay期间保留此值。第一个关键帧取决于playMode，playMode为Normal或Alternate时为from的状态，playMode为Reverse或AlternateReverse时为to的状态。 | +| Both | 动画将遵循Forwards和Backwards的规则，从而在两个方向上扩展动画属性。 | ## PlayMode diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md index 00e0be6eb07b133fb74bba702d4e1a3443c7b221..3c96c392dd9fa0d4fe2c62d39799e1ea793a74f9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md @@ -1,15 +1,10 @@ # Blank -> **说明：** -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。 - -## 权限列表 - -无 +> **说明：** +> +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -19,23 +14,21 @@ ## 接口 -Blank(min?: Length) +Blank(min?: number | string) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | min | [Length](../../ui/ts-types.md) | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 | +**参数：** +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| min | number \| string | 否 | 空白填充组件在容器主轴上的最小大小。
默认值：0 | ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| color | [ResourceColor](../../ui/ts-types.md) | 0xffffff | 设置空白填充的填充颜色。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -> **说明：** -> -> - 不支持通用属性方法。 +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| color | [ResourceColor](../../ui/ts-types.md) | 设置空白填充的填充颜色。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md index b49d1b2d32db61963199b0015df186731474419c..b6e9697ca697ad41c59116ed8b9137f9ddd5d931 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md @@ -35,10 +35,10 @@ Checkbox( name?: string, group?: string ) ## 事件 -| 名称 | 功能描述 | +| 名称 | 功能描述 | | ----------| -------- | -|onChange(callback: (value: boolean) => void) | 当选中状态发生变化时，触发该回调。
- value为true时，表示已选中。
- value为false时，表示未选中。 | - +|onChange(callback: (value: boolean) => void) | 当选中状态发生变化时，触发该回调。
- value为true时，表示已选中。
- value为false时，表示未选中。 | + ## 示例 ```ts diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md index 6cd0eebd5a0b6eb2dc0268753b90da237a334f80..51a10ae1059e5c0912a6aaf10b90299aeddb49a3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md @@ -1,15 +1,10 @@ # Divider -> **说明：** -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 提供分隔器组件，分隔不同内容块/内容元素。 - -## 权限列表 - -无 +> **说明：** +> +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -21,15 +16,16 @@ Divider() - ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| vertical | boolean | false | 使用水平分割线还是垂直分割线。false：水平分割线；true：垂直分割线。 | -| color | [ResourceColor](../../ui/ts-types.md) | - | 分割线颜色。 | -| strokeWidth | [Length](../../ui/ts-types.md) | 1 | 分割线宽度。 | -| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 分割线的端点样式。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| vertical | boolean | 使用水平分割线还是垂直分割线。false：水平分割线；true：垂直分割线。
默认值：false | +| color | [ResourceColor](../../ui/ts-types.md) | 分割线颜色。 | +| strokeWidth | number \| string | 分割线宽度。
默认值：1 | +| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 分割线的端点样式。
默认值：LineCapStyle.Butt | ## 事件 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md index 34e32fe07d08622d06df3b80f59c460cd2a0ad86..3d4888d0653b82f056d18bcc31b7c44fb5bbb697 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md @@ -1,16 +1,11 @@ # Gauge - -> **说明：** -> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 数据量规图表组件，用于将数据展示为环形图表。 -## 权限列表 - -无 +> **说明：** +> +> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -22,36 +17,38 @@ Gauge(options:{value: number, min?: number, max?: number}) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | value | number | 是 | - | 当前数据值。 | - | min | number | 否 | 0 | 当前数据段最小值。 | - | max | number | 否 | 100 | 当前数据段最大值。 | +**参数：** +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| value | number | 是 | 当前数据值。 | +| min | number | 否 | 当前数据段最小值。
默认值：0 | +| max | number | 否 | 当前数据段最大值。
默认值：100 | ## 属性 - | 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| value | number | 0 | 设置当前数据图表的值。 | -| startAngle | number | -150 | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。 | -| endAngle | number | 150 | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。 | -| colors | Array<ColorStop> | - | 设置图表的颜色，支持分段颜色设置。 | -| strokeWidth | Length | - | 设置环形图表的环形厚度。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| value | number | 设置当前数据图表的值。
默认值：0 | +| startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。
默认值：-150 | +| endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。
默认值：150 | +| colors | Array<ColorStop> | 设置图表的颜色，支持分段颜色设置。 | +| strokeWidth | Length | 设置环形图表的环形厚度。 | ## ColorStop 颜色断点类型，用于描述渐进色颜色断点。 -| 名称 | 类型定义 | 描述 | -| --------- | -------------------- | ------------------------------------------------------------ | -| ColorStop | [ResourceColor](../../ui/ts-types.md#resourcecolor8), number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 | +| 名称 | 类型定义 | 描述 | +| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| ColorStop | [[ResourceColor](../../ui/ts-types.md#resourcecolor8), number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 | ## 示例 - + ```ts // xxx.ets @Entry diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md index aa9037ff771aff36d33a0f710f287b314346924d..0979fca78aac5b4a7ba3118db84dcfcc788e3d42 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -3,6 +3,7 @@ 图片组件，支持本地图片和网络图片的渲染展示。 > **说明：** +> > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -34,31 +35,32 @@ Image(src: string | PixelMap | Resource) **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | -| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](../../ui/ts-types.md#resource类型) | 是 | - | 图片的数据源，支持本地图片和网络图片。
当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。
\- 支持的图片格式包括png、jpg、bmp、svg和gif。
\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。
\- 支持`dataability://`路径前缀的字符串，用于访问通过data ability提供的图片路径。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](../../ui/ts-types.md#resource类型) | 是 | 图片的数据源，支持本地图片和网络图片。
当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持跨包/跨模块调用该Image组件，建议使用`$r`方式来管理需全局使用的图片资源。
\- 支持的图片格式包括png、jpg、bmp、svg和gif。
\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。
\- 支持`dataability://`路径前缀的字符串，用于访问通过data ability提供的图片路径。 | ## 属性 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 名称 | 参数类型 | 默认值 | 描述 | -| --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ | -| alt | string \| [Resource](../../ui/ts-types.md#resource类型) | - | 加载时显示的占位图，支持本地图片和网络图片。 | -| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | ImageFit.Cover | 设置图片的缩放类型。 | -| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | 设置图片的重复样式。
> **说明：**
> - svg类型图源不支持该属性。 | -| interpolation | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。
> **说明：**
> - svg类型图源不支持该属性。
> - PixelMap资源不支持该属性。 | -| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | 设置图片渲染的模式。
> **说明：**
> - svg类型图源不支持该属性。 | -| sourceSize | {
width: number,
height: number
} | - | 设置图片裁剪尺寸，将原始图片解码成pixelMap，指定尺寸的图片，单位为px。
> **说明：**
> PixelMap资源不支持该属性。 | -| matchTextDirection | boolean | false | 设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。 | -| fitOriginalSize | boolean | true | 图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。 | -| fillColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | - | 仅对svg图源生效，设置后会替换svg图片的fill颜色。 | -| autoResize | boolean | true | 是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。 | -| syncLoad8+ | boolean | false | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。 | -| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | CopyOptions.None | 设置图片是否可复制（SVG图片不支持复制）。
当设置copyOption为非CopyOptions.None时，支持快捷组合键'CTRL+C'进行复制。 | -| colorFilter9+ | [ColorFilter](../../ui/ts-types.md#colorfilter9) | - | 给图像设置颜色滤镜效果。 | +| 名称 | 参数类型 | 描述 | +| --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ | +| alt | string \| [Resource](../../ui/ts-types.md#resource类型) | 加载时显示的占位图，支持本地图片和网络图片。 | +| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 设置图片的缩放类型。
默认值：ImageFit.Cover | +| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | 设置图片的重复样式。
默认值：NoRepeat
**说明：**
svg类型图源不支持该属性。 | +| interpolation | [ImageInterpolation](#imageinterpolation) | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。
默认值：ImageInterpolation.None
**说明：**
svg类型图源不支持该属性。
PixelMap资源不支持该属性。 | +| renderMode | [ImageRenderMode](#imagerendermode) | 设置图片渲染的模式。
默认值：ImageRenderMode.Original
**说明：**
svg类型图源不支持该属性。 | +| sourceSize | {
width: number,
height: number
} | 设置图片裁剪尺寸，将原始图片解码成pixelMap，指定尺寸的图片，单位为px。
**说明：**
PixelMap资源不支持该属性。 | +| matchTextDirection | boolean | 设置图片是否跟随系统语言方向，在RTL语言环境下显示镜像翻转显示效果。
默认值：false | +| fitOriginalSize | boolean | 图片组件尺寸未设置时，其显示尺寸是否跟随图源尺寸。
默认值：true | +| fillColor | [ResourceColor](../../ui/ts-types.md#resourcecolor8) | 填充颜色。设置的填充颜色会覆盖在图片上。仅对svg图源生效，设置后会替换svg图片的fill颜色。 | +| autoResize | boolean | 是否需要在图片解码过程中对图源做resize操作，该操作会根据显示区域的尺寸决定用于绘制的图源尺寸，有利于减少内存占用。
默认值：true | +| syncLoad8+ | boolean | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。
默认值：false | +| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置图片是否可复制（SVG图片不支持复制）。
当copyOption设置为非CopyOptions.None时，支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。
默认值：CopyOptions.None | +| colorFilter9+ | [ColorFilter](../../ui/ts-types.md#colorfilter9) | 给图像设置颜色滤镜效果。 | > **说明：** +> > 使用快捷组合键对Image组件复制的前提是，该组件必须处于获焦状态。将Image组件的属性focusable设置为true，即可使用TAB键将焦点切换到Image组件上，再将Image组件的focusOnTouch属性设置为true，即可实现点击获焦。 ### ImageInterpolation diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md index ea8b2dee5d36c34a6390f4194c5635ba2506ad77..c2804ee0d0a49aff0cf6f331d1b05f5fda9c139f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md @@ -1,15 +1,10 @@ # Navigation -> **说明：** -> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。 - -## 权限列表 - -无 +> **说明：** +> +> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -23,43 +18,47 @@ Navigation() 创建可以根据属性设置，自动展示导航栏、标题、工具栏的组件。 - ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- | -| title | string \| [CustomBuilder](../../ui/ts-types.md) | - | 页面标题。 | -| subTitle | string | - | 页面副标题。 | -| menus | Array8+ | - | 页面右上角菜单。 | -| titleMode | NavigationTitleMode | NavigationTitleMode.Free | 页面标题栏显示模式。 | -| toolBar | {
items:Array<Object> }
\| [CustomBuilder](../../ui/ts-types.md#custombuilder8)8+ | - | 设置工具栏内容。
items: 工具栏所有项。 | -| hideToolBar | boolean | false | 设置隐藏/显示工具栏：
true: 隐藏工具栏。
false: 显示工具栏。 | -| hideTitleBar | boolean | false | 隐藏标题栏。 | -| hideBackButton | boolean | false | 隐藏返回键。 | - -- NavigationMenuItem类型接口说明 - | 名称 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ----------------------- | ---- | ---- | --------------- | - | value | string | 是 | - | 菜单栏单个选项的显示文本。 | - | icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 | - | action | () => void | 否 | - | 当前选项被选中的事件回调。 | - -- Object类型说明 - | 名称 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ----------------------- | ---- | ---- | --------------- | - | value | string | 是 | - | 工具栏单个选项的显示文本。 | - | icon | string | 否 | - | 工具栏单个选项的图标资源路径。 | - | action | () => void | 否 | - | 当前选项被选中的事件回调。 | - -- NavigationTitleMode枚举说明 - | 名称 | 描述 | - | ---- | ---------------------------------------- | - | Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 | - | Mini | 固定为小标题模式（图标+主副标题）。 | - | Full | 固定为大标题模式（主副标题）。 | - - > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** - > 目前可滚动组件只支持List。 +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 名称 | 参数类型 | 描述 | +| -------------- | ---------------------------------------- | ---------------------------------------- | +| title | string \| [CustomBuilder](../../ui/ts-types.md) | 页面标题。 | +| subTitle | string | 页面副标题。 | +| menus | Array8+ | 页面右上角菜单。 | +| titleMode | NavigationTitleMode | 页面标题栏显示模式。
默认值：NavigationTitleMode.Free | +| toolBar | object \| [CustomBuilder](../../ui/ts-types.md#custombuilder8)8+ | 设置工具栏内容。
items: 工具栏所有项。 | +| hideToolBar | boolean | 设置隐藏/显示工具栏：
默认值：false
true: 隐藏工具栏。
false: 显示工具栏。 | +| hideTitleBar | boolean | 隐藏标题栏。
默认值：false | +| hideBackButton | boolean | 隐藏返回键。
默认值：false | + +## NavigationMenuItem类型说明 + +| 名称 | 类型 | 必填 | 描述 | +| ------ | ----------------------- | ---- | ------------------------------ | +| value | string | 是 | 菜单栏单个选项的显示文本。 | +| icon | string | 否 | 菜单栏单个选项的图标资源路径。 | +| action | () => void | 否 | 当前选项被选中的事件回调。 | + +## object类型说明 + +| 名称 | 类型 | 必填 | 描述 | +| ------ | ----------------------- | ---- | ------------------------------ | +| value | string | 是 | 工具栏单个选项的显示文本。 | +| icon | string | 否 | 工具栏单个选项的图标资源路径。 | +| action | () => void | 否 | 当前选项被选中的事件回调。 | + +## NavigationTitleMode枚举说明 + +| 名称 | 描述 | +| ---- | ---------------------------------------- | +| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 | +| Mini | 固定为小标题模式（图标+主副标题）。 | +| Full | 固定为大标题模式（主副标题）。 | + +> **说明：** +> 目前可滚动组件只支持List。 ## 事件 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md index 8304c92ce527e1de3ab9a925145469a0440fc648..95099d70d17963958d6d4dd65c2505cc34bde389 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md @@ -6,10 +6,6 @@ > > 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - ## 子组件 无 @@ -18,29 +14,31 @@ PatternLock(controller?: PatternLockController) -- 参数 +**参数:** - | 参数名 | 参数类型 | 必填 | 默认值 | 描述 | - | ---------- | ---------------------------------------- | ---- | ---- | ---------------------- | - | controller | [PatternLockController](#patternlockcontroller) | 否 | null | 给组件绑定一个控制器，用来控制组件状态重置。 | +| 参数名 | 参数类型 | 必填 | 描述 | +| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | +| controller | [PatternLockController](#patternlockcontroller) | 否 | 给组件绑定一个控制器，用来控制组件状态重置。
默认值：null | ## 属性 不支持`backgroundColor`以外的通用属性设置。 -| 名称 | 参数类型 | 默认值 | 描述 | -| --------------- | ------------------------------------- | ----------- | ---------------------------------------- | -| sideLength | Length | 300vp | 设置组件的宽度和高度（相同值）。最小可以设置为0。 | -| circleRadius | Length | 14vp | 设置宫格圆点的半径。 | -| regularColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。 | -| selectedColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。 | -| activeColor | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。 | -| pathColor | [ResourceColor](../../ui/ts-types.md) | Color.Blue | 设置连线的颜色。 | -| pathStrokeWidth | Length | 34vp | 设置连线的宽度。最小可以设置为0。 | -| autoReset | boolean | true | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。 | +| 名称 | 参数类型 | 描述 | +| --------------- | ------------------------------------- | ------------------------------------------------------------ | +| sideLength | [Length](../../ui/ts-types.md) | 设置组件的宽度和高度（相同值）。最小可以设置为0。
默认值：300vp | +| circleRadius | [Length](../../ui/ts-types.md) | 设置宫格圆点的半径。
默认值：14vp | +| regularColor | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“未选中”状态的填充颜色。
默认值：Color.Black | +| selectedColor | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“选中”状态的填充颜色。
默认值：Color.Black | +| activeColor | [ResourceColor](../../ui/ts-types.md) | 设置宫格圆点在“激活”状态的填充颜色。
默认值：Color.Black | +| pathColor | [ResourceColor](../../ui/ts-types.md) | 设置连线的颜色。
默认值：Color.Blue | +| pathStrokeWidth | number \| string | 设置连线的宽度。最小可以设置为0。
默认值：34vp | +| autoReset | boolean | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。
默认值：true | ## 事件 +除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： + | 名称 | 描述 | | ---------------------------------------- | ---------------------------------------- | | onPatternComplete(callback: (input: Array\) => void) | 密码输入结束时被调用的回调函数。
input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0到8）。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md index 38c27d02c40e761ad131116dda66b4decd4af073..58125935b9114b90b4bc23b1e5e37eaadf55de79 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md @@ -1,5 +1,7 @@ # PluginComponent +提供外部应用组件嵌入式显示功能，即外部应用提供的UI可在本应用内显示。 + > **说明：** > @@ -8,14 +10,6 @@ > - 本组件为系统接口。 -提供外部应用组件嵌入式显示功能，即外部应用提供的UI可在本应用内显示。 - - -## 权限列表 - -无 - - ## 子组件 无 @@ -23,20 +17,22 @@ ## 接口 -PluginComponent(value: { template: PluginComponentTemplate, data: any }) +PluginComponent(value: { template: PluginComponentTemplate, data: KVObject}) 创建插件组件，用于显示外部应用提供的UI。 -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | - | value | {
template: PluginComponentTemplate,
data: KVObject
} | 是 | - | template:  组件模板，用于跟提供者定义的组件绑定。
data: 传给插件组件提供者使用的数据。 | +**参数：** -- PluginComponentTemplate类型说明 - | 参数 | 类型 | 描述 | - | ------- | ------ | ----------------------- | - | source | string | 组件模板名。 | - | ability | string | 提供者Ability的abilityname。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| value | {
template: PluginComponentTemplate,
data: KVObject
} | 是 | template:  组件模板，用于跟提供者定义的组件绑定。
data: 传给插件组件提供者使用的数据。 | + +## PluginComponentTemplate类型说明 + +| 参数 | 类型 | 描述 | +| ------- | ------ | ----------------------- | +| source | string | 组件模板名。 | +| ability | string | 提供者Ability的abilityname。 | ## 事件 @@ -66,24 +62,25 @@ push(param: PushParameters, callback: AsyncCallback<void>): void 组件提供者向组件使用者主动发送组件与数据。 +**参数** + +| 参数名 | 类型 | 必填 | 说明 | +| -------- | ------------------------- | ---- | -------------------------------- | +| param | PushParameters | 是 | 组件使用者的详细信息，详见PushParameters参数说明。 | +| callback | AsyncCallback<void> | 是 | 此次接口调用的异步回调。 | -- 参数 - | 参数名 | 类型 | 必填 | 说明 | - | -------- | ------------------------- | ---- | -------------------------------- | - | param | PushParameters | 是 | 组件使用者的详细信息，详见PushParameters参数说明。 | - | callback | AsyncCallback<void> | 是 | 此次接口调用的异步回调。 | +**PushParameters参数说明** -- PushParameters参数说明 - | 参数名 | 类型 | 必填 | 说明 | - | --------- | -------- | ---- | --------------- | - | want | Want | 是 | 组件使用者Ability信息。 | - | name | string | 是 | 组件名称。 | - | data | KVObject | 否 | 组件数据值。 | - | extraData | KVObject | 否 | 附加数据值。 | +| 参数名 | 类型 | 必填 | 说明 | +| --------- | -------- | ---- | --------------- | +| want | Want | 是 | 组件使用者Ability信息。 | +| name | string | 是 | 组件名称。 | +| data | KVObject | 否 | 组件数据值。 | +| extraData | KVObject | 否 | 附加数据值。 | -- 示例 +**示例** - 见[Plugin组件提供方](#组件提供方)示例。 +见[Plugin组件提供方](#组件提供方)示例。 ## request @@ -92,35 +89,38 @@ request(param: RequestParameters, callback: AsyncCallback<RequestCallbackPara 组件使用者向组件提供者主动请求组件。 -- 参数 - | 参数名 | 类型 | 必填 | 说明 | - | -------- | ---------------------------------------- | ---- | ------------------------------------ | - | param | RequestParameters | 是 | 组件模板的详细请求信息，详见RequestParameters参数说明。 | - | callback | AsyncCallback"push”：指组件提供者向使用者主动推送数据。
"request”：指组件使用者向提供者主动请求数据。 | - | callback | OnPushEventCallback \| OnRequestEventCallback | 是 | 见callback事件说明。 | +**参数** + +| 参数名 | 类型 | 必填 | 说明 | +| --------- | ---------------------------------------- | ---- | ---------------------------------------- | +| eventType | string | 是 | 监听的事件类型， 可选值为："push" 、"request"。
"push”：指组件提供者向使用者主动推送数据。
"request”：指组件使用者向提供者主动请求数据。 | +| callback | OnPushEventCallback \| OnRequestEventCallback | 是 | 见callback事件说明。 | + +**callback事件说明** + +| 参数名 | 类型 | 说明 | +| ---------------------- | ---------------------------------------- | ---------------------------------------- | +| OnRequestEventCallback | (source: Want,
name: string,
data: KVObject ) =>RequestEventResult | 数据请求事件的回调。
source: 组件请求方Ability信息。
name: 请求组件名称。
data: 附加数据。
返回值： 请求数据结果。 | +| OnPushEventCallback | (source: Want,
template: PluginComponentTemplate,
data: KVObject,
extraData: KVObject
) => void | 接收提供者主动推送的数据。
source: 组件提供者Ability信息。
template: 组件模板。
data: 组件更新数据。
extraData: 附加数据。 | -- callback事件说明 - | 参数名 | 类型 | 说明 | - | ---------------------- | ---------------------------------------- | ---------------------------------------- | - | OnRequestEventCallback | (source: Want,
name: string,
data: KVObject ) =>RequestEventResult | 数据请求事件的回调。
source: 组件请求方Ability信息。
name: 请求组件名称。
data: 附加数据。
返回值： 请求数据结果。 | - | OnPushEventCallback | (source: Want,
template: PluginComponentTemplate,
data: KVObject,
extraData: KVObject
) => void | 接收提供者主动推送的数据。
source: 组件提供者Ability信息。
template: 组件模板。
data: 组件更新数据。
extraData: 附加数据。 | +**RequestEventResult类型说明** -- RequestEventResult类型说明 - | 参数 | 类型 | 说明 | - | --------- | -------- | ----- | - | template | string | 组件名称。 | - | data | KVObject | 组件数据。 | - | extraData | KVObjec | 附加数据。 | +| 参数 | 类型 | 说明 | +| --------- | -------- | ---------- | +| template | string | 组件名称。 | +| data | KVObject | 组件数据。 | +| extraData | KVObject | 附加数据。 | -- 示例 +**示例** - 见[Plugin组件工具](#Plugin组件工具)示例。 +见[Plugin组件工具](#plugin组件工具)示例。 ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md index d88b30a0810742301790fb8fec397d7dddef9792..ea1c55e0a4878d7f963a93c9ed486807639c5ab9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -1,15 +1,10 @@ # Progress -> **说明：** -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 进度条，用于显示内容加载或操作处理进度。 - -## 权限列表 - -无 +> **说明：** +> +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -23,31 +18,33 @@ Progress(options: {value: number, total?: number, type?: ProgressType}) 创建进度组件，用于显示内容加载或操作处理进度。 -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | value | number | 是 | - | 指定当前进度值。 | - | total | number | 否 | 100 | 指定进度总长。 | - | type | ProgressType | 否 | ProgressType.Linear | 指定进度条样式。 | +**参数:** +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| value | number | 是 | 指定当前进度值。 | +| total | number | 否 | 指定进度总长。
默认值：100 | +| type | ProgressType | 否 | 指定进度条样式。
默认值：ProgressType.Linear | -- ProgressType枚举说明 - | 名称 | 描述 | - | -------- | -------- | - | Linear8+ | 线性样式。 | - | Ring8+ | 环形无刻度样式，环形圆环逐渐填充完成过程。 | - | Eclipse8+ | 圆形样式，展现类似月圆月缺的进度展示效果，从月牙逐渐到满月的这个过程代表了下载的进度。 | - | ScaleRing8+ | 环形有刻度样式，类似时钟刻度形式加载进度。 | - | Capsule8+ | 胶囊样式，头尾两端处，进度条由弧形变成直线和直线变成弧形的过程；中段处，进度条正常往右走的过程。 | +## ProgressType枚举说明 +| 名称 | 描述 | +| -------- | -------- | +| Linear8+ | 线性样式。 | +| Ring8+ | 环形无刻度样式，环形圆环逐渐填充完成过程。 | +| Eclipse8+ | 圆形样式，展现类似月圆月缺的进度展示效果，从月牙逐渐到满月的这个过程代表了下载的进度。 | +| ScaleRing8+ | 环形有刻度样式，类似时钟刻度形式加载进度。 | +| Capsule8+ | 胶囊样式，头尾两端处，进度条由弧形变成直线和直线变成弧形的过程；中段处，进度条正常往右走的过程。 | ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| value | number | - | 设置当前进度值。 | -| color | [ResourceColor](../../ui/ts-types.md) | - | 设置进度条前景色。 | -| style8+ | {
strokeWidth？: Length,
scaleCount？: number,
scaleWidth？: Length
} | - | 定义组件的样式。
strokeWidth: 设置进度条宽度。
scaleCount: 设置环形进度条总刻度数。
scaleWidth: 设置环形进度条刻度粗细。
刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| value | number | 设置当前进度值。 | +| color | [ResourceColor](../../ui/ts-types.md) | 设置进度条前景色。 | +| style8+ | {
strokeWidth?: [Length](../../ui/ts-types.md),
scaleCount?: number,
scaleWidth?: [Length](../../ui/ts-types.md)
} | 定义组件的样式。
strokeWidth: 设置进度条宽度。
scaleCount: 设置环形进度条总刻度数。
scaleWidth: 设置环形进度条刻度粗细。刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md index 718c4190f8f189d9fe7aaf3ccd7d317f8bbb112a..b988fa3483cdcd60f07edfa57da9e55dec6579db 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md @@ -6,11 +6,6 @@ > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 子组件 无 @@ -20,23 +15,25 @@ QRCode(value: string) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | value | string | 是 | - | 二维码内容字符串。 | +**参数:** +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| value | string | 是 | 二维码内容字符串。 | ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| color | [ResourceColor](../../ui/ts-types.md) | Black | 设置二维码颜色。 | -| backgroundColor | [ResourceColor](../../ui/ts-types.md) | - | 设置二维码背景颜色。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性。 + +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| color | [ResourceColor](../../ui/ts-types.md) | 设置二维码颜色。
默认值：Color.Black | +| backgroundColor | [ResourceColor](../../ui/ts-types.md) | 设置二维码背景颜色。
默认值：Color.White | ## 事件 -通用事件仅支持点击事件。 +通用事件仅支持[点击事件](ts-universal-events-click.md)。 ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md index 50e25d07d62c1e3cd2713e5934bc9bf1b4dc65e9..76bc6a9a644384009be751b746e26b00df26f6c8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md @@ -1,15 +1,10 @@ # Radio -> **说明：** -> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 单选框，提供相应的用户交互选择项。 - -## 权限列表 - -无 +> **说明：** +> +> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -21,23 +16,26 @@ Radio(options: {value: string, group: string}) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | value | string | 是 | - | 当前单选框的值。| - | group | string | 是 | - | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。| +**参数:** +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| value | string | 是 | 当前单选框的值。| +| group | string | 是 | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。| ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| checked | boolean | false | 设置单选框的选中状态。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| checked | boolean | 设置单选框的选中状态。
默认值：false | ## 事件 -| 名称 | 功能描述 | +除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： + +| 名称 | 功能描述 | | -------- | -------- | | onChange(callback: (isChecked: boolean) => void) | 单选框选中状态改变时触发回调。
-isChecked为true时，代表选中。
-isChecked为false时，代表未选中。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md index 592794f56fba504cbc43a3d25493671a895cd097..d4d84906cfa565b8ab0d68c46feab435ec241385 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md @@ -1,15 +1,11 @@ # Search +提供搜索框组件，用于提供用户搜索内容的输入区域。 + > **说明：** > > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -提供搜索框组件，用于提供用户搜索内容的输入区域。 - -## 权限列表 - -无 - ## 子组件 无 @@ -18,25 +14,27 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController }) -- 参数 - - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ----------- | ---------------- | ---- | ---- | ---------------------------------------- | - | value | string | 否 | - | 搜索文本值。 | - | placeholder | string | 否 | - | 无输入时的提示文本。 | - | icon | string | 否 | - | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg, jpg和png。 | - | controller | SearchController | 否 | - | 控制器。 | +**参数:** +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ----------- | ---------------- | ---- | ------------------------------------------------------------ | +| value | string | 否 | 搜索文本值。 | +| placeholder | string | 否 | 无输入时的提示文本。 | +| icon | string | 否 | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg、jpg和png。 | +| controller | SearchController | 否 | 控制器。 | ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| ----------------------- | ---------------------------------------- | ---- | --------------------- | -| searchButton | string | 无 | 搜索框末尾搜索按钮文本值，默认无搜索按钮。 | -| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | 设置placeholder颜色。 | -| placeholderFont | [Font](../../ui/ts-types.md) | - | 设置placeholder文本样式。 | -| textFont | [Font](../../ui/ts-types.md) | - | 设置搜索框内文本样式。 | -| copyOption9+ | [CopyOptions](ts-basic-components-text.md) | CopyOptions.CrossDevice | 设置文本是否可复制。 | +除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： + +| 名称 | 参数类型 | 描述 | +| ----------------------- | ------------------------------------------------ | ---------------------------------------------- | +| searchButton | string | 搜索框末尾搜索按钮文本值，默认无搜索按钮。 | +| placeholderColor | [ResourceColor](../../ui/ts-types.md) | 设置placeholder颜色。 | +| placeholderFont | [Font](../../ui/ts-types.md) | 设置placeholder文本样式。 | +| textFont | [Font](../../ui/ts-types.md) | 设置搜索框内文本样式。 | +| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 | +| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本对齐方式。
默认值：TextAlign.Start | ## 事件 @@ -62,13 +60,11 @@ caretPosition(value: number): void 设置输入光标的位置。 -- 参数 - - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ----- | ------ | ---- | ---- | ----------------- | - | value | number | 是 | - | 从字符串开始到光标所在位置的长度。 | - +**参数:** +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ------ | -------- | ---- | ---------------------------------- | +| value | number | 是 | 从字符串开始到光标所在位置的长度。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index 09d867d0b3825905de493f91e47661ecaf5027b5..ddb27a0046f8b74170fa10a63cf0512c105ec2e1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -3,12 +3,8 @@ 可以输入单行文本并支持响应输入事件的组件。 > **说明：** -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -20,53 +16,58 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController}) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ----------------------- | ---------------------------------------- | ---- | ---- | --------------- | - | placeholder | [ResourceStr](../../ui/ts-types.md) | 否 | - | 无输入时的提示文本。 | - | text | [ResourceStr](../../ui/ts-types.md) | 否 | - | 设置输入框当前的文本内容。 | - | controller8+ | [TextInputController](#textinputcontroller8) | 否 | - | 设置TextInput控制器。 | +**参数:** + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ----------------------- | ---------------------------------------- | ---- | --------------- | +| placeholder | [ResourceStr](../../ui/ts-types.md) | 否 | 无输入时的提示文本。 | +| text | [ResourceStr](../../ui/ts-types.md) | 否 | 设置输入框当前的文本内容。 | +| controller8+ | [TextInputController](#textinputcontroller8) | 否 | 设置TextInput控制器。 | ## 属性 除支持通用属性外，还支持以下属性： -| 名称 | 参数类型 | 默认值 | 描述 | -| ------------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | -| type | InputType | InputType.Normal | 设置输入框类型。 | -| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | 设置placeholder颜色。| -| placeholderFont | {
size?: Length,
weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),
family?: string,
style?: [FontStyle](ts-universal-attributes-text-style.md)
} | - | 设置placeholder文本样式：
- size: 设置文本尺寸，Length为number类型时，使用fp单位。
- weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
- family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
- style: 设置文本的字体样式。 | -| enterKeyType | EnterKeyType | EnterKeyType.Done | 设置输入法回车键类型。 | -| caretColor | [ResourceColor](../../ui/ts-types.md) | - | 设置输入框光标颜色。 | -| maxLength | number | - | 设置文本的最大输入字符数。 | -| inputFilter8+ | {
value: [ResourceStr](../../ui/ts-types.md)8+,
error?: (value: string) => void
} | - | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。
- value：设置正则表达式。
- error：正则匹配失败时，返回被忽略的内容。 | -| copyOption9+ | [CopyOptions](ts-basic-components-text.md) | CopyOptions.CrossDevice | 设置文本是否可复制。 | -| showPasswordIcon9+ | boolean | true | 密码输入模式时，密码框末尾的图标是否显示。 | -| style9+ | TextInputStyle | Default | TextInput风格。 | - -- EnterKeyType枚举说明 - | 名称 | 描述 | - | ------------------- | --------- | - | Go | 显示Go文本。 | - | Search | 显示为搜索样式。 | - | Send | 显示为发送样式。 | - | Next | 显示为下一个样式。 | - | Done | 标准样式。 | - -- InputType枚举说明 - | 名称 | 描述 | - | ------------------ | ------------- | - | Normal | 基本输入模式。 | - | Password | 密码输入模式。 | - | Email | e-mail地址输入模式。 | - | Number | 纯数字输入模式。 | - -- TextInputStyle枚举说明 - | 名称 | 描述 | - | ------------------ | ------------- | - | Default | 默认风格，光标宽1.5vp，光标高度和字体大小高度相关，字体越大光标越高。 | - | Inline | 内联输入风格。文字选中时底板与输入框同高。 | +| 名称 | 参数类型 | 描述 | +| ------------------------ | ---------------------------------------- | ---------------------------------------- | +| type | InputType | 设置输入框类型。
默认值：InputType.Normal | +| placeholderColor | [ResourceColor](../../ui/ts-types.md) | 设置placeholder颜色。| +| placeholderFont | {
size?: Length,
weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),
family?: string,
style?: [FontStyle](ts-universal-attributes-text-style.md)
} | 设置placeholder文本样式：
- size: 设置文本尺寸，Length为number类型时，使用fp单位。
- weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
- family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
- style: 设置文本的字体样式。 | +| enterKeyType | EnterKeyType | 设置输入法回车键类型。
默认值：EnterKeyType.Done | +| caretColor | [ResourceColor](../../ui/ts-types.md) | 设置输入框光标颜色。 | +| maxLength | number | 设置文本的最大输入字符数。 | +| inputFilter8+ | {
value: [ResourceStr](../../ui/ts-types.md)8+,
error?: (value: string) => void
} | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。
- value：设置正则表达式。
- error：正则匹配失败时，返回被忽略的内容。 | +| copyOption9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 | +| showPasswordIcon9+ | boolean | 密码输入模式时，密码框末尾的图标是否显示。
默认值：true | +| style9+ | TextInputStyle | TextInput风格。
默认值：TextInputStyle.Default | + +## EnterKeyType枚举说明 + +| 名称 | 描述 | +| ------------------- | --------- | +| Go | 显示Go文本。 | +| Search | 显示为搜索样式。 | +| Send | 显示为发送样式。 | +| Next | 显示为下一个样式。 | +| Done | 标准样式。 | + +## InputType枚举说明 + +| 名称 | 描述 | +| ------------------ | ------------- | +| Normal | 基本输入模式。
支持输入数字、字母、下划线、空格、特殊字符。 | +| Password | 密码输入模式。 | +| Email | e-mail地址输入模式。 | +| Number | 纯数字输入模式。 | +| PhoneNumber9+ | 电话号码输入模式。
支持输入数字、+ 、-、*、#，长度不限。 | + +## TextInputStyle枚举说明 + +| 名称 | 描述 | +| ------------------ | ------------- | +| Default | 默认风格，光标宽1.5vp，光标高度和字体大小高度相关，字体越大光标越高。 | +| Inline | 内联输入风格。文字选中时底板与输入框同高。 | ## 事件 @@ -93,11 +94,12 @@ controller: TextInputController = new TextInputController() caretPosition(value: number): void 设置输入光标的位置。 -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | ----- | ------ | ---- | ---- | ---------------------------------------- | - | value | number | 是 | - | 从字符串开始到光标所在位置的字符长度。 | +**参数：** + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ------ | -------- | ---- | -------------------------------------- | +| value | number | 是 | 从字符串开始到光标所在位置的字符长度。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index a7c3dfcdc1f3cc8fc46e86a18b624e8dd66e2e19..41476d7640ba6fe6643d3655398baf4899c3d4cb 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -63,8 +63,8 @@ RenderingContextSettings(antialias?: boolean) @Entry @Component struct FillStyleExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -93,8 +93,8 @@ struct FillStyleExample { @Entry @Component struct LineWidthExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -123,8 +123,8 @@ struct LineWidthExample { @Entry @Component struct StrokeStyleExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -155,8 +155,8 @@ struct StrokeStyleExample { @Entry @Component struct LineCapExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -189,8 +189,8 @@ struct LineCapExample { @Entry @Component struct LineJoinExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -224,8 +224,8 @@ struct LineJoinExample { @Entry @Component struct MiterLimit { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -259,8 +259,8 @@ struct MiterLimit { @Entry @Component struct Fonts { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -289,8 +289,8 @@ struct Fonts { @Entry @Component struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -334,8 +334,8 @@ struct CanvasExample { @Entry @Component struct TextBaseline { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -379,8 +379,8 @@ struct TextBaseline { @Entry @Component struct GlobalAlpha { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -412,8 +412,8 @@ struct GlobalAlpha { @Entry @Component struct LineDashOffset { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -457,8 +457,8 @@ struct LineDashOffset { @Entry @Component struct GlobalCompositeOperation { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -527,8 +527,8 @@ struct ShadowBlur { @Entry @Component struct ShadowColor { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -559,8 +559,8 @@ struct ShadowColor { @Entry @Component struct ShadowOffsetX { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -592,8 +592,8 @@ struct ShadowOffsetX { @Entry @Component struct ShadowOffsetY { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -624,9 +624,9 @@ struct ShadowOffsetY { @Entry @Component struct ImageSmoothingEnabled { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg"); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -671,8 +671,8 @@ fillRect(x: number, y: number, w: number, h: number): void @Entry @Component struct FillRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -713,8 +713,8 @@ strokeRect(x: number, y: number, w: number, h: number): void @Entry @Component struct StrokeRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -754,8 +754,8 @@ clearRect(x: number, y: number, w: number, h: number): void @Entry @Component struct ClearRect { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -796,8 +796,8 @@ fillText(text: string, x: number, y: number): void @Entry @Component struct FillText { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -837,8 +837,8 @@ strokeText(text: string, x: number, y: number): void @Entry @Component struct StrokeText { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -886,8 +886,8 @@ measureText(text: string): TextMetrics @Entry @Component struct MeasureText { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) @@ -926,8 +926,8 @@ stroke(path?: Path2D): void @Entry @Component struct Stroke { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -963,8 +963,8 @@ beginPath(): void @Entry @Component struct BeginPath { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1008,8 +1008,8 @@ moveTo(x: number, y: number): void @Entry @Component struct MoveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1051,8 +1051,8 @@ lineTo(x: number, y: number): void @Entry @Component struct LineTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1088,8 +1088,8 @@ closePath(): void @Entry @Component struct ClosePath { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1133,9 +1133,9 @@ createPattern(image: ImageBitmap, repetition: string): void @Entry @Component struct CreatePattern { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) - private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg") + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg"); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1180,8 +1180,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, @Entry @Component struct BezierCurveTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1271,8 +1271,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, @Entry @Component struct Arc { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1316,8 +1316,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void @Entry @Component struct ArcTo { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1365,8 +1365,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number @Entry @Component struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1409,8 +1409,8 @@ rect(x: number, y: number, width: number, height: number): void @Entry @Component struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1444,8 +1444,8 @@ fill(): void @Entry @Component struct Fill { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1479,8 +1479,8 @@ clip(): void @Entry @Component struct Clip { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1522,8 +1522,8 @@ rotate(rotate: number): void @Entry @Component struct Rotate { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1563,8 +1563,8 @@ scale(x: number, y: number): void @Entry @Component struct Scale { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1616,8 +1616,8 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 @Entry @Component struct Transform { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1667,8 +1667,8 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform() @Entry @Component struct SetTransform { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1711,8 +1711,8 @@ translate(x: number, y: number): void @Entry @Component struct Translate { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1861,8 +1861,8 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY? @Entry @Component struct PutImageData { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1902,8 +1902,8 @@ restore(): void @Entry @Component struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1934,8 +1934,8 @@ save(): void @Entry @Component struct CanvasExample { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -1974,8 +1974,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void @Entry @Component struct CreateLinearGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -2023,8 +2023,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, @Entry @Component struct CreateRadialGradient { - private settings: RenderingContextSettings = new RenderingContextSettings(true) - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md index 730cff155083faed405c6e183082b61680b936e5..afb3ccd11dad9dcfa3c63aad1b1d3cab87e9f417 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md @@ -1,15 +1,10 @@ # Ellipse -> **说明：** -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 椭圆绘制组件。 - -## 权限列表 - -无 +> **说明：** +> +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 子组件 @@ -21,24 +16,21 @@ ellipse(options?: {width: Length, height: Length}) -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | options | Object | 否 | - | 见options参数说明。 | - -- options参数说明 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | width | Length | 是 | - | 宽度。 | - | height | Length | 是 | - | 高度。 | +**参数:** +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| width | string \| number | 是 | 宽度。
默认值：0 | +| height | string \| number | 是 | 高度。
默认值：0 | ## 属性 -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | -------- | -------- | -------- | -------- | -| width | Length | 0 | 否 | 椭圆所在矩形的宽度。 | -| height | Length | 0 | 否 | 椭圆所在矩形的高度。 | +仅支持以下属性： + +| 参数名称 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| width | Length | 否 | 椭圆所在矩形的宽度。 | +| height | Length | 否 | 椭圆所在矩形的高度。 | ## 示例 @@ -50,9 +42,9 @@ ellipse(options?: {width: Length, height: Length}) struct EllipseExample { build() { Flex({ justifyContent: FlexAlign.SpaceAround }) { - // 在一个 150 * 70 的矩形框中绘制一个椭圆 + // 在一个 150 * 80 的矩形框中绘制一个椭圆 Ellipse({ width: 150, height: 80 }) - // 在一个 150 * 70 的矩形框中绘制一个椭圆 + // 在一个 150 * 80 的矩形框中绘制一个椭圆 Ellipse().width(150).height(80) }.width('100%').margin({ top: 5 }) } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md index baf16cb7ff9ba8ed80e75e93ad5ef9eb8f344ec9..44c228b1138027ce4fca84c02a9a184db2ec6088 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md @@ -3,14 +3,10 @@ 路径绘制组件，根据绘制路径生成封闭的自定义形状。 > **说明：** +> > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 子组件 无 @@ -19,25 +15,23 @@ Path(value?: { width?: number | string; height?: number | string; commands?: string }) -- 参数 - - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | ---- | ------ | -------------------- | - | width | Length | 否 | 0 | 路径所在矩形的宽度 | - | height | Length | 否 | 0 | 路径所在矩形的高度 | - | commands | string | 是 | ‘ ’ | 路径绘制的命令字符串 | +**参数:** - +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | ---------------- | ---- | ----------------------------------- | +| width | number \| string | 否 | 路径所在矩形的宽度
默认值：0 | +| height | number \| string | 否 | 路径所在矩形的高度
默认值：0 | +| commands | string | 否 | 路径绘制的命令字符串
默认值：'' | ## 属性 -除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： +仅支持以下属性： -| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | -| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- | -| width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的宽度。 | -| height | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 路径所在矩形画布的高度。 | -| commands | string | '' | 是 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 | +| 参数名称 | 参数类型 | 必填 | 参数描述 | +| -------- | --------------------------------------- | ---- | ------------------------------------------------------------ | +| width | [Length](../../ui/ts-types.md#长度类型) | 否 | 路径所在矩形画布的宽度。
默认值：0 | +| height | [Length](../../ui/ts-types.md#长度类型) | 否 | 路径所在矩形画布的高度。
默认值：0 | +| commands | string | 是 | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。
默认值：'' | commands支持的绘制命令如下： diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md b/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md index ff1d5c1bc76628e30024bdb9a6944926efb12aa8..366ba2766ef1cbe2688625dc50de078d422a3d44 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md @@ -3,6 +3,7 @@ 可对图形进行平移、旋转和缩放等。 > **说明：** +> > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -13,125 +14,154 @@ import matrix4 from '@ohos.matrix4' ``` -## 权限列表 - -无 - - ## matrix4.init -init(array: Array<number>): Object +init(array: Array<number>): Matrix4Transit Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，矩阵为列优先。 +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------------- | ---- | ------------------------------------------------------------ | +| array | Array<number> | 是 | 参数为长度为16（4\*4）的number数组, 详情见参数描述。
默认值：
[1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | + +**返回值：** + +| 类型 | 说明 | +| -------------- | ---------------------------- | +| Matrix4Transit | 根据入参创建的四阶矩阵对象。 | + +**array参数说明：** + +| 参数名 | 类型 | 必填 | 说明 | +| ---- | ------ | ---- | -------------------- | +| m00 | number | 是 | x轴缩放值，单位矩阵默认为1。 | +| m01 | number | 是 | 第2个值，xyz轴旋转会影响这个值。 | +| m02 | number | 是 | 第3个值，xyz轴旋转会影响这个值。 | +| m03 | number | 是 | 无实际意义。 | +| m10 | number | 是 | 第5个值，xyz轴旋转会影响这个值。 | +| m11 | number | 是 | y轴缩放值，单位矩阵默认为1。 | +| m12 | number | 是 | 第7个值，xyz轴旋转会影响这个值。 | +| m13 | number | 是 | 无实际意义。 | +| m20 | number | 是 | 第9个值，xyz轴旋转会影响这个值。 | +| m21 | number | 是 | 第10个值，xyz轴旋转会影响这个值。 | +| m22 | number | 是 | z轴缩放值，单位矩阵默认为1。 | +| m23 | number | 是 | 无实际意义。 | +| m30 | number | 是 | x轴平移值，单位px，单位矩阵默认为0。 | +| m31 | number | 是 | y轴平移值，单位px，单位矩阵默认为0。 | +| m32 | number | 是 | z轴平移值，单位px，单位矩阵默认为0。 | +| m33 | number | 是 | 齐次坐标下生效，产生透视投影效果。 | + +**示例** -- 参数 - | 参数名 | 类型 | 必填 | 默认值 | 说明 | - | ----- | ------------------- | ---- | ---------------------------------------- | -------------------------------------- | - | array | Array<number> | 是 | [1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1] | 参数为长度为16（4\*4）的number数组, 详情见参数描述。 | - -- 返回值 - | 类型 | 说明 | - | ------ | -------------- | - | Object | 根据入参创建的四阶矩阵对象。 | - -- 参数描述 - | 参数名 | 类型 | 必填 | 说明 | - | ---- | ------ | ---- | -------------------- | - | m00 | number | 是 | x轴缩放值，单位矩阵默认为1。 | - | m01 | number | 是 | 第2个值，xyz轴旋转会影响这个值。 | - | m02 | number | 是 | 第3个值，xyz轴旋转会影响这个值。 | - | m03 | number | 是 | 无实际意义。 | - | m10 | number | 是 | 第5个值，xyz轴旋转会影响这个值。 | - | m11 | number | 是 | y轴缩放值，单位矩阵默认为1。 | - | m12 | number | 是 | 第7个值，xyz轴旋转会影响这个值。 | - | m13 | number | 是 | 无实际意义。 | - | m20 | number | 是 | 第9个值，xyz轴旋转会影响这个值。 | - | m21 | number | 是 | 第10个值，xyz轴旋转会影响这个值。 | - | m22 | number | 是 | z轴缩放值，单位矩阵默认为1。 | - | m23 | number | 是 | 无实际意义。 | - | m30 | number | 是 | x轴平移值，单位px，单位矩阵默认为0。 | - | m31 | number | 是 | y轴平移值，单位px，单位矩阵默认为0。 | - | m32 | number | 是 | z轴平移值，单位px，单位矩阵默认为0。 | - | m33 | number | 是 | 齐次坐标下生效，产生透视投影效果。 | - -- 示例 - ```ts - import Matrix4 from '@ohos.matrix4' - // 创建一个四阶矩阵 - let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, - 0.0, 1.0, 0.0, 0.0, - 0.0, 0.0, 1.0, 0.0, - 0.0, 0.0, 0.0, 1.0]) - ``` +```ts +import matrix4 from '@ohos.matrix4' +// 创建一个四阶矩阵 +let matrix = matrix4.init([1.0, 0.0, 0.0, 0.0, + 0.0, 1.0, 0.0, 0.0, + 0.0, 0.0, 1.0, 0.0, + 0.0, 0.0, 0.0, 1.0]) +@Entry +@Component +struct Tests { + build() { + Column() { + Image($r("app.media.zh")) + .width("40%") + .height(100) + .transform(matrix) + } + } +} +``` ## matrix4.identity -identity(): Object +identity(): Matrix4Transit Matrix的初始化函数，可以返回一个单位矩阵对象。 +**返回值** -- 返回值 - | 类型 | 说明 | - | ------ | ------- | - | Object | 单位矩阵对象。 | +| 类型 | 说明 | +| -------------- | -------------- | +| Matrix4Transit | 单位矩阵对象。 | -- 示例 - ```ts - // matrix1 和 matrix2 效果一致 - import Matrix4 from '@ohos.matrix4' - let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, - 0.0, 1.0, 0.0, 0.0, - 0.0, 0.0, 1.0, 0.0, - 0.0, 0.0, 0.0, 1.0]) - let matrix2 = Matrix4.identity() - ``` +**示例** + +```ts +// matrix1 和 matrix2 效果一致 +import matrix4 from '@ohos.matrix4' +let matrix1 = matrix4.init([1.0, 0.0, 0.0, 0.0, + 0.0, 1.0, 0.0, 0.0, + 0.0, 0.0, 1.0, 0.0, + 0.0, 0.0, 0.0, 1.0]) +let matrix2 = matrix4.identity() +@Entry +@Component +struct Tests { + build() { + Column() { + Image($r("app.media.zh")) + .width("40%") + .height(100) + .transform(matrix1) + Image($r("app.media.zh")) + .width("40%") + .height(100) + .margin({ top: 150 }) + .transform(matrix2) + } + } +} +``` ## matrix4.copy -copy(): Object +copy(): Matrix4Transit Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。 +**返回值** + +| 类型 | 说明 | +| -------------- | -------------------- | +| Matrix4Transit | 当前矩阵的拷贝对象。 | + +**示例** -- 返回值 - | 类型 | 说明 | - | ------ | ---------- | - | Object | 当前矩阵的拷贝对象。 | - -- 示例 - ```ts - // xxx.ets - import Matrix4 from '@ohos.matrix4' - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().translate({x:100}) - private matrix2 = this.matrix1.copy().scale({x:2}) - - build() { - Column() { - Image($r("app.media.bg1")) - .width("40%") - .height(100) - .transform(this.matrix1) - Image($r("app.media.bg2")) - .width("40%") - .height(100) - .margin({top:50}) - .transform(this.matrix2) - } +```ts +// xxx.ets +import matrix4 from '@ohos.matrix4' +@Entry +@Component +struct Test { + private matrix1 = Matrix4.identity().translate({x:100}) + private matrix2 = this.matrix1.copy().scale({x:2}) + + build() { + Column() { + Image($r("app.media.bg1")) + .width("40%") + .height(100) + .transform(this.matrix1) + Image($r("app.media.bg2")) + .width("40%") + .height(100) + .margin({top:50}) + .transform(this.matrix2) } } - ``` +} +``` - ![zh-cn_image_0000001219744181](figures/zh-cn_image_0000001219744181.png) +![zh-cn_image_0000001219744181](figures/zh-cn_image_0000001219744181.png) ## Matrix4 @@ -139,201 +169,231 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。 ### combine -combine(matrix: Matrix4): Object +combine(matrix: Matrix4): Matrix4Transit Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。 +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------- | ---- | ------------------ | +| matrix | Matrix4 | 是 | 待叠加的矩阵对象。 | -- 参数 - | 参数名 | 类型 | 必填 | 默认值 | 说明 | - | ------ | ------- | ---- | ---- | --------- | - | matrix | Matrix4 | 是 | - | 待叠加的矩阵对象。 | - -- 返回值 - | 类型 | 说明 | - | ------ | --------- | - | Object | 矩阵叠加后的对象。 | - -- 示例 - ```ts - // xxx.ets - import Matrix4 from '@ohos.matrix4' - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().translate({x:200}).copy() - private matrix2 = Matrix4.identity().scale({x:2}).copy() - - build() { - Column() { - // 先平移x轴100px，再缩放两倍x轴 - Image($r("app.media.bg1")).transform(this.matrix1.combine(this.matrix2)) - .width("40%") - .height(100) - .margin({top:50}) - } +**返回值** + +| 类型 | 说明 | +| -------------- | ------------------ | +| Matrix4Transit | 矩阵叠加后的对象。 | + +**示例** + +```ts +// xxx.ets +import matrix4 from '@ohos.matrix4' +@Entry +@Component +struct Test { + private matrix1 = matrix4.identity().translate({x:200}).copy() + private matrix2 = matrix4.identity().scale({x:2}).copy() + + build() { + Column() { + // 矩阵变换前 + Image($r("app.media.icon")) + .width("40%") + .height(100) + .margin({top:50}) + // 先平移x轴200px，再缩放两倍x轴，得到矩阵变换后的效果图 + Image($r("app.media.icon")) + .transform(this.matrix1.combine(this.matrix2)) + .width("40%") + .height(100) + .margin({top:50}) } } - ``` +} +``` - ![zh-cn_image_0000001174582846](figures/zh-cn_image_0000001174582846.png) +![zh-cn_image_0000001118642902](figures/zh-cn_image_0000001118642902.png) ### invert -invert(): Object +invert(): Matrix4Transit Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效果正好相反。 +**返回值** -- 返回值 - | 类型 | 说明 | - | ------ | ----------- | - | Object | 当前矩阵的逆矩阵对象。 | +| 类型 | 说明 | +| -------------- | ---------------------- | +| Matrix4Transit | 当前矩阵的逆矩阵对象。 | -- 示例 - ```ts - import Matrix4 from '@ohos.matrix4' - // matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反 - let matrix1 = Matrix4.identity().scale({x:2}) - let matrix2 = matrix1.invert() - ``` +**示例** + +```ts +import matrix4 from '@ohos.matrix4' +// matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反 +let matrix1 = matrix4.identity().scale({x:2}) +let matrix2 = matrix1.invert() +@Entry +@Component +struct Tests { + build() { + Column() { + Image($r("app.media.zh")) + .width(200) + .height(100) + .transform(matrix1) + .margin({ top: 100 }) + Image($r("app.media.zh")) + .width(200) + .height(100) + .margin({ top: 150 }) + .transform(matrix2) + } + } +} +``` ### translate -translate({x?: number, y?: number, z?: number}): Object +translate({x?: number, y?: number, z?: number}): Matrix4Transit Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。 +**参数** + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | ------------------------------------- | +| x | number | 否 | x轴的平移距离，单位px。
默认值：0 | +| y | number | 否 | y轴的平移距离，单位px。
默认值：0 | +| z | number | 否 | z轴的平移距离，单位px。
默认值：0 | + +**返回值** + +| 类型 | 说明 | +| -------------- | ---------------------------- | +| Matrix4Transit | 增加好平移效果后的矩阵对象。 | -- 参数 - | 参数名 | 类型 | 必填 | 默认值 | 说明 | - | ---- | ------ | ---- | ---- | ------------- | - | x | number | 否 | 0 | x轴的平移距离，单位px。 | - | y | number | 否 | 0 | y轴的平移距离，单位px。 | - | z | number | 否 | 0 | z轴的平移距离，单位px。 | - - -- 返回值 - | 类型 | 说明 | - | ------ | -------------- | - | Object | 增加好平移效果后的矩阵对象。 | - -- 示例 - ```ts - // xxx.ets - import Matrix4 from '@ohos.matrix4' - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().translate({x:100, y:200, z:30}) - - build() { - Column() { - Image($r("app.media.bg1")).transform(this.matrix1) - .width("40%") - .height(100) - } +**示例** + +```ts +// xxx.ets +import matrix4 from '@ohos.matrix4' +@Entry +@Component +struct Test { + private matrix1 = matrix4.identity().translate({x:100, y:200, z:30}) + + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) } } - ``` +} +``` - ![zh-cn_image_0000001219662645](figures/zh-cn_image_0000001219662645.png) +![zh-cn_image_0000001219662645](figures/zh-cn_image_0000001219662645.png) ### scale -scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Object +scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Matrix4Transit Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。 +**参数：** -- 参数 - | 参数名 | 类型 | 必填 | 默认值 | 说明 | - | ------- | ------ | ---- | ---- | ---------- | - | x | number | 否 | 1 | x轴的缩放倍数。 | - | y | number | 否 | 1 | y轴的缩放倍数。 | - | z | number | 否 | 1 | z轴的缩放倍数。 | - | centerX | number | 否 | 0 | 变换中心点x轴坐标。 | - | centerY | number | 否 | 0 | 变换中心点y轴坐标。 | - - -- 返回值 - | 类型 | 说明 | - | ------ | -------------- | - | Object | 增加好缩放效果后的矩阵对象。 | - -- 示例 - ```ts - // xxx.ets - import Matrix4 from '@ohos.matrix4' - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50}) - - build() { - Column() { - Image($r("app.media.bg1")).transform(this.matrix1) - .width("40%") - .height(100) - } +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------ | ---- | --------------------------------- | +| x | number | 否 | x轴的缩放倍数。
默认值：1 | +| y | number | 否 | y轴的缩放倍数。
默认值：1 | +| z | number | 否 | z轴的缩放倍数。
默认值：1 | +| centerX | number | 否 | 变换中心点x轴坐标。
默认值：0 | +| centerY | number | 否 | 变换中心点y轴坐标。
默认值：0 | + +**返回值** + +| 类型 | 说明 | +| -------------- | ---------------------------- | +| Matrix4Transit | 增加好缩放效果后的矩阵对象。 | + +**示例** + +```ts +// xxx.ets +import matrix4 from '@ohos.matrix4' +@Entry +@Component +struct Test { + private matrix1 = matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50}) + + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) } } - ``` +} +``` - ![zh-cn_image_0000001219864131](figures/zh-cn_image_0000001219864131.png) +![zh-cn_image_0000001219864131](figures/zh-cn_image_0000001219864131.png) ### rotate -rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Object +rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Matrix4Transit Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。 +**参数：** -- 参数 - | 参数名 | 类型 | 必填 | 默认值 | 说明 | - | ------- | ------ | ---- | ---- | ---------- | - | x | number | 否 | 1 | 旋转轴向量x坐标。 | - | y | number | 否 | 1 | 旋转轴向量y坐标。 | - | z | number | 否 | 1 | 旋转轴向量z坐标。 | - | angle | number | 否 | 0 | 旋转角度。 | - | centerX | number | 否 | 0 | 变换中心点x轴坐标。 | - | centerY | number | 否 | 0 | 变换中心点y轴坐标。 | - - -- 返回值 - | 类型 | 说明 | - | ------ | -------------- | - | Object | 增加好旋转效果后的矩阵对象。 | - -- 示例 - ```ts - // xxx.ets - import Matrix4 from '@ohos.matrix4' - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().rotate({x:1, y:1, z:2, angle:30}) - - build() { - Column() { - Image($r("app.media.bg1")).transform(this.matrix1) - .width("40%") - .height(100) - }.width("100%").margin({top:50}) - } +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------ | ---- | --------------------------------- | +| x | number | 否 | 旋转轴向量x坐标。
默认值：1 | +| y | number | 否 | 旋转轴向量y坐标。
默认值：1 | +| z | number | 否 | 旋转轴向量z坐标。
默认值：1 | +| angle | number | 否 | 旋转角度。
默认值：0 | +| centerX | number | 否 | 变换中心点x轴坐标。
默认值：0 | +| centerY | number | 否 | 变换中心点y轴坐标。
默认值：0 | + +**返回值** + +| 类型 | 说明 | +| -------------- | ---------------------------- | +| Matrix4Transit | 增加好旋转效果后的矩阵对象。 | + +**示例** + +```ts +// xxx.ets +import matrix4 from '@ohos.matrix4' +@Entry +@Component +struct Test { + private matrix1 = matrix4.identity().rotate({x:1, y:1, z:2, angle:30}) + + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) + }.width("100%").margin({top:50}) } - ``` +} +``` - ![zh-cn_image_0000001174422898](figures/zh-cn_image_0000001174422898.png) +![zh-cn_image_0000001174422898](figures/zh-cn_image_0000001174422898.png) ### transformPoint @@ -343,38 +403,39 @@ transformPoint(point: Point): Point Matrix的坐标点转换函数，可以将当前的变换效果作用到一个坐标点上。 +**参数：** -- 参数 - | 参数名 | 类型 | 必填 | 默认值 | 说明 | - | ----- | ----- | ---- | ---- | --------- | - | point | Point | 是 | - | 需要转换的坐标点。 | - - -- 返回值 - | 类型 | 说明 | - | ----- | ---------------- | - | Point | 返回矩阵变换后的Point对象。 | - -- 示例 - ```ts - // xxx.ets - import Matrix4 from '@ohos.matrix4' - import prompt from '@system.prompt' - - @Entry - @Component - struct Test { - private matrix1 = Matrix4.identity().transformPoint([100, 10]) - - build() { - Column() { - Button("get Point") - .onClick(() => { - prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000}) - }).backgroundColor(0x2788D9) - }.width("100%").padding(50) - } +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ----- | ---- | ------------------ | +| point | Point | 是 | 需要转换的坐标点。 | + +**返回值** + +| 类型 | 说明 | +| ----- | ---------------- | +| Point | 返回矩阵变换后的Point对象。 | + +**示例** + +```ts +// xxx.ets +import matrix4 from '@ohos.matrix4' +import prompt from '@system.prompt' + +@Entry +@Component +struct Test { + private matrix1 = matrix4.identity().transformPoint([100, 10]) + + build() { + Column() { + Button("get Point") + .onClick(() => { + prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000}) + }).backgroundColor(0x2788D9) + }.width("100%").padding(50) } - ``` +} +``` - ![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.gif) +![zh-cn_image_0000001219864133](figures/zh-cn_image_0000001219864133.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md index 2bd3623df2a7b695f535b9acd91a252fb017f8b0..a75a053860bbdbb099c537603fe317a00d5a1d58 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md @@ -3,20 +3,16 @@ 组件的Z序，指明了该组件在堆叠组件中的位置。 > **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| zIndex | number | 0 | 同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。 | +| 名称 | 参数类型 | 描述 | +| -------- | -------- | -------- | +| zIndex | number | 同一容器中兄弟组件显示层级关系。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。 | ## 示例