diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.gif new file mode 100644 index 0000000000000000000000000000000000000000..1ed64a34813209609c7ad742281247145489f8cd Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.gif differ diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.png deleted file mode 100644 index dc8f8a0cbb105c4d791bb867771bb9bc1bfbb468..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152588538.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md index f7f8893c08e1d4e6c84fb5cc93b5ec4874209cda..ca90d9e0df36b92ed67872cc05b5a93a03c2ab57 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md @@ -49,36 +49,65 @@ ```html
- +
``` ```css /* xxx.css */ .container { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; } ``` ```js -// ×××.js +// xxx.js export default { - changeFruit(e){ - console.log("newValue:" + e.newValue) - } + data: { + array: [ + { + "value": "下拉选项0", "name": "选项0" + }, + { + "value": "下拉选项1", "name": "选项1" + }, + { + "value": "下拉选项2", "name": "选项2" + }, + { + "value": "下拉选项3", "name": "选项3" + }, + ] + }, + getData() { + let other = [ + { + "value": "下拉选项a", "name": "选项a" + }, + { + "value": "下拉选项b", "name": "选项b" + }, + { + "value": "下拉选项c", "name": "选项c" + }, + { + "value": "下拉选项d", "name": "选项d" + }, + ] + return other + }, + onChange() { + this.array = this.getData() + } } ``` -![zh-cn_image_0000001152588538](figures/zh-cn_image_0000001152588538.png) \ No newline at end of file +![zh-cn_image_0000001152588538](figures/zh-cn_image_0000001152588538.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744183.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744183.gif index 9ead4d671531532629b2fbf2f411ce4008dde3ba..0f974cc65ddbbef89654d62efd8391b2d72c810c 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744183.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219744183.gif differ 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 37fd11682e2db8cd265f3ea405fc3f40af8412bb..85cef5202529f9a5fde1ef1ae91390444336fac3 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 @@ -349,3 +349,57 @@ struct ImageExample3 { ``` ![zh-cn_image_0000001205972610](figures/zh-cn_image_0000001205972610.gif) + +### 渲染沙箱路径图片 + +```ts +import fileio from '@ohos.fileio' +import context from '@ohos.application.context' + +@Entry +@Component +struct LoadImageExample { + @State resourcesPath: string = '' + @State sandboxPath: string = '' + context: context.AbilityContext + + aboutToAppear() { + this.context = getContext(this) as context.AbilityContext + } + + build() { + Column() { + Button('读取沙箱图片') + .margin({ bottom: 10, top: 10 }) + .onClick(() => { + this.sandboxPath = this.context.getApplicationContext().filesDir + '/icon.png' + console.log(`读取沙箱图片=========>${this.sandboxPath}`) + let fd = fileio.openSync(this.sandboxPath, 0o100, 0o666) + console.log(`create file========>${fd}`) + let srcPath = this.context.bundleCodeDir + '/entry/resources/base/media/icon.png' + console.log('mySrcpath' + srcPath) + fileio.copyFileSync(srcPath, this.sandboxPath) // 复制图片到沙箱路径 + this.sandboxPath = 'file://' + this.context.getApplicationContext().filesDir + '/icon.png' + }) + Button('读取资源图片') + .margin({ bottom: 10 }) + .onClick(() => { + this.resourcesPath = 'file://' + this.context.bundleCodeDir + '/entry/resources/base/media/icon.png' + }) + Text(`资源图片路径:${this.resourcesPath}`) + .fontSize(20) + .margin({ bottom: 10 }) + Image(this.resourcesPath) + .width(100) + .height(100) + Text(`沙箱图片路径:${this.sandboxPath}`) + .fontSize(20) + .margin({ bottom: 10 }) + Image(this.sandboxPath) + .width(100) + .height(100) + } + .width('100%').height('100%') + } +} +``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md index 2bc0322f27d016b6d0ae55eec0dcde7cf8f11e07..98e907ab66bc8fabb12dc522ef6a7439bfd26fb7 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md @@ -39,6 +39,7 @@ RichText(content:string) | \

\

| 定义段落。 | \

这是一个段落\

| | \
| 插入一个简单的换行符。 | \

这是一个段落\
这是换行段落\

| | \
| 定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。 | \

这个一个段落\

\
\

这是一个段落\

| +| \\ | 用来定义图片。 | \\ | | \
\
| 常用于组合块级元素，以便通过CSS来对这些元素进行格式化。 | \
\

这是一个在div元素中的标题。\

\
| | \\ | 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。 | \这是一个斜体\ | | \\ | 定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词，应尽量避免使用\为文本加下划线，用户会把它混淆为一个超链接。 | \

\这是带有下划线的段落\\

| diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md index c7e75844c0510121776eff37d1688f11ee83f6aa..2dab45e8523430be89c0723ba7e7dff2b38352e4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md @@ -31,15 +31,15 @@ path: string, container: object, render: string, loop: boolean, autoplay: boolea **参数：** - | 参数 | 类型 | 必填 | 描述 | - | -------------- | --------------------------- | ---- | ---------------------------------------- | - | path | string | 是 | hap包内动画资源文件路径，仅支持json格式。示例：path: "common/lottie/data.json" | - | container | object | 是 | canvas绘图上下文，声明范式需提前声明CanvasRenderingContext2D。 | - | render | string | 是 | 渲染类型，仅支持“canvas”。 | - | loop | boolean \| number | 否 | 动画播放结束后，是否循环播放，默认值true。值类型为number，且大于等于1时为设置的重复播放的次数。 | - | autoplay | boolean | 否 | 是否自动播放动画，默认值true。 | - | name | string | 否 | 开发者自定义的动画名称，后续支持通过该名称引用控制动画，默认为空。 | - | initialSegment | [number, number] | 否 | 指定动画播放的起始帧号，指定动画播放的结束帧号。 | +| 参数 | 类型 | 必填 | 描述 | +| -------------- | --------------------------- | ---- | ---------------------------------------- | +| path | string | 是 | hap包内动画资源文件路径，仅支持json格式。示例：path: "common/lottie/data.json" | +| container | object | 是 | canvas绘图上下文，声明范式需提前声明CanvasRenderingContext2D。 | +| render | string | 是 | 渲染类型，仅支持“canvas”。 | +| loop | boolean \| number | 否 | 动画播放结束后，是否循环播放，默认值true。值类型为number，且大于等于1时为设置的重复播放的次数。 | +| autoplay | boolean | 否 | 是否自动播放动画，默认值true。 | +| name | string | 否 | 开发者自定义的动画名称，后续支持通过该名称引用控制动画，默认为空。 | +| initialSegment | [number, number] | 否 | 指定动画播放的起始帧号，指定动画播放的结束帧号。 | ## lottie.destroy @@ -50,9 +50,9 @@ destroy(name: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ---- | ------ | ---- | ---------------------------------------- | - | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。 | +| 参数 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | ---------------------------------------- | +| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。 | **示例：** ```ts @@ -78,7 +78,7 @@ destroy(name: string): void .width('30%') .height('20%') .backgroundColor('#0D9FFB') - .onAppear(() => { + .onReady(() => { console.log('canvas onAppear'); this.animateItem = lottie.loadAnimation({ container: this.controller, @@ -131,9 +131,9 @@ play(name: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ---- | ------ | ---- | ---------------------------------------- | - | name | string | 是 | 被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。 | +| 参数 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | ---------------------------------------- | +| name | string | 是 | 被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。 | **示例：** @@ -150,9 +150,9 @@ pause(name: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ---- | ------ | ---- | ---------------------------------------- | - | name | string | 是 | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 | +| 参数 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | ---------------------------------------- | +| name | string | 是 | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 | **示例：** @@ -169,9 +169,9 @@ togglePause(name: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ---- | ------ | ---- | ---------------------------------------- | - | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | +| 参数 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | ---------------------------------------- | +| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | **示例：** @@ -188,9 +188,9 @@ stop(name: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ---- | ------ | ---- | ---------------------------------------- | - | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | +| 参数 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | ---------------------------------------- | +| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 | **示例：** @@ -207,10 +207,10 @@ setSpeed(speed: number, name: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ----- | ------ | ---- | ---------------------------------------- | - | speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放。 | - | name | string | 是 | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 | +| 参数 | 类型 | 必填 | 描述 | +| ----- | ------ | ---- | ---------------------------------------- | +| speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放。 | +| name | string | 是 | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 | **示例：** @@ -227,10 +227,10 @@ setDirection(direction: AnimationDirection, name: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | --------- | ------------------ | ---- | ---------------------------------------- | - | direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1 | - | name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 | +| 参数 | 类型 | 必填 | 描述 | +| --------- | ------------------ | ---- | ---------------------------------------- | +| direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1 | +| name | string | 是 | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 | **示例：** @@ -275,9 +275,9 @@ play(name?: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ---- | ------ | ---- | --------------- | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | +| 参数 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | --------------- | +| name | string | 否 | 被指定的动画名，缺省默认为空。 | **示例：** @@ -294,9 +294,9 @@ destroy(name?: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ---- | ------ | ---- | --------------- | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | +| 参数 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | --------------- | +| name | string | 否 | 被指定的动画名，缺省默认为空。 | **示例：** @@ -313,9 +313,9 @@ pause(name?: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ---- | ------ | ---- | --------------- | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | +| 参数 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | --------------- | +| name | string | 否 | 被指定的动画名，缺省默认为空。 | **示例：** @@ -332,9 +332,9 @@ togglePause(name?: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ---- | ------ | ---- | --------------- | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | +| 参数 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | --------------- | +| name | string | 否 | 被指定的动画名，缺省默认为空。 | **示例：** @@ -351,9 +351,9 @@ stop(name?: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ---- | ------ | ---- | --------------- | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | +| 参数 | 类型 | 必填 | 描述 | +| ---- | ------ | ---- | --------------- | +| name | string | 否 | 被指定的动画名，缺省默认为空。 | **示例：** @@ -370,9 +370,9 @@ setSpeed(speed: number): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ----- | ------ | ---- | ---------------------------------------- | - | speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 | +| 参数 | 类型 | 必填 | 描述 | +| ----- | ------ | ---- | ---------------------------------------- | +| speed | number | 是 | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 | **示例：** @@ -389,9 +389,9 @@ setDirection(direction: AnimationDirection): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | --------- | ------------------ | ---- | ---------------------------------------- | - | direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1。 | +| 参数 | 类型 | 必填 | 描述 | +| --------- | ------------------ | ---- | ---------------------------------------- | +| direction | AnimationDirection | 是 | 1为正向，-1为反向; 当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed<0叠加时也是倒放。
AnimationDirection：1 \| -1。 | **示例：** @@ -408,11 +408,11 @@ goToAndStop(value: number, isFrame?: boolean): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ------- | ------- | ---- | ---------------------------------------- | - | value | number | 是 | 帧号(值大于等于0)或时间进度(ms)。 | - | isFrame | boolean | 否 | true: 按指定帧控制，false:按指定时间控制，缺省默认false。 | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | +| 参数 | 类型 | 必填 | 描述 | +| ------- | ------- | ---- | ---------------------------------------- | +| value | number | 是 | 帧号(值大于等于0)或时间进度(ms)。 | +| isFrame | boolean | 否 | true: 按指定帧控制，false:按指定时间控制，缺省默认false。 | +| name | string | 否 | 被指定的动画名，缺省默认为空。 | **示例：** @@ -432,11 +432,11 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ------- | ------- | ---- | ---------------------------------------- | - | value | number | 是 | 帧号(值大于等于0)或时间进度(ms) | - | isFrame | boolean | 是 | true：按指定帧控制， false：按指定时间控制，缺省默认false。 | - | name | string | 否 | 被指定的动画名，缺省默认为空。 | +| 参数 | 类型 | 必填 | 描述 | +| ------- | ------- | ---- | ---------------------------------------- | +| value | number | 是 | 帧号(值大于等于0)或时间进度(ms) | +| isFrame | boolean | 是 | true：按指定帧控制， false：按指定时间控制，缺省默认false。 | +| name | string | 否 | 被指定的动画名，缺省默认为空。 | **示例：** @@ -456,10 +456,10 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean **参数：** - | 参数 | 类型 | 必填 | 描述 | - | --------- | ---------------------------------------- | ---- | ---------------------------------------- | - | segments | AnimationSegment = [number, number] \| AnimationSegment[] | 是 | 片段或片段列表；
如果片段列表全部播放完毕后，下轮循环播放仅播放最后一个片段 | - | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | +| 参数 | 类型 | 必填 | 描述 | +| --------- | ---------------------------------------- | ---- | ---------------------------------------- | +| segments | AnimationSegment = [number, number] \| AnimationSegment[] | 是 | 片段或片段列表；
如果片段列表全部播放完毕后，下轮循环播放仅播放最后一个片段 | +| forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | **示例：** @@ -479,9 +479,9 @@ resetSegments(forceFlag: boolean): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | --------- | ------- | ---- | ------------------------------ | - | forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | +| 参数 | 类型 | 必填 | 描述 | +| --------- | ------- | ---- | ------------------------------ | +| forceFlag | boolean | 是 | true：即时生效播放，false：延迟到下轮循环播放再生效 | **示例：** @@ -511,9 +511,9 @@ setSubframe(useSubFrame: boolean): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ------------ | ------- | ---- | ---------------------------------------- | - | useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。
true：属性currentFrame显示浮点。
false：属性currentFrame去浮点数显示整数。 | +| 参数 | 类型 | 必填 | 描述 | +| ------------ | ------- | ---- | ---------------------------------------- | +| useSubFrames | boolean | 是 | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。
true：属性currentFrame显示浮点。
false：属性currentFrame去浮点数显示整数。 | **示例：** @@ -530,9 +530,9 @@ getDuration(inFrames?: boolean): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | -------- | ------- | ---- | ---------------------------------------- | - | inFrames | boolean | 否 | true：获取帧数， false：获取时间(单位ms)，缺省默认false。 | +| 参数 | 类型 | 必填 | 描述 | +| -------- | ------- | ---- | ---------------------------------------- | +| inFrames | boolean | 否 | true：获取帧数， false：获取时间(单位ms)，缺省默认false。 | **示例：** @@ -549,10 +549,10 @@ addEventListener<T = any>(name: AnimationEventName, callback: AnimationEve **参数：** - | 参数 | 类型 | 必填 | 描述 | - | -------- | ------------------------------- | ---- | ---------------------------------------- | - | name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' | - | callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数 | +| 参数 | 类型 | 必填 | 描述 | +| -------- | ------------------------------- | ---- | ---------------------------------------- | +| name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' | +| callback | AnimationEventCallback<T> | 是 | 用户自定义回调函数 | **示例：** @@ -575,10 +575,10 @@ removeEventListener<T = any>(name: AnimationEventName, callback?: Animatio **参数：** - | 参数 | 类型 | 必填 | 描述 | - | -------- | ------------------------------- | ---- | ---------------------------------------- | - | name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' | - | callback | AnimationEventCallback<T> | 否 | 用户自定义回调函数；缺省为空时，删除此事件的所有回调函数。 | +| 参数 | 类型 | 必填 | 描述 | +| -------- | ------------------------------- | ---- | ---------------------------------------- | +| name | AnimationEventName | 是 | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：
'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' | +| callback | AnimationEventCallback<T> | 否 | 用户自定义回调函数；缺省为空时，删除此事件的所有回调函数。 | **示例：** @@ -595,10 +595,10 @@ triggerEvent<T = any>(name: AnimationEventName, args: T): void **参数：** - | 参数 | 类型 | 必填 | 描述 | - | ---- | ------------------ | ---- | --------- | - | name | AnimationEventName | 是 | 指定动画事件类型 | - | args | any | 是 | 用户自定义回调参数 | +| 参数 | 类型 | 必填 | 描述 | +| ---- | ------------------ | ---- | --------- | +| name | AnimationEventName | 是 | 指定动画事件类型 | +| args | any | 是 | 用户自定义回调参数 | **示例：** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md index f8fc0b4ad9a90f363be6e7d26701ea6b697895df..34342bef756369527367d85e11077db6fae4cf73 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md @@ -66,7 +66,7 @@ Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚 ## GridDirection8+枚举说明 | 名称 | 描述 | - | ------ | -------------------------------------- | +| ------ | -------------------------------------- | | Row | 主轴布局方向沿水平方向布局，即自左往右先填满一行，再去填下一行。 | | Column | 主轴布局方向沿垂直方向布局，即自上往下先填满一列，再去填下一列。 | | RowReverse | 主轴布局方向沿水平方向反向布局，即自右往左先填满一行，再去填下一行。 | @@ -100,6 +100,7 @@ Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚 @Component struct GridExample { @State Number: String[] = ['0', '1', '2', '3', '4'] + scroller: Scroller = new Scroller() build() { Column({ space: 5 }) { @@ -126,7 +127,7 @@ struct GridExample { .height(300) Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%') - Grid() { + Grid(this.scroller) { ForEach(this.Number, (day: string) => { ForEach(this.Number, (day: string) => { GridItem() { @@ -149,6 +150,10 @@ struct GridExample { .width('90%') .backgroundColor(0xFAEEE0) .height(300) + Button('next page') + .onClick(() => { // 点击后滑到下一页 + this.scroller.scrollPage({ next: true }) + }) }.width('100%').margin({ top: 5 }) } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md index e9a0cd9f65503c3a52ad4a967d241c403837b797..adb197b0bff707b0f237933e1b48e21689e1154a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md @@ -11,7 +11,7 @@ | 名称 | 参数类型 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**说明：**
path中支持使用start和end进行起点和终点的替代，如：
'Mstart.x start.y L50 50 Lend.x end.y Z'| {
'',
0.0,
1.0,
false
} | 设置组件的运动路径，入参说明如下：
- path：位移动画的运动路径，使用svg路径字符串。
- from：运动路径的起点，默认为0.0。
- to：运动路径的终点，默认为1.0。
- rotatable：是否跟随路径进行旋转。 | +| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**说明：**
path中支持使用start和end进行起点和终点的替代，如：
'Mstart.x start.y L50 50 Lend.x end.y Z'，更多说明请参考[绘制路径](../../ui/ui-js-components-svg-path.md)。 | {
'',
0.0,
1.0,
false
} | 设置组件的运动路径，入参说明如下：
- path：位移动画的运动路径，使用svg路径字符串。
- from：运动路径的起点，默认为0.0。
- to：运动路径的终点，默认为1.0。
- rotatable：是否跟随路径进行旋转。 | ## 示例 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 da8af9d48ef6997675a1933f68725ad0ac5847b5..fb10ce9cc1a0dacdd5b28ccdc97a728435f005b2 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 @@ -5,20 +5,21 @@ > **说明：** > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> | 名称 | 参数 | 参数描述 | | ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| PageTransitionEnter | {
type: RouteType,
duration: number,
curve: [Curve](ts-appendix-enums.md#curve) \| string,
delay: number
} | 设置当前页面的自定义入场动效。
- type：不配置时表明pop为push时效果的逆播。
- duration：动画的时长，单位为毫秒。
- curve：动画曲线。string类型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。
 默认值：Curve.Linear
- delay：动画延迟时长，单位为毫秒，默认不延迟播放。 | -| PageTransitionExit | {
type: RouteType,
duration: number,
curve: [Curve](ts-appendix-enums.md#curve) \| string,
delay: number
} | 设置当前页面的自定义退场动效。
- type：不配置时表明pop为push时效果的逆播
- duration：动画的时长，单位为毫秒。
- curve：动画曲线，string类型取值与PageTransitionEnter相同。
 默认值：Curve.Linear
- delay：动画延迟时长，单位为毫秒，默认不延迟播放。 | +| PageTransitionEnter | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | 设置当前页面的自定义入场动效。
- type：页面转场效果生效的路由类型。
默认值：RouteType.None。
**说明：**没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。
- duration：动画的时长，单位为毫秒。
- curve：动画曲线。string类型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。
默认值：Curve.Linear
- delay：动画延迟时长，单位为毫秒，默认不延迟播放。 | +| PageTransitionExit | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | 设置当前页面的自定义退场动效。
- type：页面转场效果生效的路由类型。
默认值：RouteType.None。
**说明：**没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。
- duration：动画的时长，单位为毫秒。
- curve：动画曲线，string类型取值与PageTransitionEnter相同。
 默认值：Curve.Linear
- delay：动画延迟时长，单位为毫秒，默认不延迟播放。 | ## RouteType枚举说明 | 名称 | 描述 | | ---- | ------------------------------------------------------------ | -| Pop | 重定向指定页面。PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 | -| Push | 跳转到下一页面。PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 | -| None | 页面未重定向。 | +| Pop | 重定向指定页面。从PageB回退到之前的页面PageA。对于PageB，指定RouteType为None或者Pop的PageTransitionExit组件样式生效，对于PageA，指定RouteType为None或者Pop的PageTransitionEnter组件样式生效。 | +| Push | 跳转到下一页面。PageA跳转到下一个新的界面PageB。对于PageA，指定RouteType为None或者Push的PageTransitionExit组件样式生效，对于PageB，指定RouteType为None或者Push的PageTransitionEnter组件样式生效。 | +| None | 页面未重定向。如Push和Pop描述中RouteType为None的情形，即页面进场时PageTransitionEnter的转场效果生效；退场时PageTransitionExit的转场效果生效。 | ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md index e915efdd2c514a9a015f19d6b5060cfb37e30412..4c1606fddcb6cb2e24e2830009a16fcccaba6644 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md @@ -11,7 +11,7 @@ | **名称** | **参数类型** | **描述** | | -------------------- | -------- | ---------------------------------------- | -| focusable | boolean | 设置当前组件是否可以获焦。
**说明：**
存在默认交互逻辑的组件例如Button、TextInput等，默认即为可获焦，Text、Image等组件则默认状态为不可获焦。 | +| focusable | boolean | 设置当前组件是否可以获焦。
**说明：**
存在默认交互逻辑的组件例如Button、TextInput等，默认即为可获焦，Text、Image等组件则默认状态为不可获焦。不可获焦状态下，无法触发[焦点事件](ts-universal-focus-event.md)。 | | tabIndex9+ | number | 自定义组件tab键走焦能力，走焦顺序为：tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。
- tabIndex >= 0：表示元素是可聚焦的，并且可以通过tab键走焦来访问到该元素，tabIndex值越小，则优先获焦；反之，则后获焦。如果多个元素拥有相同的tabIndex，按照元素在当前组件树中的先后顺序获焦
- tabIndex < 0（通常是tabIndex = -1）：表示元素是可聚焦的，但是不能通过tab键走焦来访问到该元素。
默认值：0 | | defaultFocus9+ | boolean | 设置当前组件是否为当前页面上的默认焦点，仅在初次创建的页面第一次进入时生效。
默认值：false | | groupDefaultFocus9+ | boolean | 设置当前组件是否为当前组件所在容器获焦时的默认焦点，仅在初次创建容器节点第一次获焦时生效。
默认值：false
**说明：** 必须与tabIndex联合使用，当某个容器设置了tabIndex，且容器内某子组件设置了groupDefaultFocus，当该容器首次获焦时，会自动将焦点转移至该组件上。
|