Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
51b06932
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
51b06932
编写于
4月 11, 2023
作者:
H
HelloCrease
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs
Signed-off-by:
N
HelloCrease
<
lian15@huawei.com
>
上级
0cbef694
变更
2
展开全部
隐藏空白更改
内联
并排
Showing
2 changed file
with
66 addition
and
66 deletion
+66
-66
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
...n/application-dev/reference/arkui-ts/ts-container-grid.md
+31
-31
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
...n/application-dev/reference/arkui-ts/ts-container-list.md
+35
-35
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @
51b06932
...
...
@@ -34,31 +34,31 @@ Grid(scroller?: Scroller)
**参数:**
| 参数名
| 参数类型 | 必填 | 参数描述
|
| -------- | ----------------------------------------
--- | ---- | --------------------
---------------------------------------- |
| scroller |
[
Scroller
](
ts-container-scroll.md#scroller
)
| 否 | 可滚动组件的控制器。用于与可滚动组件进行绑定。
<br/>
**说明:**
<br/>
不允许和其他
[
滚动类组件
](
ts-container-list.md
)
绑定同一个滚动控制对象。 |
| 参数名
| 参数类型 | 必填 | 参数描述
|
| -------- | ----------------------------------------
| ---- |
---------------------------------------- |
| scroller |
[
Scroller
](
ts-container-scroll.md#scroller
)
| 否
| 可滚动组件的控制器。用于与可滚动组件进行绑定。
<br/>
**说明:**
<br/>
不允许和其他
[
滚动类组件
](
ts-container-list.md
)
绑定同一个滚动控制对象。 |
## 属性
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称
| 参数类型 | 描述
|
| --------
| -------- |
-------- |
| columnsTemplate
| string
| 设置当前网格布局列的数量,不设置时默认1列。
<br/>
例如,
'1fr
1fr
2fr'
是将父组件分3列,将父组件允许的宽分为4等份,第一列占1份,第二列占1份,第三列占2份。
<br/>
**说明:**
<br/>
设置为'0fr'时,该列的列宽为0,不显示GridItem。设置为其他非法值时,GridItem显示为固定1列。 |
| rowsTemplate
| string
| 设置当前网格布局行的数量,不设置时默认1行。
<br/>
例如,
'1fr
1fr
2fr'是将父组件分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。
<br/>
**说明:**
<br/>
设置为'0fr',则这一行的行宽为0,这一行GridItem不显示。设置为其他非法值,按固定1行处理。 |
| columnsGap
|
[
Length
](
ts-types.md#length
)
| 设置列与列的间距。
<br/>
默认值:0
<br/>
**说明:**
<br/>
设置为小于0的值时,按默认值显示。 |
| rowsGap
|
[
Length
](
ts-types.md#length
)
| 设置行与行的间距。
<br/>
默认值:0
<br/>
**说明:**
<br/>
设置为小于0的值时,按默认值显示。 |
| scrollBar |
[
BarState
](
ts-appendix-enums.md#barstate
)
| 设置滚动条状态。
<br/>
默认值:BarState.Off
<br/>
**说明:**
<br/>
API version 9及以下版本默认值为BarState.Off,API version 10的默认值为BarState.Auto。 |
| scrollBarColor
| string
\|
number
\|
[
Color
](
ts-appendix-enums.md#color
)
| 设置滚动条的颜色。
|
| scrollBarWidth
| string
\|
number
| 设置滚动条的宽度。宽度设置后,滚动条正常状态和按压状态宽度均为滚动条的宽度值。
<br/>
默认值:4
<br/>
单位:vp |
| cachedCount
| number | 设置预加载的GridItem的数量,只在
[
LazyForEach
](
../../quick-start/arkts-rendering-control-lazyforeach.md
)
中生效。具体使用可参考
[
减少应用白块说明
](
../../ui/ui-
ts-performance-improvement-recommendation.md#减少应用滑动白块
)
。
<br/>
默认值:1
<br/>
**说明:**
<br>
设置缓存后会在Grid显示区域上下各缓存cachedCount
*
列数个GridItem。
<br/>
[
LazyForEach
](
../../quick-start/arkts-rendering-control-lazyforeach.md
)
超出显示和缓存范围的GridItem会被释放。
<br/>
设置为小于0的值时,按默认值显示。 |
| editMode
<sup>
8+
</sup>
| boolean
| 设置Grid是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部
[
GridItem
](
ts-container-griditem.md
)
。
<br/>
默认值:flase |
| layoutDirection
<sup>
8+
</sup>
|
[
GridDirection
](
#griddirection8枚举说明
)
| 设置布局的主轴方向。
<br/>
默认值:GridDirection.Row
|
| maxCount
<sup>
8+
</sup>
| number
| 当layoutDirection是Row/RowReverse时,表示可显示的最大列数
<br/>
当layoutDirection是Column/ColumnReverse时,表示可显示的最大行数。
<br/>
默认值:Infinity
<br/>
**说明:**
<br/>
当maxCount小于minCount时,maxCount和minCount都按默认值处理。
<br/>
设置为小于0的值时,按默认值显示。 |
| minCount
<sup>
8+
</sup>
| number
| 当layoutDirection是Row/RowReverse时,表示可显示的最小列数。
<br/>
当layoutDirection是Column/ColumnReverse时,表示可显示的最小行数。
<br/>
默认值:1
<br/>
**说明:**
<br/>
设置为小于0的值时,按默认值显示。 |
| cellLength
<sup>
8+
</sup>
| number
| 当layoutDirection是Row/RowReverse时,表示一行的高度。
<br/>
当layoutDirection是Column/ColumnReverse时,表示一列的宽度。
<br/>
默认值:第一个元素的大小 |
| multiSelectable
<sup>
8+
</sup>
| boolean
| 是否开启鼠标框选。
<br/>
默认值:false
<br/>
-
false:关闭框选。
<br/>
-
true:开启框选。 |
| supportAnimation
<sup>
8+
</sup>
| boolean
| 是否支持动画。当前支持GridItem拖拽动画。
<br/>
默认值:false
|
| 名称
| 参数类型 | 描述
|
| --------
--------------------- | ---------------------------------------- | --------------------------------
-------- |
| columnsTemplate
| string
| 设置当前网格布局列的数量,不设置时默认1列。
<br/>
例如,
'1fr
1fr
2fr'
是将父组件分3列,将父组件允许的宽分为4等份,第一列占1份,第二列占1份,第三列占2份。
<br/>
**说明:**
<br/>
设置为'0fr'时,该列的列宽为0,不显示GridItem。设置为其他非法值时,GridItem显示为固定1列。 |
| rowsTemplate
| string
| 设置当前网格布局行的数量,不设置时默认1行。
<br/>
例如,
'1fr
1fr
2fr'是将父组件分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。
<br/>
**说明:**
<br/>
设置为'0fr',则这一行的行宽为0,这一行GridItem不显示。设置为其他非法值,按固定1行处理。 |
| columnsGap
|
[
Length
](
ts-types.md#length
)
| 设置列与列的间距。
<br/>
默认值:0
<br/>
**说明:**
<br/>
设置为小于0的值时,按默认值显示。 |
| rowsGap
|
[
Length
](
ts-types.md#length
)
| 设置行与行的间距。
<br/>
默认值:0
<br/>
**说明:**
<br/>
设置为小于0的值时,按默认值显示。 |
| scrollBar
|
[
BarState
](
ts-appendix-enums.md#barstate
)
| 设置滚动条状态。
<br/>
默认值:BarState.Off
<br/>
**说明:**
<br/>
API version 9及以下版本默认值为BarState.Off,API version 10的默认值为BarState.Auto。 |
| scrollBarColor
| string
\|
number
\|
[
Color
](
ts-appendix-enums.md#color
)
| 设置滚动条的颜色。
|
| scrollBarWidth
| string
\|
number
| 设置滚动条的宽度。宽度设置后,滚动条正常状态和按压状态宽度均为滚动条的宽度值。
<br/>
默认值:4
<br/>
单位:vp |
| cachedCount
| number | 设置预加载的GridItem的数量,只在
[
LazyForEach
](
../../quick-start/arkts-rendering-control-lazyforeach.md
)
中生效。具体使用可参考
[
减少应用白块说明
](
../../ui/ark
ts-performance-improvement-recommendation.md#减少应用滑动白块
)
。
<br/>
默认值:1
<br/>
**说明:**
<br>
设置缓存后会在Grid显示区域上下各缓存cachedCount
*
列数个GridItem。
<br/>
[
LazyForEach
](
../../quick-start/arkts-rendering-control-lazyforeach.md
)
超出显示和缓存范围的GridItem会被释放。
<br/>
设置为小于0的值时,按默认值显示。 |
| editMode
<sup>
8+
</sup>
| boolean
| 设置Grid是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部
[
GridItem
](
ts-container-griditem.md
)
。
<br/>
默认值:flase |
| layoutDirection
<sup>
8+
</sup>
|
[
GridDirection
](
#griddirection8枚举说明
)
| 设置布局的主轴方向。
<br/>
默认值:GridDirection.Row
|
| maxCount
<sup>
8+
</sup>
| number
| 当layoutDirection是Row/RowReverse时,表示可显示的最大列数
<br/>
当layoutDirection是Column/ColumnReverse时,表示可显示的最大行数。
<br/>
默认值:Infinity
<br/>
**说明:**
<br/>
当maxCount小于minCount时,maxCount和minCount都按默认值处理。
<br/>
设置为小于0的值时,按默认值显示。 |
| minCount
<sup>
8+
</sup>
| number
| 当layoutDirection是Row/RowReverse时,表示可显示的最小列数。
<br/>
当layoutDirection是Column/ColumnReverse时,表示可显示的最小行数。
<br/>
默认值:1
<br/>
**说明:**
<br/>
设置为小于0的值时,按默认值显示。 |
| cellLength
<sup>
8+
</sup>
| number
| 当layoutDirection是Row/RowReverse时,表示一行的高度。
<br/>
当layoutDirection是Column/ColumnReverse时,表示一列的宽度。
<br/>
默认值:第一个元素的大小 |
| multiSelectable
<sup>
8+
</sup>
| boolean
| 是否开启鼠标框选。
<br/>
默认值:false
<br/>
-
false:关闭框选。
<br/>
-
true:开启框选。 |
| supportAnimation
<sup>
8+
</sup>
| boolean
| 是否支持动画。当前支持GridItem拖拽动画。
<br/>
默认值:false
|
Grid组件根据rowsTemplate、columnsTemplate属性的设置情况,可分为以下三种布局模式:
...
...
@@ -98,12 +98,12 @@ Grid组件根据rowsTemplate、columnsTemplate属性的设置情况,可分为
## GridDirection<sup>8+</sup>枚举说明
| 名称
| 描述
|
| ------
| ----
---------------------------------- |
| Row
| 主轴布局方向沿水平方向布局,即自左往右先填满一行,再去填下一行。
|
| Column
| 主轴布局方向沿垂直方向布局,即自上往下先填满一列,再去填下一列。
|
| 名称
| 描述
|
| ------
------- |
---------------------------------- |
| Row
| 主轴布局方向沿水平方向布局,即自左往右先填满一行,再去填下一行。
|
| Column
| 主轴布局方向沿垂直方向布局,即自上往下先填满一列,再去填下一列。
|
| RowReverse | 主轴布局方向沿水平方向反向布局,即自右往左先填满一行,再去填下一行。 |
| ColumnReverse
| 主轴布局方向沿垂直方向反向布局,即自下往上先填满一列,再去填下一列。 |
| ColumnReverse | 主轴布局方向沿垂直方向反向布局,即自下往上先填满一列,再去填下一列。 |
> **说明:**
>
...
...
@@ -113,8 +113,8 @@ Grid组件根据rowsTemplate、columnsTemplate属性的设置情况,可分为
除支持
[
通用事件
](
ts-universal-events-click.md
)
外,还支持以下事件:
| 名称
| 功能描述
|
| --------
|
-------- |
| 名称
| 功能描述
|
| --------
-------------------------------- | --------------------------------
-------- |
| onScrollIndex(event: (first: number) => void) | 当前网格显示的起始位置item发生变化时触发。列表初始化时会触发一次。
<br/>
- first: 当前显示的网格起始位置的索引值。
<br/>
Grid显示区域上第一个子组件的索引值有变化就会触发。 |
| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any)
\|
void) | 开始拖拽网格元素时触发。
<br/>
- event: 见
[
ItemDragInfo对象说明
](
#itemdraginfo对象说明
)
。
<br/>
- itemIndex: 被拖拽网格元素索引值。
<br/>
**说明:**
<br/>
返回void表示不能拖拽。
<br/>
手指长按GridItem时触发该事件。 |
| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入网格元素范围内时触发。
<br/>
- event: 见
[
ItemDragInfo对象说明
](
#itemdraginfo对象说明
)
。 |
...
...
@@ -124,10 +124,10 @@ Grid组件根据rowsTemplate、columnsTemplate属性的设置情况,可分为
## ItemDragInfo对象说明
| 名称
| 类型 |
描述 |
| ----
------ | ----
------ | ---------- |
| x
| number | 当前拖拽点的x坐标。
|
| y
| number | 当前拖拽点的y坐标。
|
| 名称
| 类型 |
描述 |
| ----
|
------ | ---------- |
| x
| number | 当前拖拽点的x坐标。
|
| y
| number | 当前拖拽点的y坐标。
|
## 示例
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @
51b06932
此差异已折叠。
点击以展开。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录