diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md index a63bdad32971f333d3669a6bab490f0cc05f9da2..597427749af2c3b2e81f4a0981b067b036ca72ce 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -90,3 +90,11 @@ | Off | 不显示。 | | On | 常驻显示。 | | Auto | 按需显示(触摸时显示，2s后消失)。 | +## LayoutDirection枚举说明 + +| 名称 | 描述 | +| -------- | -------- | +| Row | 主轴与行方向一致作为布局模式。 | +| Column | 主轴与列方向一致作为布局模式。 | +| RowReverse | 与Row相反方向进行布局。 | +| ColumnReverse | 与Column相反方向进行布局。 | \ No newline at end of file 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 111c5d38e148a819c89e86bf41553ae499c26d3f..9b757863d61cf2b961ce9540d213313662e67e64 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 @@ -3,8 +3,9 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。 + -网格容器，二维布局，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以任意组合不同的网格，做出各种各样的布局。 ## 权限列表 @@ -17,7 +18,7 @@ 包含[GridItem](ts-container-griditem.md)子组件。 -## 接口说明 +## 接口 Grid() @@ -30,20 +31,29 @@ Grid() | rowsTemplate | string | '1fr' | 用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。 | | columnsGap | Length | 0 | 用于设置列与列的间距。 | | rowsGap | Length | 0 | 用于设置行与行的间距。 | -| editMode | boolean | flase | 是否进入编辑模式，进入编辑模式可以拖拽Gird组件内部[GridItem](ts-container-griditem.md)。 | -| maxCount | number | 1 | 表示可显示的最大行数。 | -| minCount | number | 1 | 表示可显示的最小行数。 | -| cellLength | number | 0 | 表示每行的固定高度。 | -| $multiSelectable^{8+}$ | boolean | false | 是否开启鼠标框选。
- false：关闭框选。
- true：开启框选。 | +| editMode 8+ | boolean | flase | 是否进入编辑模式，进入编辑模式可以拖拽Gird组件内部[GridItem](ts-container-griditem.md)。 | +| layoutDirection8+ | [LayoutDirection](ts-appendix-enums.md) | LayoutDirection.Row |设置布局的主轴方向，目前支持的主轴布局方向如下：
- LayoutDirection.Row：沿水平方向布局，即先填满一列，再去填下一列。
- LayoutDirection.Column：沿垂直方向布局，即先填满一行，再去填下一行。| +| maxCount 8+ | number | 1 | 当layoutDirection是Row时，表示可显示的最大行数
当layoutDirection是Column时，表示可显示的最大列数。 | +| minCount 8+ | number | 1 | 当layoutDirection是Row时，表示可显示的最小行数
当layoutDirection是Column时，表示可显示的最小列数。 | +| cellLength 8+ | number | 0 | 当layoutDirection是Row时，表示一行的高度
当layoutDirection是Column时，表示一列的宽度。 | +| multiSelectable8+ | boolean | false | 是否开启鼠标框选。
- false：关闭框选。
- true：开启框选。 | +| dragAnimation8+ | boolean | false | 是否开启拖拽GridItem动画。 | +| edgeEffection8+ | EdgeEffect | EdgeEffect.Spring | 设置边缘滑动效果，目前支持的滑动效果参见EdgeEffect枚举说明。 | + +- EdgeEffect枚举说明 + | 名称 | 描述 | + | -------- | -------- | + | Spring | 弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 | + | None | 滑动到边缘后无效果。 | + ## 事件 -| 名称 | 功能描述 | +| 名称 | 功能描述 | | -------- | -------- | | onScrollIndex(first: number) => void | 当前列表显示的起始位置item发生变化时触发。 | - ## 示例 ``` @@ -105,4 +115,4 @@ struct GridExample { } ``` -![zh-cn_image_0000001219744183](figures/zh-cn_image_0000001219744183.gif) +![zh-cn_image_0000001219744183](figures/zh-cn_image_0000001219744183.gif) \ No newline at end of file