diff --git a/zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md b/zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md index 20f90a9b04e1f3fb47c4d1cf70ae2a53433b414d..3ce513c552d07d20d2ed8ac1fee332ef15d227c0 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md +++ b/zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md @@ -38,11 +38,7 @@ matchMedia(condition: string): MediaQueryList **示例：** ``` -export default { - matchMedia() { - var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)'); - }, -} +var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)'); ``` ## MediaQueryEvent @@ -100,6 +96,11 @@ addListener(callback: (event: MediaQueryEvent) => void): void **示例：** ``` +function maxWidthMatch(){ + if(e.mathes){ + // do something + } +} mMediaQueryList.addListener(maxWidthMatch); ``` @@ -121,6 +122,11 @@ removeListener(callback: (event: MediaQueryEvent) => void): void **示例：** ``` +function maxWidthMatch(){ + if(e.mathes){ + // do something + } +} mMediaQueryList.removeListener(maxWidthMatch); ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md index 98ba09c6638385303ce5f612f6a611dd2fbbfe9c..d5e17b66960f05e500ccd08dfe5722000e3863d3 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md @@ -22,9 +22,9 @@ Text(content?: string) - 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | content | string | 否 | '' | 文本内容，包含子组件Span时不生效，显示Span内容。 | + | content | string | 否 | '' | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 | ## 属性 @@ -40,33 +40,33 @@ Text(content?: string) | textCase | TextCase | TextCase.Normal | 设置文本大小写。 | - TextAlign枚举说明 - | 名称 | 描述 | + | 名称 | 描述 | | -------- | -------- | - | Center | 文本居中对齐。 | - | Start | 根据文字书写相同的方向对齐。 | - | End | 根据文字书写相反的方向对齐。 | + | Center | 文本居中对齐。 | + | Start | 根据文字书写相同的方向对齐。 | + | End | 根据文字书写相反的方向对齐。 | - TextOverflow枚举说明 - | 名称 | 描述 | + | 名称 | 描述 | | -------- | -------- | - | Clip | 文本超长时进行裁剪显示。 | - | Ellipsis | 文本超长时显示不下的文本用省略号代替。 | - | None | 文本超长时不进行裁剪。 | + | Clip | 文本超长时进行裁剪显示。 | + | Ellipsis | 文本超长时显示不下的文本用省略号代替。 | + | None | 文本超长时不进行裁剪。 | - TextDecorationType枚举说明 - | 名称 | 描述 | + | 名称 | 描述 | | -------- | -------- | - | Underline | 文字下划线修饰。 | - | LineThrough | 穿过文本的修饰线。 | - | Overline | 文字上划线修饰。 | - | None | 不使用文本装饰线。 | + | Underline | 文字下划线修饰。 | + | LineThrough | 穿过文本的修饰线。 | + | Overline | 文字上划线修饰。 | + | None | 不使用文本装饰线。 | - TextCase枚举说明 - | 名称 | 描述 | + | 名称 | 描述 | | -------- | -------- | - | Normal | 保持文本原有大小写。 | - | LowerCase | 文本采用全小写。 | - | UpperCase | 文本采用全大写。 | + | Normal | 保持文本原有大小写。 | + | LowerCase | 文本采用全小写。 | + | UpperCase | 文本采用全大写。 | > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 不支持Text内同时存在文本内容和Span子组件。（如果同时存在，只显示Span内的内容)。 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 dcad1ecba1c1713c9ce3a1edf53471cb95ced229..198ae125187f3c4ace88a6618f3320affc64499d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -251,7 +251,7 @@ struct MiterLimit { ``` @Entry @Component -struct Font { +struct Fonts { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md index 9e14508861b053d21447df107f519a190263fef1..f191e2dc2335c0d0c3f08a8b49c08d1abd85be2c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md @@ -20,18 +20,18 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[]) | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)
\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)
\| [PanGesture](ts-basic-gestures-pangesture.md)
\| [PinchGesture](ts-basic-gestures-pinchgesture.md)
\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | 是 | - | 可变长参数，1个或者多个基础手势类型，这些手势会被组合识别。 | - GestureMode枚举说明 - | 名称 | 描述 | + | 名称 | 描述 | | -------- | -------- | - | Sequence | 顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。 | - | Parallel | 并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。 | - | Exclusive | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 | + | Sequence | 顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。 | + | Parallel | 并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。 | + | Exclusive | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 | ## 事件 -| 名称 | 功能描述 | +| 名称 | 功能描述 | | -------- | -------- | -| onCancel(event: () => void) | 顺序组合手势（GestureMode.Sequence）取消后触发回调。 | +| onCancel(event: () => void) | 顺序组合手势（GestureMode.Sequence）取消后触发回调。 | ## 示例 @@ -43,13 +43,13 @@ struct GestureGroupExample { @State count: number = 0 @State offsetX: number = 0 @State offsetY: number = 0 - @State borderStyle: BorderStyle = BorderStyle.Solid + @State borderStyles: BorderStyle = BorderStyle.Solid build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) }.translate({ x: this.offsetX, y: this.offsetY, z: 5 }) - .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyle }) + .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles }) .gesture( GestureGroup(GestureMode.Sequence, LongPressGesture({ repeat: true }) @@ -62,7 +62,7 @@ struct GestureGroupExample { }), PanGesture({}) .onActionStart(() => { - this.borderStyle = BorderStyle.Dashed + this.borderStyles = BorderStyle.Dashed console.log('pan start') }) .onActionUpdate((event: GestureEvent) => { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index bc55f27ba3246e1b452d1924c4498373c31db6fc..065c59e0d43cf97c45b5d8aac131805a64b1bb1d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -259,7 +259,7 @@ struct MiterLimit { ``` @Entry @Component -struct Font { +struct Fonts { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) @@ -1877,12 +1877,12 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。 - 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | + | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -------- | - | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | - | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | - | sw | number | 是 | 0 | 需要输出的区域的宽度。 | - | sh | number | 是 | 0 | 需要输出的区域的高度。 | + | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | + | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | + | sw | number | 是 | 0 | 需要输出的区域的宽度。 | + | sh | number | 是 | 0 | 需要输出的区域的高度。 | ### getImageData diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md index ed7edda27d585bb903fe59dbfc90ce12ed38ea95..6c2933272d3a0e90b99bf3eb687cc736fa4a113a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -68,8 +68,8 @@ PageTransitionEnter和PageTransitionExit组件支持的事件： @Entry @Component struct PageTransitionExample1 { - @State scale: number = 1 - @State opacity: number = 1 + @State scale1: number = 1 + @State opacity1: number = 1 @State active: boolean = false build() { Column() { @@ -79,19 +79,19 @@ struct PageTransitionExample1 { .onClick(() => { this.active = true }) - }.scale({ x: this.scale }).opacity(this.opacity) + }.scale({ x: this.scale1 }).opacity(this.opacity1) } // 自定义方式1：完全自定义转场过程的效果 pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { - this.scale = 1 - this.opacity = progress + this.scale1 = 1 + this.opacity1 = progress }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%) PageTransitionExit({ duration: 1500, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { - this.scale = 1 - progress - this.opacity = 1 + this.scale1 = 1 - progress + this.opacity1 = 1 }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%) } } @@ -102,27 +102,27 @@ struct PageTransitionExample1 { @Entry @Component struct AExample { - @State scale: number = 1 - @State opacity: number = 1 + @State scale2: number = 1 + @State opacity2: number = 1 @State active: boolean = false build() { Column() { Navigator({ target: 'pages/index' ,type: NavigationType.Push}) { Image($r('app.media.bg2')).width("100%").height("100%") } - }.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity) + }.height("100%").width("100%").scale({ x: this.scale2 }).opacity(this.opacity2) } // 自定义方式1：完全自定义转场过程的效果 pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { - this.scale = 1 - this.opacity = progress + this.scale2 = 1 + this.opacity2 = progress }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%) PageTransitionExit({ duration: 1500, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { - this.scale = 1 - progress - this.opacity = 1 + this.scale2 = 1 - progress + this.opacity2 = 1 }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%) } } @@ -137,8 +137,8 @@ struct AExample { @Entry @Component struct PageTransitionExample { - @State scale: number = 1 - @State opacity: number = 1 + @State scale1: number = 1 + @State opacity1: number = 1 @State active: boolean = false build() { @@ -149,7 +149,7 @@ struct PageTransitionExample { .onClick(() => { this.active = true }) - }.scale({ x: this.scale }).opacity(this.opacity) + }.scale({ x: this.scale1 }).opacity(this.opacity1) } // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) @@ -168,8 +168,8 @@ struct PageTransitionExample { @Entry @Component struct PageTransitionExample1 { - @State scale: number = 1 - @State opacity: number = 1 + @State scale2: number = 1 + @State opacity2: number = 1 @State active: boolean = false build() { @@ -180,7 +180,7 @@ struct PageTransitionExample1 { .onClick(() => { this.active = true }) - }.scale({ x: this.scale }).opacity(this.opacity) + }.scale({ x: this.scale2 }).opacity(this.opacity2) } // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md index 101fddafada5973ec65c10bf8c43e8ea43cfb3a3..61fd9b2820f6146677c5b16808ed70c8acb3cd66 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md @@ -11,9 +11,9 @@ ## 事件 -| 名称 | 支持冒泡 | 功能描述 | -| -------- | -------- | -------- | -| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | 否 | 组件区域变化时触发该回调，Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 | +| 名称 | 支持冒泡 | 功能描述 | +| -------- | -------- | -------- | +| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | 否 | 组件区域变化时触发该回调，Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 | ## 示例 @@ -23,7 +23,7 @@ @Component struct AreaExample { @State value: string = 'Text' - @State size: string = '' + @State size1: string = '' build() { Column() { @@ -34,7 +34,7 @@ struct AreaExample { }) .onAreaChange((oldValue: Area, newValue: Area) => { console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`) - this.size = JSON.stringify(newValue) + this.size1 = JSON.stringify(newValue) }) Text('new area is: \n' + this.size).margin({ right: 30, left: 30 }) }