diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/refresh_pulldownratio.gif b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/refresh_pulldownratio.gif new file mode 100644 index 0000000000000000000000000000000000000000..44ef6d4e0f352017cf4dfe0d23b38dff1f5a11a5 Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/refresh_pulldownratio.gif differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-grid.md index 590ed217a1696008a6a3073bccaabebc3884a6d3..6f16cef47f31da5235c29c0ffc01ed0eddfb0466 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-grid.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-grid.md @@ -52,6 +52,8 @@ Grid(scroller?: Scroller, layoutOptions?: GridLayoutOptions) Grid布局选项。其中，irregularIndexes和onGetIrregularSizeByIndex可对仅设置rowsTemplate或columnsTemplate的Grid使用，可以指定一个index数组，并为其中的index对应的GridItem设置其占据的行数与列数，使用方法参见[示例3](#示例3可滚动grid设置跨行跨列节点)；onGetRectByIndex可对同时设置rowsTemplate和columnsTemplate的Grid使用，为指定的index对应的GridItem设置位置和大小，使用方法参见[示例1](#示例1固定行列grid)。 +为提高Grid在跳转、列数变化等场景的性能，应该尽量使用GridLayoutOptions。即使Grid中没有任何特殊的跨行跨列节点，也可以通过使用'Grid(this.scroller, {regularSize: [1, 1]})'的方式提高跳转性能。参考[使用GridLayoutOptions提升Grid性能](../../../performance/grid_optimization.md#使用gridlayoutoptions提升grid性能)。 + **系统能力：** SystemCapability.ArkUI.ArkUI.Full | 名称 | 类型 | 必填 | 说明 | diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-refresh.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-refresh.md index c7d3cf7f046026ed2fe9b4ccdc38d3ea0ba1f80d..2552ba6c36bd653c0d094cdccfe803d569c6ffd6 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-refresh.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-refresh.md @@ -48,6 +48,7 @@ Refresh(value: RefreshOptions) > **补充说明：** > - 当未设置builder或refreshingContent时，是通过更新子组件的[translate](ts-universal-attributes-transformation.md#translate)属性实现的下拉位移效果，下拉位移过程中不会触发子组件的[onAreaChange](ts-universal-component-area-change-event.md#onareachange)事件，子组件设置[translate](ts-universal-attributes-transformation.md#translate)属性时不会生效。 > - 当设置了builder或refreshingContent时，是通过更新子组件相对于Refresh组件的位置实现的下拉位移效果，下拉位移过程中可以触发子组件的[onAreaChange](ts-universal-component-area-change-event.md#onareachange)事件，子组件设置[position](ts-universal-attributes-location.md#position)属性时会固定子组件相对于Refresh组件的位置导致子组件不会跟手进行下拉位移。 +> - 通过builder参数设置的自定义组件在未指定宽度和高度时，其尺寸将自适应子组件，在指定宽度而未指定高度时，其高度将自适应下拉距离。通过refreshingContent参数设置的自定义组件若未指定高度，其高度同样会自适应下拉距离。当自定义组件高度自适应下拉距离时，随着下拉距离的增加，该组件的高度亦随之增加；当自定义组件的高度设定为固定值或达到最大高度限制时，随着下拉距离的增加，自定义组件与Refresh组件上边界之间的间距亦会随之增加。 ## 属性 @@ -712,4 +713,73 @@ struct RefreshExample { ``` -![refresh_boundary_resilience](figures/refresh_maxpulldowndistance_demo_7.gif) \ No newline at end of file +![refresh_maxpulldowndistance](figures/refresh_maxpulldowndistance_demo_7.gif) + +### 示例8（禁止下拉刷新） + +通过[pullDownRatio](#pulldownratio12)属性禁止下拉刷新。 + +```ts +// xxx.ets +@Entry +@Component +struct RefreshExample { + @State isRefreshing: boolean = false; + @State ratio: number | undefined = undefined; + @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']; + + build() { + Column() { + Row() { + Button('禁止下拉刷新').onClick(() => { + this.ratio = 0 + }) + Button('允许下拉刷新').onClick(() => { + this.ratio = undefined + }) + } + Refresh({ refreshing: $$this.isRefreshing }) { + List() { + ForEach(this.arr, (item: string) => { + ListItem() { + Text('' + item) + .width('70%') + .height(80) + .fontSize(16) + .margin(10) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(0xFFFFFF) + } + }, (item: string) => item) + } + .onScrollIndex((first: number) => { + console.info(first.toString()); + }) + .width('100%') + .height('100%') + .alignListItem(ListItemAlign.Center) + .scrollBar(BarState.Off) + } + .backgroundColor(0x89CFF0) + .refreshOffset(64) + .pullToRefresh(true) + .pullDownRatio(this.ratio) + .onStateChange((refreshStatus: RefreshStatus) => { + console.info('Refresh onStatueChange state is ' + refreshStatus); + }) + .onOffsetChange((value: number) => { + console.info('Refresh onOffsetChange offset:' + value); + }) + .onRefreshing(() => { + setTimeout(() => { + this.isRefreshing = false; + }, 2000) + console.log('onRefreshing test'); + }) + } + } +} +``` + +![refresh_pulldownratio](figures/refresh_pulldownratio.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-scroll.md index 0aca2c2193ef955ebf07f020fe144d419cc97505..06f686e3b22c26414a079a3e1d350dd49426fc64 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-scroll.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-scroll.md @@ -665,7 +665,9 @@ scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign, options?: Sc > **说明：** > -> 仅支持ArcList、Grid、List、WaterFlow组件。 +> 1.仅支持ArcList、Grid、List、WaterFlow组件。 +> +> 2.在LazyForEach、ForEach、Repeat刷新数据源时，需确保在数据刷新完成之后再调用此接口。 **原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 diff --git a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-UIContext.md b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-UIContext.md index 1b3ed616f649f7ba0aeeb903d94a0e4d037576bc..30bb80522d176cee726416b791b726d7917436c6 100644 --- a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-UIContext.md +++ b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-UIContext.md @@ -3289,7 +3289,7 @@ off(type: 'navDestinationUpdate', navigationUniqueId: number, callback?: Callbac on(type: 'scrollEvent', callback: Callback\): void -监听滚动事件的开始和结束。 +监听所有滚动组件滚动事件的开始和结束。滚动组件包括[List](./arkui-ts/ts-container-list.md)、[Grid](./arkui-ts/ts-container-grid.md)、[Scroll](./arkui-ts/ts-container-scroll.md)、[WaterFlow](./arkui-ts/ts-container-waterflow.md)、[ArcList](./arkui-ts/ts-container-arclist.md)。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -3310,7 +3310,7 @@ on(type: 'scrollEvent', callback: Callback\): void off(type: 'scrollEvent', callback?: Callback\): void -取消监听滚动事件的开始和结束。 +取消监听所有滚动组件滚动事件的开始和结束。滚动组件包括[List](./arkui-ts/ts-container-list.md)、[Grid](./arkui-ts/ts-container-grid.md)、[Scroll](./arkui-ts/ts-container-scroll.md)、[WaterFlow](./arkui-ts/ts-container-waterflow.md)、[ArcList](./arkui-ts/ts-container-arclist.md)。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -3331,7 +3331,7 @@ off(type: 'scrollEvent', callback?: Callback\): void on(type: 'scrollEvent', options: observer.ObserverOptions, callback: Callback\): void -监听滚动事件的开始和结束。 +监听指定id的滚动组件滚动事件的开始和结束。滚动组件包括[List](./arkui-ts/ts-container-list.md)、[Grid](./arkui-ts/ts-container-grid.md)、[Scroll](./arkui-ts/ts-container-scroll.md)、[WaterFlow](./arkui-ts/ts-container-waterflow.md)、[ArcList](./arkui-ts/ts-container-arclist.md)。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -3353,7 +3353,7 @@ on(type: 'scrollEvent', options: observer.ObserverOptions, callback: Callback\): void -取消监听滚动事件的开始和结束。 +取消监听指定id的滚动组件滚动事件的开始和结束。滚动组件包括[List](./arkui-ts/ts-container-list.md)、[Grid](./arkui-ts/ts-container-grid.md)、[Scroll](./arkui-ts/ts-container-scroll.md)、[WaterFlow](./arkui-ts/ts-container-waterflow.md)、[ArcList](./arkui-ts/ts-container-arclist.md)。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -3376,11 +3376,11 @@ import { UIObserver } from '@kit.ArkUI'; @Component struct Index { scroller: Scroller = new Scroller(); - observer: UIObserver = new UIObserver(); + observer: UIObserver = this.getUIContext().getUIObserver(); private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7]; build() { - Row() { + Column() { Column() { Scroll(this.scroller) { Column() { @@ -3396,7 +3396,7 @@ struct Index { }, (item: string) => item) }.width('100%') } - .id("testId") + .id('testId') .height('80%') } .width('100%') @@ -3417,13 +3417,13 @@ struct Index { Row() { Button('UIObserverWithId on') .onClick(() => { - this.observer.on('scrollEvent', { id:"testId" }, (info) => { + this.observer.on('scrollEvent', { id: 'testId' }, (info) => { console.info('scrollEventInfo', JSON.stringify(info)); }); }) Button('UIObserverWithId off') .onClick(() => { - this.observer.off('scrollEvent', { id:"testId" }); + this.observer.off('scrollEvent', { id: 'testId' }); }) } } diff --git a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-frameNode.md b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-frameNode.md index a8e07f318f51dcc5b97afca188e41d8ba0b09ae0..725f3ca44a884517951d240e4a1abab9ae8e69f3 100644 --- a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-frameNode.md +++ b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-frameNode.md @@ -2145,6 +2145,69 @@ createNode(context: UIContext, nodeType: 'Swiper'): Swiper ```ts typeNode.createNode(uiContext, 'Swiper'); ``` + +### getAttribute('Swiper')20+ +getAttribute(node: FrameNode, nodeType: 'Swiper'): SwiperAttribute | undefined + +获取Swiper节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | +| nodeType | 'Swiper' | 是 | 获取Swiper节点类型的属性。 | + +**返回值：** + +| 类型 | 说明 | +| ------------------ | ------------------ | +| SwiperAttribute \| undefined | Swiper节点类型的属性，若获取失败，则返回undefined。 | + +**示例：** + + + +```ts +typeNode.getAttribute(node, 'Swiper'); +``` + +### bindController('Swiper')20+ +bindController(node: FrameNode, controller: SwiperController, nodeType: 'Swiper'): void + +将控制器SwiperController绑定到Swiper节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定控制器的目标节点。 | +| controller | [SwiperController](arkui-ts/ts-container-swiper.md#swipercontroller) | 是 | Swiper容器组件的控制器。 | +| nodeType | 'Swiper' | 是 | 绑定控制器的目标节点的节点类型为Swiper。 | + +**错误码：** + +| 错误码ID | 错误信息 | +| -------- | -------------------------------- | +| 100023 | Parameter error. Possible causes: 1. the component type of the node is error. 2. the node is null or undefined. 3. the controller is null or undefined. | +| 100021 | The FrameNode is not modifiable. | + +**示例：** + + + +```ts +typeNode.bindController(node, swiperController, 'Swiper'); +``` + ### Progress12+ type Progress = TypedFrameNode<ProgressInterface, ProgressAttribute> @@ -2646,6 +2709,68 @@ getEvent(node: FrameNode, nodeType: 'List'): UIListEvent | undefined typeNode.getEvent(node, 'List'); ``` +### getAttribute('List')20+ +getAttribute(node: FrameNode, nodeType: 'List'): ListAttribute | undefined + +获取List节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | +| nodeType | 'List' | 是 | 获取List节点类型的属性。 | + +**返回值：** + +| 类型 | 说明 | +| ------------------ | ------------------ | +| ListAttribute \| undefined | List节点类型的属性，若获取失败，则返回undefined。 | + +**示例：** + + + +```ts +typeNode.getAttribute(node, 'List'); +``` + +### bindController('List')20+ +bindController(node: FrameNode, controller: Scroller, nodeType: 'List'): void + +将滚动控制器Scroller绑定到List节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定滚动控制器的目标节点。 | +| controller | [Scroller](arkui-ts/ts-container-scroll.md#scroller) | 是 | 滚动控制器。 | +| nodeType | 'List' | 是 | 绑定滚动控制器的目标节点的节点类型为List。 | + +**错误码：** + +| 错误码ID | 错误信息 | +| -------- | -------------------------------- | +| 100023 | Parameter error. Possible causes: 1. the component type of the node is error. 2. the node is null or undefined. 3. the controller is null or undefined. | +| 100021 | The FrameNode is not modifiable. | + +**示例：** + + + +```ts +typeNode.bindController(node, scroller, 'List'); +``` + ### ListItem12+ type ListItem = TypedFrameNode<ListItemInterface, ListItemAttribute> @@ -2689,6 +2814,36 @@ createNode(context: UIContext, nodeType: 'ListItem'): ListItem typeNode.createNode(uiContext, 'ListItem'); ``` +### getAttribute('ListItem')20+ +getAttribute(node: FrameNode, nodeType: 'ListItem'): ListItemAttribute | undefined + +获取ListItem节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | +| nodeType | 'ListItem' | 是 | 获取ListItem节点类型的属性。 | + +**返回值：** + +| 类型 | 说明 | +| ------------------ | ------------------ | +| ListItemAttribute \| undefined | ListItem节点类型的属性，若获取失败，则返回undefined。 | + +**示例：** + + + +```ts +typeNode.getAttribute(node, 'ListItem'); +``` + ### TextInput12+ type TextInput = TypedFrameNode<TextInputInterface, TextInputAttribute> @@ -2818,6 +2973,36 @@ createNode(context: UIContext, nodeType: 'ListItemGroup'): ListItemGroup typeNode.createNode(uiContext, 'ListItemGroup'); ``` +### getAttribute('ListItemGroup')20+ +getAttribute(node: FrameNode, nodeType: 'ListItemGroup'): ListItemGroupAttribute | undefined + +获取ListItemGroup节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | +| nodeType | 'ListItemGroup' | 是 | 获取ListItemGroup节点类型的属性。 | + +**返回值：** + +| 类型 | 说明 | +| ------------------ | ------------------ | +| ListItemGroupAttribute \| undefined | ListItemGroup节点类型的属性，若获取失败，则返回undefined。 | + +**示例：** + + + +```ts +typeNode.getAttribute(node, 'ListItemGroup'); +``` + ### WaterFlow12+ type WaterFlow = TypedFrameNode<WaterFlowInterface, WaterFlowAttribute> @@ -2891,6 +3076,68 @@ getEvent(node: FrameNode, nodeType: 'WaterFlow'): UIWaterFlowEvent | undefined typeNode.getEvent(node, 'WaterFlow'); ``` +### getAttribute('WaterFlow')20+ +getAttribute(node: FrameNode, nodeType: 'WaterFlow'): WaterFlowAttribute | undefined + +获取WaterFlow节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | +| nodeType | 'WaterFlow' | 是 | 获取WaterFlow节点类型的属性。 | + +**返回值：** + +| 类型 | 说明 | +| ------------------ | ------------------ | +| WaterFlowAttribute \| undefined | WaterFlow节点类型的属性，若获取失败，则返回undefined。 | + +**示例：** + + + +```ts +typeNode.getAttribute(node, 'WaterFlow'); +``` + +### bindController('WaterFlow')20+ +bindController(node: FrameNode, controller: Scroller, nodeType: 'WaterFlow'): void + +将滚动控制器Scroller绑定到WaterFlow节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定滚动控制器的目标节点。 | +| controller | [Scroller](arkui-ts/ts-container-scroll.md#scroller) | 是 | 滚动控制器。 | +| nodeType | 'WaterFlow' | 是 | 绑定滚动控制器的目标节点的节点类型为WaterFlow。 | + +**错误码：** + +| 错误码ID | 错误信息 | +| -------- | -------------------------------- | +| 100023 | Parameter error. Possible causes: 1. the component type of the node is error. 2. the node is null or undefined. 3. the controller is null or undefined. | +| 100021 | The FrameNode is not modifiable. | + +**示例：** + + + +```ts +typeNode.bindController(node, scroller, 'WaterFlow'); +``` + ### FlowItem12+ type FlowItem = TypedFrameNode<FlowItemInterface, FlowItemAttribute> @@ -2934,6 +3181,36 @@ createNode(context: UIContext, nodeType: 'FlowItem'): FlowItem typeNode.createNode(uiContext, 'FlowItem'); ``` +### getAttribute('FlowItem')20+ +getAttribute(node: FrameNode, nodeType: 'FlowItem'): FlowItemAttribute | undefined + +获取FlowItem节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | +| nodeType | 'FlowItem' | 是 | 获取FlowItem节点类型的属性。 | + +**返回值：** + +| 类型 | 说明 | +| ------------------ | ------------------ | +| FlowItemAttribute \| undefined | FlowItem节点类型的属性，若获取失败，则返回undefined。 | + +**示例：** + + + +```ts +typeNode.getAttribute(node, 'FlowItem'); +``` + ### XComponent12+ type XComponent = TypedFrameNode<XComponentInterface, XComponentAttribute> @@ -3206,6 +3483,68 @@ getEvent(node: FrameNode, nodeType: 'Grid'): UIGridEvent | undefined typeNode.getEvent(node, 'Grid'); ``` +### getAttribute('Grid')20+ +getAttribute(node: FrameNode, nodeType: 'Grid'): GridAttribute | undefined + +获取Grid节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | +| nodeType | 'Grid' | 是 | 获取Grid节点类型的属性。 | + +**返回值：** + +| 类型 | 说明 | +| ------------------ | ------------------ | +| GridAttribute \| undefined | Grid节点类型的属性，若获取失败，则返回undefined。 | + +**示例：** + + + +```ts +typeNode.getAttribute(node, 'Grid'); +``` + +### bindController('Grid')20+ +bindController(node: FrameNode, controller: Scroller, nodeType: 'Grid'): void + +将滚动控制器Scroller绑定到Grid节点。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则抛出异常。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 绑定滚动控制器的目标节点。 | +| controller | [Scroller](arkui-ts/ts-container-scroll.md#scroller) | 是 | 滚动控制器。 | +| nodeType | 'Grid' | 是 | 绑定滚动控制器的目标节点的节点类型为Grid。 | + +**错误码：** + +| 错误码ID | 错误信息 | +| -------- | -------------------------------- | +| 100023 | Parameter error. Possible causes: 1. the component type of the node is error. 2. the node is null or undefined. 3. the controller is null or undefined. | +| 100021 | The FrameNode is not modifiable. | + +**示例：** + + + +```ts +typeNode.bindController(node, scroller, 'Grid'); +``` + ### GridItem14+ type GridItem = TypedFrameNode<GridItemInterface, GridItemAttribute> @@ -3249,6 +3588,36 @@ createNode(context: UIContext, nodeType: 'GridItem'): GridItem typeNode.createNode(uiContext, 'GridItem'); ``` +### getAttribute('GridItem')20+ +getAttribute(node: FrameNode, nodeType: 'GridItem'): GridItemAttribute | undefined + +获取GridItem节点的属性。若该节点非ArkTS语言创建，则需要设置是否支持跨语言访问，如果不支持跨语言访问，则返回undefined。该接口不支持声明式方式创建的节点。 + +**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 + +**系统能力：** SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 类型 | 必填 | 说明 | +| ------------------ | ------------------ | ------------------- | ------------------- | +| node | [FrameNode](./js-apis-arkui-frameNode.md) | 是 | 获取属性时所需的目标节点。 | +| nodeType | 'GridItem' | 是 | 获取GridItem节点类型的属性。 | + +**返回值：** + +| 类型 | 说明 | +| ------------------ | ------------------ | +| GridItemAttribute \| undefined | GridItem节点类型的属性，若获取失败，则返回undefined。 | + +**示例：** + + + +```ts +typeNode.getAttribute(node, 'GridItem'); +``` + ### TextClock14+ type TextClock = TypedFrameNode<TextClockInterface, TextClockAttribute> diff --git a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-observer.md b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-observer.md index 5ffe9ba6052b0c976f728e5d696916c98b7a5bec..ebf1a851ab820be6e466e7ab95c4372d13d18281 100644 --- a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-observer.md +++ b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-observer.md @@ -394,7 +394,7 @@ off(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callba on(type: 'scrollEvent', callback: Callback\): void -监听滚动事件的开始和结束。 +监听所有滚动组件滚动事件的开始和结束。滚动组件包括[List](./arkui-ts/ts-container-list.md)、[Grid](./arkui-ts/ts-container-grid.md)、[Scroll](./arkui-ts/ts-container-scroll.md)、[WaterFlow](./arkui-ts/ts-container-waterflow.md)、[ArcList](./arkui-ts/ts-container-arclist.md)。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -415,7 +415,7 @@ on(type: 'scrollEvent', callback: Callback\): void off(type: 'scrollEvent', callback?: Callback\): void -取消监听滚动事件的开始和结束。 +取消监听所有滚动组件滚动事件的开始和结束。滚动组件包括[List](./arkui-ts/ts-container-list.md)、[Grid](./arkui-ts/ts-container-grid.md)、[Scroll](./arkui-ts/ts-container-scroll.md)、[WaterFlow](./arkui-ts/ts-container-waterflow.md)、[ArcList](./arkui-ts/ts-container-arclist.md)。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -436,7 +436,7 @@ off(type: 'scrollEvent', callback?: Callback\): void on(type: 'scrollEvent', options: ObserverOptions, callback: Callback\): void -监听滚动事件的开始和结束。 +监听指定id的滚动组件滚动事件的开始和结束。滚动组件包括[List](./arkui-ts/ts-container-list.md)、[Grid](./arkui-ts/ts-container-grid.md)、[Scroll](./arkui-ts/ts-container-scroll.md)、[WaterFlow](./arkui-ts/ts-container-waterflow.md)、[ArcList](./arkui-ts/ts-container-arclist.md)。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -458,7 +458,7 @@ on(type: 'scrollEvent', options: ObserverOptions, callback: Callback\): void -取消监听滚动事件的开始和结束。 +取消监听指定id的滚动组件滚动事件的开始和结束。滚动组件包括[List](./arkui-ts/ts-container-list.md)、[Grid](./arkui-ts/ts-container-grid.md)、[Scroll](./arkui-ts/ts-container-scroll.md)、[WaterFlow](./arkui-ts/ts-container-waterflow.md)、[ArcList](./arkui-ts/ts-container-arclist.md)。 **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 @@ -481,7 +481,7 @@ import { uiObserver } from '@kit.ArkUI' @Component struct Index { scroller: Scroller = new Scroller(); - options: uiObserver.ObserverOptions = { id: "testId" }; + options: uiObserver.ObserverOptions = { id: 'testId' }; private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7] build() { @@ -501,7 +501,7 @@ struct Index { }, (item: string) => item) }.width('100%') } - .id("testId") + .id('testId') .height('80%') } .width('100%') diff --git a/zh-cn/application-dev/ui/arkts-layout-development-create-waterflow.md b/zh-cn/application-dev/ui/arkts-layout-development-create-waterflow.md index f0d5c8b857138e7ed7cc31e40a00a975f8f77907..62b0a1a5de227a4b348517fd1f9f42a384113eb2 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-create-waterflow.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-create-waterflow.md @@ -3,6 +3,10 @@ [瀑布流](../reference/apis-arkui/arkui-ts/ts-container-waterflow.md)常用于展示图片信息，尤其在购物和资讯类应用中。 ArkUI提供了WaterFlow容器组件，用于构建瀑布流布局。WaterFlow组件支持条件渲染、循环渲染和懒加载等方式生成子组件。 +> **说明：** +> +> 本文仅展示关键代码片段，可运行的完整代码请参考[WaterFlow示例代码](../reference/apis-arkui/arkui-ts/ts-container-waterflow.md#示例)。 + ## 布局与约束 瀑布流支持横向和纵向布局。在纵向布局中，可以通过[columnsTemplate](../reference/apis-arkui/arkui-ts/ts-container-waterflow.md#columnstemplate)设置列数；在横向布局中，可以通过[rowsTemplate](../reference/apis-arkui/arkui-ts/ts-container-waterflow.md#rowstemplate)设置行数。