| 否 | 用于设置断点位置的单调递增数组。
默认值：["320vp", "520vp", "840vp"] |
-| reference | BreakpointsReference | 否 | - | 竖直getter option。 |
+| value | Array<string> | 否 | 设置断点位置的单调递增数组。
默认值：["320vp", "520vp", "840vp"] |
+| reference | BreakpointsReference | 否 | 竖直gutter option。 |
```ts
// 启用xs、sm、md共3个断点
breakpoints: {value: ["100vp", "200vp"]}
@@ -108,7 +101,7 @@ GridRow(options?: {columns?: number | GridRowColumnOption, gutter?: Length | Get
### onBreakpointChange
-onBreakpointChange(callback: (breakpoints: string) => void
+onBreakpointChange(callback: (breakpoints: string) => void)
**参数：**
@@ -116,8 +109,6 @@ onBreakpointChange(callback: (breakpoints: string) => void
| ----- | ------ | ---- | ---------------------------------------- |
|breakpoints| string |是|断点发生变化时触发回调
取值为`"xs"`、`"sm"`、`"md"`、`"lg"`、`"xl"`、`"xxl"`。|
-
-
## 示例
```ts
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
index e505f1a7577e7dc6f7a3256ce5b3706841f3d18c..0b6bad849dc9b001894eac9a49a160f45b9d358b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
@@ -1,19 +1,13 @@
# List
+列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
+
> **说明：**
>
> - 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> - 该组件回弹的前提是要有滚动。内容小于一屏时，没有回弹效果。
-列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
-
-
-## 权限列表
-
-无
-
-
## 子组件
包含[ListItem](ts-container-listitem.md)、[ListItemGroup](ts-container-listitemgroup.md)子组件。
@@ -21,67 +15,67 @@
## 接口
-List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller})
+List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
-- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | space | [Length](../../ui/ts-types.md#length) | 否 | 0 | 列表项间距。 |
- | initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效。 |
- | scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
+**参数：**
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| space | number \| string | 否 | 列表项间距。
默认值：0 |
+| initialIndex | number | 否 | 设置当前List初次加载时视口起始位置显示的item的索引值。如果设置的值超过了当前List最后一个item的索引值，则设置不生效。
默认值：0 |
+| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
## 属性
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| listDirection | [Axis](ts-appendix-enums.md#axis) | Vertical | 设置List组件排列方向参照Axis枚举说明。 |
-| divider | {
strokeWidth: Length,
color?:[ResourceColor](../../ui/ts-types.md),
startMargin?: Length,
endMargin?: Length
} | - | 用于设置ListItem分割线样式，默认无分割线。
strokeWidth: 分割线的线宽。
color: 分割线的颜色。
startMargin： 分割线距离列表侧边起始端的距离。
endMargin: 分割线距离列表侧边结束端的距离。 |
-| scrollBar | [BarState](ts-appendix-enums.md#barstate) | BarState.Off | 设置滚动条状态。 |
-| cachedCount | number | 1 | 设置预加载的ListItem的数量。 |
-| editMode | boolean | false | 声明当前List组件是否处于可编辑模式。 |
-| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | EdgeEffect.Spring | 滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。 |
-| chainAnimation | boolean | false | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
- false：不启用链式联动。
- true：启用链式联动。 |
-| multiSelectable8+ | boolean | false | 是否开启鼠标框选。
- false：关闭框选。
- true：开启框选。 |
-| restoreId8+ | number | - | 组件迁移标识符，标识后的组件在应用迁移时，组件状态会被迁移到被拉起方的同标识组件。
列表组件状态，包括起始位置显示的item序号。 |
-| lanes9+ | number \|
{
minLength: Length,
maxLength: Length
} | 1 | 以列模式为例（listDirection为Axis.Vertical）:
lanes用于决定List组件在交叉轴方向按几列布局，规则如下：
- lanes为指定的数量时，根据指定的数量与List组件的交叉轴宽度来决定每列的宽度；
- lane设置了{minLength，maxLength}时，根据List组件的宽度自适应决定lanes数量（即列数），保证缩放过程中lane的宽度符合{minLength，maxLength}的限制。其中，minLength条件会被优先满足，即优先保证符合ListItem的宽度符合最小宽度限制。例如在列模式下，设置了{minLength: 40vp，maxLength: 60vp}，则当List组件宽度为70vp时，ListItem为一列，并且根据alignListItem属性做靠左、居中或者靠右布局；当List组件宽度变化至80vp时，符合两倍的minLength，则ListItem自适应为两列。 |
-| alignListItem9+ | ListItemAlign | ListItemAlign.Center | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为居中。 |
-| sticky9+ | StickyStyle | StickyStyle.None | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底，参见StickyStyle的枚举说明。|
-
-- ListItemAlign9+枚举说明
-
- | 名称 | 描述 |
- | ------ | -------------------------------------- |
- | Start | ListItem在List中，交叉轴方向首部对齐。 |
- | Center | ListItem在List中，交叉轴方向居中对齐。 |
- | End | ListItem在List中，交叉轴方向尾部对齐。 |
-
-- StickyStyle9+枚举说明
-
- | 名称 | 描述 |
- | ------ | -------------------------------------- |
- | None | ListItemGroup的header不吸顶，footer不吸底。 |
- | Header | ListItemGroup的header吸顶。 |
- | Footer | ListItemGroup的footer吸底。 |
-
- sticky属性可以设置为 StickyStyle.Header | StickyStyle.Footer 以同时支持header吸顶和footer吸底。
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。
默认值：Axis.Vertical |
+| divider | {
strokeWidth: [Length](../../ui/ts-types.md#length),
color?:[ResourceColor](../../ui/ts-types.md),
startMargin?: Length,
endMargin?: Length
} \| null | 设置ListItem分割线样式，默认无分割线。
- strokeWidth: 分割线的线宽。
- color: 分割线的颜色。
- startMargin: 分割线与列表侧边起始端的距离。
- endMargin: 分割线与列表侧边结束端的距离。 |
+| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off |
+| cachedCount | number | 设置预加载的ListItem数量。具体使用可参考[减少应用白块说明](../../ui/ts-performance-improvement-recommendation.md#减少应用滑动白块)。
默认值：1 |
+| editMode | boolean | 声明当前List组件是否处于可编辑模式。
默认值：false |
+| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果。
默认值：EdgeEffect.Spring |
+| chainAnimation | boolean | 设置当前List是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：List内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
默认值：false
- false：不启用链式联动。
- true：启用链式联动。 |
+| multiSelectable8+ | boolean | 是否开启鼠标框选。
默认值：false
- false：关闭框选。
- true：开启框选。 |
+| lanes9+ | number \| [LengthConstrain](../../ui/ts-types.md#lengthconstrain) | 以列模式为例（listDirection为Axis.Vertical）:
lanes用于决定List组件在交叉轴方向按几列布局。
默认值：1
规则如下：
- lanes为指定的数量时，根据指定的数量与List组件的交叉轴宽度来决定每列的宽度；
- lane设置了{minLength，maxLength}时，根据List组件的宽度自适应决定lanes数量（即列数），保证缩放过程中lane的宽度符合{minLength，maxLength}的限制。其中，minLength条件会被优先满足，即优先保证符合ListItem的宽度符合最小宽度限制。例如在列模式下，设置了{minLength: 40vp，maxLength: 60vp}，则当List组件宽度为70vp时，ListItem为一列，并且根据alignListItem属性做靠左、居中或者靠右布局；当List组件宽度变化至80vp时，符合两倍的minLength，则ListItem自适应为两列。 |
+| alignListItem9+ | ListItemAlign | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为居中。
默认值：ListItemAlign.Center |
+| sticky9+ | StickyStyle | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。
默认值：StickyStyle.None
**说明：**
sticky属性可以设置为 StickyStyle.Header \| StickyStyle.Footer 以同时支持header吸顶和footer吸底。 |
+
+## ListItemAlign9+枚举说明
+
+| 名称 | 描述 |
+| ------ | -------------------------------------- |
+| Start | ListItem在List中，交叉轴方向首部对齐。 |
+| Center | ListItem在List中，交叉轴方向居中对齐。 |
+| End | ListItem在List中，交叉轴方向尾部对齐。 |
+
+## StickyStyle9+枚举说明
+
+| 名称 | 描述 |
+| ------ | -------------------------------------- |
+| None | ListItemGroup的header不吸顶，footer不吸底。 |
+| Header | ListItemGroup的header吸顶。 |
+| Footer | ListItemGroup的footer吸底。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
-| onItemDelete(event: (index: number) => boolean) | 列表项删除时触发。 |
-| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发，返回值scrollOffset为滑动偏移量，scrollState为当前滑动状态。 |
-| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发，返回值分别为滑动起始位置索引值与滑动结束位置索引值。 |
+| onItemDelete(event: (index: number) => boolean) | 当List组件在编辑模式时，点击ListItem右边出现的删除按钮时触发。
- index: 被删除的列表项的索引值。 |
+| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发。
- scrollOffset: 滑动偏移量。
- [scrollState](#scrollstate枚举说明): 当前滑动状态。 |
+| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发。
计算索引值时，ListItemGroup作为一个整体占一个索引值，不计算ListItemGroup内部ListItem的索引值。
- start: 滑动起始位置索引值。
- end: 滑动结束位置索引值。 |
| onReachStart(event: () => void) | 列表到达起始位置时触发。 |
| onReachEnd(event: () => void) | 列表到底末尾位置时触发。 |
+| onScrollBegin9+(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | 列表开始滑动时触发。
\- dx：即将发生的水平方向滚动量。
\- dy：即将发生的竖直方向滚动量。
- dxRemain：水平方向滚动剩余量。
\- dyRemain：竖直方向滚动剩余量。 |
| onScrollStop(event: () => void) | 列表滑动停止时触发。 |
-| onItemMove(event: (from: number, to: number) => boolean) | 列表元素发生移动时触发，返回值from、to分别为移动前索引值与移动后索引值。 |
-| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) \| void) | 开始拖拽列表元素时触发，返回值event见ItemDragInfo对象说明，itemIndex为被拖拽列表元素索引值。 |
-| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入列表元素范围内时触发，返回值event见ItemDragInfo对象说明。 |
-| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在列表元素范围内移动时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽起始位置，insertIndex为拖拽插入位置。 |
-| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开列表元素时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽离开的列表元素索引值。 |
-| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的列表元素可作为拖拽释放目标，当在列表元素内停止拖拽时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽起始位置，insertIndex为拖拽插入位置，isSuccess为是否成功释放。 |
+| onItemMove(event: (from: number, to: number) => boolean) | 列表元素发生移动时触发。
- from: 移动前索引值。
- to: 移动后索引值。 |
+| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | 开始拖拽列表元素时触发。
- event: 见[ItemDragInfo对象说明](ts-container-grid.md#itemdraginfo对象说明)。
- itemIndex: 被拖拽列表元素索引值。 |
+| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入列表元素范围内时触发。
- event: 见[ItemDragInfo对象说明](ts-container-grid.md#itemdraginfo对象说明)。 |
+| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在列表元素范围内移动时触发。
- event: 见[ItemDragInfo对象说明](ts-container-grid.md#itemdraginfo对象说明)。
- itemIndex: 拖拽起始位置。
- insertIndex: 拖拽插入位置。 |
+| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开列表元素时触发。
- event: 见[ItemDragInfo对象说明](ts-container-grid.md#itemdraginfo对象说明)。
- itemIndex: 拖拽离开的列表元素索引值。 |
+| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的列表元素可作为拖拽释放目标，当在列表元素内停止拖拽时触发。
- event: 见ItemDragInfo对象说明。
- itemIndex: 拖拽起始位置。
- insertIndex: 拖拽插入位置。
- isSuccess: 是否成功释放。 |
## ScrollState枚举说明
@@ -92,19 +86,20 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller}
| Fling | 手指拖动状态。 |
> **说明：**
-> List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件：
->
-> - editMode属性设置为true。
->
-> - 绑定onItemDelete事件，且事件回调返回true。
->
-> - ListItem的editable属性设置为true。
->
-> 实现ListItem拖拽，需满足以下条件：
->
-> - editMode属性设置为true。
->
-> - 绑定onDragStart事件，且事件回调中返回浮动UI布局。
+>
+> 要使List处于可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件：
+>
+> - editMode属性设置为true。
+>
+> - 绑定onItemDelete事件，且事件回调返回true。
+>
+> - ListItem的editable属性设置为true。
+>
+> 实现ListItem拖拽，需满足以下条件：
+>
+> - editMode属性设置为true。
+>
+> - 绑定onDragStart事件，且事件回调中返回浮动UI布局。
## 示例
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
index 51b4f079c1a64dca5d2cb18a678611d760178965..281dbaeca112580429e30278772597160d41a568 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
@@ -1,15 +1,10 @@
# ListItem
-> **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
用来展示列表具体item，宽度默认充满List组件，必须配合List来使用。
-
-## 权限列表
-
-无
+> **说明：**
+>
+> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 子组件
@@ -19,24 +14,25 @@
## 接口
-ListItem()
-
+ListItem(value?: string)
## 属性
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------- | -------- | -------- | -------- |
-| sticky | Sticky | Sticky.None | 设置ListItem吸顶效果，参见Sticky枚举描述。 |
-| editable | boolean \| EditMode | false | 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动。 |
-| selectable8+ | boolean | true | 当前ListItem元素是否可以被鼠标框选。
> **说明：**
> 外层List容器的鼠标框选开启时，ListItem的框选才生效。 |
-| swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: SwipeEdgeEffect,
} | - | 用于设置ListItem的划出组件。
start: ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。
end: ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。
edgeEffect: 滑动效果，参见SwipeEdgeEffect的枚举说明。
|
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| sticky | [Sticky](#sticky枚举说明) | 设置ListItem吸顶效果。
默认值：Sticky.None |
+| editable | boolean \| [EditMode](#editmode枚举说明) | 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动列表项。
默认值：false |
+| selectable8+ | boolean | 当前ListItem元素是否可以被鼠标框选。
**说明：**
外层List容器的鼠标框选开启时，ListItem的框选才生效。
默认值：true |
+| swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9枚举说明),
} | 用于设置ListItem的划出组件。
- start: ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。
- end: ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。
- edgeEffect: 滑动效果。
|
## Sticky枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | None | 无吸顶效果。 |
- | Normal | 当前item吸顶。 |
- | Opacity | 当前item吸顶显示透明度变化效果。 |
+| 名称 | 描述 |
+| -------- | -------- |
+| None | 无吸顶效果。 |
+| Normal | 当前item吸顶。 |
+| Opacity | 当前item吸顶显示透明度变化效果。 |
## EditMode枚举说明
@@ -47,10 +43,10 @@ ListItem()
| Movable | 可移动。 |
## SwipeEdgeEffect9+枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | Spring | ListItem划动距离超过划出组件大小后可以继续划动，松手后按照弹簧阻尼曲线回弹。 |
- | None | ListItem划动距离不能超过划出组件大小。 |
+| 名称 | 描述 |
+| -------- | -------- |
+| Spring | ListItem划动距离超过划出组件大小后可以继续划动，松手后按照弹簧阻尼曲线回弹。 |
+| None | ListItem划动距离不能超过划出组件大小。 |
## 事件
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
index 206f577e2ddb3e6d40ae68b3976e3b42f1b475bf..74b42ee136bc31fe4e70369735d57875d22fa586 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitemgroup.md
@@ -6,10 +6,6 @@
>
> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-## 权限列表
-
-无
-
## 子组件
@@ -18,15 +14,15 @@
## 接口
-ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string}})
+ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string})
**参数：**
- | 参数名 | 参数类型 | 必填 | 参数描述 |
- | -------- | -------- | -------- | -------- |
- | header | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 设置ListItemGroup头部组件。 |
- | footer | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 设置ListItemGroup尾部组件。 |
- | space | number \| string | 否 | 列表项间距。 |
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| header | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 设置ListItemGroup头部组件。 |
+| footer | [CustomBuilder](../../ui/ts-types.md#custombuilder8) | 否 | 设置ListItemGroup尾部组件。 |
+| space | number \| string | 否 | 列表项间距。 |
## 属性
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
index 10549452d1f1471464b06f7795a48477a905fbe1..8546ba4a914ee5b47575020de6360222a70f2cc2 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
@@ -1,19 +1,13 @@
# Scroll
+可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
+
> **说明：**
> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> - 该组件嵌套List子组件滚动时，若List不设置宽高，则默认全部加载，在对性能有要求的场景下建议指定List的宽高。
> - 该组件回弹的前提是要有滚动。内容小于一屏时，没有回弹效果。
-可滚动的容器组件，当子组件的布局尺寸超过父组件的视口时，内容可以滚动。
-
-
-## 权限列表
-
-无
-
-
## 子组件
支持单个子组件。
@@ -23,23 +17,25 @@
Scroll(scroller?: Scroller)
-
## 属性
-| 名称 | 参数类型 | 默认值 | 描述 |
-| -------------- | ---------------------------------------- | ------------------------ | --------- |
-| scrollable | ScrollDirection | ScrollDirection.Vertical | 设置滚动方法。 |
-| scrollBar | [BarState](ts-appendix-enums.md#barstate) | BarState.Off | 设置滚动条状态。 |
-| scrollBarColor | string \| number \| Color | - | 设置滚动条的颜色。 |
-| scrollBarWidth | Length | - | 设置滚动条的宽度。 |
-| edgeEffect | EdgeEffect | EdgeEffect.Spring | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。 |
+除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
+
+| 名称 | 参数类型 | 描述 |
+| -------------- | ---------------------------------------- | --------- |
+| scrollable | ScrollDirection | 设置滚动方法。
默认值：ScrollDirection.Vertical |
+| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off |
+| scrollBarColor | string \| number \| Color | 设置滚动条的颜色。 |
+| scrollBarWidth | string \| number | 设置滚动条的宽度。 |
+| edgeEffect | [EdgeEffect](#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.Spring |
## ScrollDirection枚举说明
- | 名称 | 描述 |
- | ---------- | ---------- |
- | Horizontal | 仅支持水平方向滚动。 |
- | Vertical | 仅支持竖直方向滚动。 |
- | None | 不可滚动。 |
+| 名称 | 描述 |
+| ---------- | ------------------------ |
+| Horizontal | 仅支持水平方向滚动。 |
+| Vertical | 仅支持竖直方向滚动。 |
+| None | 不可滚动。 |
+| Free | 支持竖直或水平方向滚动。 |
## EdgeEffect枚举说明
@@ -51,15 +47,16 @@ Scroll(scroller?: Scroller)
## 事件
-| 名称 | 功能描述 |
-| ---------------------------------------- | ----------------------------- |
-| onScrollBegin9+(dx: number, dy: number) => { dxRemain: number, dyRemain: number } | 滚动开始事件回调。
参数：
- dx：即将发生的水平方向滚动量。
- dy：即将发生的竖向方向滚动量。
返回值：
- dxRemain：水平方向滚动剩余量。
- dyRemain：竖直方向滚动剩余量。 |
-| onScroll(event: (xOffset: number, yOffset: number) => void) | 滚动事件回调, 返回滚动时水平、竖直方向偏移量。 |
-| onScrollEdge(event: (side: Edge) => void) | 滚动到边缘事件回调。 |
-| onScrollEnd(event: () => void) | 滚动停止事件回调。 |
+| 名称 | 功能描述 |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onScrollBegin9+(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | 滚动开始事件回调。
参数：
- dx：即将发生的水平方向滚动量。
- dy：即将发生的竖直方向滚动量。
返回值：
- dxRemain：水平方向滚动剩余量。
- dyRemain：竖直方向滚动剩余量。 |
+| onScroll(event: (xOffset: number, yOffset: number) => void) | 滚动事件回调, 返回滚动时水平、竖直方向偏移量。 |
+| onScrollEdge(event: (side: Edge) => void) | 滚动到边缘事件回调。 |
+| onScrollEnd(event: () => void) | 滚动停止事件回调。 |
> **说明：**
-> 若通过onScrollBegin事件和scrollBy方法实现容器嵌套滚动，需设置子滚动节点的EdgeEffect为None。如Scroll嵌套List滚动时，List组件的edgeEffect属性需设置为EdgeEffect.None。
+>
+> 若通过onScrollBegin事件和scrollBy方法实现容器嵌套滚动，需设置子滚动节点的EdgeEffect为None。如Scroll嵌套List滚动时，List组件的edgeEffect属性需设置为EdgeEffect.None。
## Scroller
@@ -80,13 +77,13 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
滑动到指定位置。
+**参数：**
-- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | --------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
- | xOffset | Length | 是 | - | 水平滑动偏移。 |
- | yOffset | Length | 是 | - | 竖直滑动偏移。 |
- | animation | {
duration: number,
curve: [Curve](ts-animatorproperty.md) \|
CubicBezier \|
SpringCurve
} | 否 | | 动画配置：
- duration: 滚动时长设置。
- curve: 滚动曲线设置。 |
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| xOffset | Length | 是 | 水平滑动偏移。 |
+| yOffset | Length | 是 | 竖直滑动偏移。 |
+| animation | {
duration: number,
curve: [Curve](ts-animatorproperty.md) \|
CubicBezier \|
SpringCurve
} | 否 | 动画配置：
- duration: 滚动时长设置。
- curve: 滚动曲线设置。 |
### scrollEdge
@@ -96,14 +93,12 @@ scrollEdge(value: Edge): void
滚动到容器边缘。
+**参数：**
-- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | ----- | ---- | ---- | ---- | --------- |
- | value | [Edge](ts-appendix-enums.md#edge) | 是 | - | 滚动到的边缘位置。 |
-
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| ----- | ---- | ---- | --------- |
+| value | [Edge](ts-appendix-enums.md#edge) | 是 | 滚动到的边缘位置。 |
-
### scrollPage
@@ -111,25 +106,26 @@ scrollPage(value: { next: boolean, direction?: Axis }): void
滚动到下一页或者上一页。
-- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | --------- | ------- | ---- | ---- | ------------------------------ |
- | next | boolean | 是 | - | 是否向下翻页。true表示向下翻页，false表示向上翻页。 |
- | direction | [Axis](ts-appendix-enums.md#axis) | 否 | - | 设置滚动方向为水平或竖直方向。 |
+**参数：**
+
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| --------- | ------- | ---- | ------------------------------ |
+| next | boolean | 是 | 是否向下翻页。true表示向下翻页，false表示向上翻页。 |
+| direction | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滚动方向为水平或竖直方向。 |
### currentOffset
-currentOffset(): Object
+currentOffset()
返回当前的滚动偏移量。
+**返回值**
-- 返回值
- | 类型 | 描述 |
- | ---------------------------------------- | ---------------------------------------- |
- | {
xOffset: number,
yOffset: number
} | xOffset: 水平滑动偏移;
yOffset: 竖直滑动偏移。 |
+| 类型 | 描述 |
+| ---------------------------------------- | ---------------------------------------- |
+| {
xOffset: number,
yOffset: number
} | xOffset: 水平滑动偏移;
yOffset: 竖直滑动偏移。 |
### scrollToIndex
@@ -141,13 +137,14 @@ scrollToIndex(value: number): void
> **说明：**
-> 仅支持list组件。
+>
+> 仅支持list组件。
+**参数：**
-- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | ----- | ------ | ---- | ---- | ----------------- |
- | value | number | 是 | - | 要滑动到的列表项在列表中的索引值。 |
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| ------ | -------- | ---- | ---------------------------------- |
+| value | number | 是 | 要滑动到的列表项在列表中的索引值。 |
### scrollBy
@@ -159,14 +156,15 @@ scrollBy(dx: Length, dy: Length): void
> **说明：**
-> 仅支持Scroll组件。
+>
+> 仅支持Scroll组件。
+**参数：**
-- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | ----- | ------ | ---- | ---- | ----------------- |
- | dx | Length | 是 | - | 水平方向滚动距离。 |
- | dy | Length | 是 | - | 竖直方向滚动距离。 |
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| ----- | ------ | ---- | ----------------- |
+| dx | Length | 是 | 水平方向滚动距离。 |
+| dy | Length | 是 | 竖直方向滚动距离。 |
## 示例
@@ -208,22 +206,27 @@ struct ScrollExample {
.onScrollEnd(() => {
console.info('Scroll Stop')
})
-
+
+ Button('scroll 150')
+ .onClick(() => { // 点击后下滑指定距离150.0vp
+ this.scroller.scrollBy(0,150)
+ })
+ .margin({ top: 10, left: 20 })
Button('scroll 100')
- .onClick(() => { // 点击后下滑100.0距离
+ .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
})
- .margin({ top: 10, left: 20 })
+ .margin({ top: 60, left: 20 })
Button('back top')
.onClick(() => { // 点击后回到顶部
this.scroller.scrollEdge(Edge.Top)
})
- .margin({ top: 60, left: 20 })
+ .margin({ top: 110, left: 20 })
Button('next page')
- .onClick(() => { // 点击后下滑到底部
+ .onClick(() => { // 点击后滑到下一页
this.scroller.scrollPage({ next: true })
})
- .margin({ top: 110, left: 20 })
+ .margin({ top: 170, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC)
}
}
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
index d6f3d8814bf8728ac4fdb48a48c8014d7b55d68a..c3d6fd69e2f8607bc6831805d28bfebbd39e449c 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
@@ -1,15 +1,10 @@
# SideBarContainer
-> **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。
-
-## 权限列表
-
-无
+> **说明：**
+>
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 子组件
@@ -21,52 +16,54 @@
SideBarContainer( type?: SideBarContainerType )
-- 参数
- | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | type | SideBarContainerType | 否 | SideBarContainerType.Embed | 设置侧边栏的显示类型。 |
+**参数：**
-- SideBarContainerType枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | Embed | 侧边栏嵌入到组件内，侧边栏和内容区并列显示。 |
- | Overlay | 侧边栏浮在内容区上面。 |
+| 参数名 | 参数类型 | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| type | SideBarContainerType | 否 | 设置侧边栏的显示类型。
默认值：SideBarContainerType.Embed |
+
+## SideBarContainerType枚举说明
+
+| 名称 | 描述 |
+| -------- | -------- |
+| Embed | 侧边栏嵌入到组件内，侧边栏和内容区并列显示。 |
+| Overlay | 侧边栏浮在内容区上面。 |
## 属性
-| 名称 | 参数类型 | 默认值 | 描述 |
+| 名称 | 参数类型 | 描述 |
+| -------- | -------- | -------- |
+| showSideBar | boolean | 设置是否显示侧边栏。
默认值：true |
+| controlButton | ButtonStyle | 设置侧边栏控制按钮的属性。 |
+| showControlButton | boolean | 设置是否显示控制按钮。
默认值：true |
+| sideBarWidth | number | 设置侧边栏的宽度。
默认值：200vp |
+| minSideBarWidth | number | 设置侧边栏最小宽度。
默认值：200vp |
+| maxSideBarWidth | number | 设置侧边栏最大宽度。
默认值：280vp |
+| autoHide9+ | boolean | 设置当侧边栏拖拽到小于最小宽度后，是否自动隐藏。
默认值：true |
+| sideBarPosition9+ | SideBarPosition | 设置侧边栏显示位置。
默认值：SideBarPosition.Start |
+
+## ButtonStyle对象说明
+
+| 名称 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- |
-| showSideBar | boolean | true | 设置是否显示侧边栏。 |
-| controlButton | ButtonStyle | - | 设置侧边栏控制按钮的属性。 |
-| showControlButton | boolean | true | 设置是否显示控制按钮。 |
-| sideBarWidth | number \| [Length9+](../../ui/ts-types.md#长度类型) | 200 | 设置侧边栏的宽度。 |
-| minSideBarWidth | number \| [Length9+](../../ui/ts-types.md#长度类型) | 200 | 设置侧边栏最小宽度。 |
-| maxSideBarWidth | number \| [Length9+](../../ui/ts-types.md#长度类型) | 280 | 设置侧边栏最大宽度。 |
-| autoHide9+ | boolean | true | 设置当侧边栏拖拽到小于最小宽度后，是否自动隐藏。 |
-| sideBarPosition9+ | SideBarPosition | SideBarPosition.Start | 设置侧边栏显示位置。 |
-
-- ButtonStyle对象说明
- | 名称 | 参数类型 | 必填 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- | -------- |
- | left | number | 否 | 16 | 设置侧边栏控制按钮距离容器左界限的间距。 |
- | top | number | 否 | 48 | 设置侧边栏控制按钮距离容器上界限的间距。 |
- | width | number | 否 | 32 | 设置侧边栏控制按钮的宽度。 |
- | height | number | 否 | 32 | 设置侧边栏控制按钮的高度。 |
- | icons | {
shown: string \| PixelMap \| [Resource](../../ui/ts-types.md) ,
hidden: string \| PixelMap \| [Resource](../../ui/ts-types.md) ,
switching?: string \| PixelMap \| [Resource](../../ui/ts-types.md)
} | 否 | - | 设置侧边栏控制按钮的图标：
- shown: 设置侧边栏显示时控制按钮的图标。
- hidden: 设置侧边栏隐藏时控制按钮的图标。
- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 |
-
-- SideBarPosition9+枚举说明
- | 名称 | 描述 |
- | -------- | -------- |
- | Start | 侧边栏位于容器左侧。 |
- | End | 侧边栏位于容器右侧。 |
+| left | number | 否 | 设置侧边栏控制按钮与容器左界限的间距。
默认值：16 |
+| top | number | 否 | 设置侧边栏控制按钮与容器上界限的间距。
默认值：48 |
+| width | number | 否 | 设置侧边栏控制按钮的宽度。
默认值：32 |
+| height | number | 否 | 设置侧边栏控制按钮的高度。
默认值：32 |
+| icons | {
shown: string \| PixelMap \| [Resource](../../ui/ts-types.md) ,
hidden: string \| PixelMap \| [Resource](../../ui/ts-types.md) ,
switching?: string \| PixelMap \| [Resource](../../ui/ts-types.md)
} | 否 | 设置侧边栏控制按钮的图标：
- shown: 设置侧边栏显示时控制按钮的图标。
- hidden: 设置侧边栏隐藏时控制按钮的图标。
- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 |
+## SideBarPosition9+枚举说明
+| 名称 | 描述 |
+| -------- | -------- |
+| Start | 侧边栏位于容器左侧。 |
+| End | 侧边栏位于容器右侧。 |
## 事件
-| 名称 | 功能描述 |
+| 名称 | 功能描述 |
| -------- | -------- |
-| onChange(callback: (value: boolean) => void) | 当侧边栏的状态在显示和隐藏之间切换时触发回调。 value的true表示显示，false表示隐藏。|
+| onChange(callback: (value: boolean) => void) | 当侧边栏的状态在显示和隐藏之间切换时触发回调。
value的true表示显示，false表示隐藏。|
## 示例
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 cbcfa72be684675fb959ed0860e1ea9dd4a3e594..3b4233378f9b31faada9303d5df007e1f2071bba 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
@@ -8,9 +8,9 @@
## 属性
-| 名称 | 参数类型 | 默认值 | 描述 |
+| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
-| 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'| {
"",
0.0,
1.0,
false
} | 设置组件的运动路径，入参说明如下：
- path：位移动画的运动路径，使用svg路径字符串。
- from：运动路径的起点，默认为0.0。
- to：运动路径的终点，默认为1.0。
- rotatable：是否跟随路径进行旋转。 |
## 示例
@@ -25,6 +25,7 @@ struct MotionPathExample {
build() {
Column() {
Button('click me')
+ // 执行动画：从起点滑到(300,200)，再到(300,500)，再到终点。
.motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true })
.onClick((event: ClickEvent) => {
animateTo({ duration: 4000, curve: Curve.Linear }, () => {
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 16b62a14b26ee3f5598a8797153c7df0482872f2..d8ed0e845f5650bd2a718d072d5b1075fbfa7a6c 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
@@ -3,19 +3,15 @@
自定义组件的走焦效果，可设置组件是否走焦和具体的走焦顺序，tab键或者方向键切换焦点。
> **说明：**
+>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-## 权限列表
-
-无
-
-
## 属性
| **名称** | **参数类型** | **默认值** | **描述** |
| -------------------- | -------- | ------- | ---------------------------------------- |
-| focusable | boolean | false | 设置当前组件是否可以获焦。 |
+| focusable | boolean | false | 设置当前组件是否可以获焦。
**说明：**
存在默认交互逻辑的组件例如Button、TextInput等，默认即为可获焦，Text、Image等组件则默认状态为不可获焦。 |
| tabIndex9+ | number | 0 | 自定义组件tab键走焦能力，走焦顺序为：tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。
- tabIndex >= 0：表示元素是可聚焦的，并且可以通过tab键走焦来访问到该元素，按照tabIndex的数值递增而先后获焦。如果多个元素拥有相同的tabIndex，按照元素在当前组件树中的先后顺序获焦
- tabIndex < 0（通常是tabIndex = -1）：表示元素是可聚焦的，但是不能通过tab键走焦来访问到该元素。 |
| defaultFocus9+ | boolean | false | 设置当前组件是否为当前页面上的默认焦点，仅在初次创建的页面第一次进入时生效。 |
| groupDefaultFocus9+ | boolean | false | 设置当前组件是否为当前组件所在容器获焦时的默认焦点，仅在初次创建容器节点第一次获焦时生效。
**说明：** 必须与tabIndex联合使用，当某个容器设置了tabIndex，且容器内某子组件设置了groupDefaultFocus，当该容器首次获焦时，会自动将焦点转移至该组件上。 |
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-configuration.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-configuration.md
index 3681e765caced63b2f98e917cf6a7cf92725aa56..f139c9efc848cff2a6cabf5da8acd5a56699b8c3 100644
--- a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-configuration.md
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-configuration.md
@@ -32,3 +32,5 @@
}
}
```
+
+可参考示例：[input](./js-service-widget-basic-input.md)与[list](js-service-widget-container-list.md)等组件中的用法。
\ No newline at end of file
diff --git a/zh-cn/application-dev/ui/ui-js-animate-component.md b/zh-cn/application-dev/ui/ui-js-animate-component.md
index 03b8b958ea70a55e62714ef492b18a84430bd3f9..859fb01701d252c51c60600f2dd283bd62fbd1b5 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-component.md
+++ b/zh-cn/application-dev/ui/ui-js-animate-component.md
@@ -346,7 +346,7 @@ export default {
-通过改变playStat的属性实现动画状态的改变。
+通过改变playState的值实现动画状态的改变。
```html
diff --git a/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md b/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md
index 581b586411fed4360f3590b6aef42823af5ec30b..f3b632e1d4ba15fa20ca9ee1cb25cfb4ab8984a4 100644
--- a/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md
+++ b/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md
@@ -159,12 +159,12 @@
}
```
-3. 获取foodData对应的value。调用router.getParams().foodData来获取到FoodCategoryList页面跳转来时携带的foodDate对应的数据。
+3. 获取foodData对应的value。调用router.getParams()['foodData']来获取到FoodCategoryList页面跳转来时携带的foodDate对应的数据。
```ts
@Entry
@Component
struct FoodDetail {
- private foodItem: FoodData = router.getParams().foodData
+ private foodItem: FoodData = router.getParams()['foodData']
build() {
......
@@ -248,7 +248,7 @@
@Entry
@Component
struct FoodDetail {
- private foodItem: FoodData = router.getParams().foodData
+ private foodItem: FoodData = router.getParams()['foodData']
build() {
Column() {