Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
ace65681
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看板
提交
ace65681
编写于
9月 14, 2022
作者:
S
sienna1128
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update list grid docs
Signed-off-by:
N
sienna1128
<
lixiaoyan45@huawei.com
>
上级
1639bff8
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
30 addition
and
26 deletion
+30
-26
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
...n/application-dev/reference/arkui-ts/ts-container-grid.md
+18
-14
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
...n/application-dev/reference/arkui-ts/ts-container-list.md
+9
-9
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
...plication-dev/reference/arkui-ts/ts-container-listitem.md
+3
-3
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @
ace65681
...
...
@@ -8,11 +8,6 @@
## 权限列表
无
## 子组件
包含
[
GridItem
](
ts-container-griditem.md
)
子组件。
...
...
@@ -37,27 +32,36 @@ Grid(scroller?: Scroller)
| columnsGap | Length | 0 | 用于设置列与列的间距。 |
| rowsGap | Length | 0 | 用于设置行与行的间距。 |
| scrollBar |
[
BarState
](
ts-appendix-enums.md#barstate
)
| BarState.Off | 设置滚动条状态。 |
| scrollBarColor | string
\|
number
\|
Color
| - | 设置滚动条的颜色。 |
| scrollBarWidth |
Length
| - | 设置滚动条的宽度。 |
| scrollBarColor | string
\|
number
\|
[
Color
](
ts-appendix-enums.md#color
)
| - | 设置滚动条的颜色。 |
| scrollBarWidth |
number
\|
string
| - | 设置滚动条的宽度。 |
| cachedCount | number | 1 | 设置预加载的GridItem的数量。 |
| editMode
<sup>
8+
</sup>
| boolean | f
la
se | 是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部
[
GridItem
](
ts-container-griditem.md
)
。 |
| layoutDirection
<sup>
8+
</sup>
|
GridDirection
| GridDirection.Row | 设置布局的主轴方向。 |
| editMode
<sup>
8+
</sup>
| boolean | f
al
se | 是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部
[
GridItem
](
ts-container-griditem.md
)
。 |
| layoutDirection
<sup>
8+
</sup>
|
[
GridDirection
](
#griddirection8枚举说明
)
| GridDirection.Row | 设置布局的主轴方向。 |
| maxCount
<sup>
8+
</sup>
| number | 1 | 当layoutDirection是Row/RowReverse时,表示可显示的最大行数
<br/>
当layoutDirection是Column/ColumnReverse时,表示可显示的最大列数。 |
| minCount
<sup>
8+
</sup>
| number | 1 | 当layoutDirection是Row/RowReverse时,表示可显示的最小行数。
<br/>
当layoutDirection是Column/ColumnReverse时,表示可显示的最小列数。 |
| cellLength
<sup>
8+
</sup>
| number | 0 | 当layoutDirection是Row/RowReverse时,表示一行的高度。
<br/>
当layoutDirection是Column/ColumnReverse时,表示一列的宽度。 |
| multiSelectable
<sup>
8+
</sup>
| boolean | false | 是否开启鼠标框选。
<br/>
-
false:关闭框选。
<br/>
-
true:开启框选。 |
| supportAnimation
<sup>
8+
</sup>
| boolean | false | 是否支持动画。 |
## GridDirection<sup>8+</sup>枚举说明
| 名称 | 描述 |
| ------ | -------------------------------------- |
| Row | 网格元素按照行方向排列。 |
| Column | 网格元素按照列方向排列。 |
| RowReverse | 网格元素按照行逆序方向排列。 |
| ColumnReverse | 网格元素按照列逆序方向排列。 |
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| onScrollIndex(event: (first: number) => void) | 当前网格显示的起始位置item发生变化时触发,返回值为当前显示的网格起始位置的索引值。 |
| 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为是否成功释放。 |
| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any)
\|
void) | 开始拖拽网格元素时触发,返回值event见
[
ItemDragInfo对象说明
](
#itemdraginfo对象说明
)
,itemIndex为被拖拽网格元素索引值。 |
| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入网格元素范围内时触发,返回值event见
[
ItemDragInfo对象说明
](
#itemdraginfo对象说明
)
。 |
| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在网格元素范围内移动时触发,返回值event见
[
ItemDragInfo对象说明
](
#itemdraginfo对象说明
)
,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置。 |
| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开网格元素时触发,返回值event见
[
ItemDragInfo对象说明
](
#itemdraginfo对象说明
)
,itemIndex为拖拽离开的网格元素索引值。 |
| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的网格元素可作为拖拽释放目标,当在网格元素内停止拖拽时触发,返回值event见
[
ItemDragInfo对象说明
](
#itemdraginfo对象说明
)
,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置,isSuccess为是否成功释放。 |
## ItemDragInfo对象说明
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @
ace65681
...
...
@@ -17,13 +17,13 @@
## 接口
List(value
:{space?: number | string, initialIndex?: number
, scroller?: Scroller})
List(value
?: {initialIndex?: number, space?: number | string
, scroller?: Scroller})
-
参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
-
| initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item,即显示第一个item,如设置的序号超过了最后一个item的序号,则设置不生效。 |
| space | number
\|
string | 否 | 0 | 列表项间距。 |
| initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item,即显示第一个item,如设置的序号超过了最后一个item的序号,则设置不生效。 |
| scroller |
[
Scroller
](
ts-container-scroll.md#scroller
)
| 否 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
...
...
@@ -40,8 +40,8 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller}
| chainAnimation | boolean | false | 用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。
<br/>
-
false:不启用链式联动。
<br/>
-
true:启用链式联动。 |
| multiSelectable
<sup>
8+
</sup>
| boolean | false | 是否开启鼠标框选。
<br/>
-
false:关闭框选。
<br/>
-
true:开启框选。 |
| lanes
<sup>
9+
</sup>
| number
\|
<br>
{
<br/>
minLength: Length,
<br/>
maxLength: Length
<br/>
} | 1 | 以列模式为例(listDirection为Axis.Vertical):
<br/>
lanes用于决定List组件在交叉轴方向按几列布局,规则如下:
<br/>
- lanes为指定的数量时,根据指定的数量与List组件的交叉轴宽度来决定每列的宽度;
<br/>
- lane设置了{minLength,maxLength}时,根据List组件的宽度自适应决定lanes数量(即列数),保证缩放过程中lane的宽度符合{minLength,maxLength}的限制。其中,minLength条件会被优先满足,即优先保证符合ListItem的宽度符合最小宽度限制。例如在列模式下,设置了{minLength: 40vp,maxLength: 60vp},则当List组件宽度为70vp时,ListItem为一列,并且根据alignListItem属性做靠左、居中或者靠右布局;当List组件宽度变化至80vp时,符合两倍的minLength,则ListItem自适应为两列。 |
| alignListItem
<sup>
9+
</sup>
|
[
ListItemAlign
](
#listitemalign
)
| ListItemAlign.Center | List交叉轴方向宽度大于ListItem交叉轴宽度
*
lanes时,ListItem在List交叉轴方向的布局方式,默认为居中。 |
| sticky
<sup>
9+
</sup>
|
[
StickyStyle
](
#stickystyle
)
| StickyStyle.None | 配合
[
ListItemGroup
](
ts-container-listitemgroup.md
)
组件使用,设置ListItemGroup中header和footer是否要吸顶或吸底,参见StickyStyle的枚举说明。|
| alignListItem
<sup>
9+
</sup>
|
[
ListItemAlign
](
#listitemalign
9枚举说明
)
| ListItemAlign.Center | List交叉轴方向宽度大于ListItem交叉轴宽度
*
lanes时,ListItem在List交叉轴方向的布局方式,默认为居中。 |
| sticky
<sup>
9+
</sup>
|
[
StickyStyle
](
#stickystyle
9枚举说明
)
| StickyStyle.None | 配合
[
ListItemGroup
](
ts-container-listitemgroup.md
)
组件使用,设置ListItemGroup中header和footer是否要吸顶或吸底,参见StickyStyle的枚举说明。|
## ListItemAlign<sup>9+</sup>枚举说明
...
...
@@ -68,17 +68,17 @@ List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller}
| 名称 | 功能描述 |
| -------- | -------- |
| onItemDelete(event: (index: number) => boolean) | 列表项删除时触发。 |
| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发,返回值scrollOffset为滑动偏移量,
[
scrollState
](
#scrollstate
)
为当前滑动状态。 |
| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发,返回值scrollOffset为滑动偏移量,
[
scrollState
](
#scrollstate
枚举说明
)
为当前滑动状态。 |
| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发,返回值分别为滑动起始位置索引值与滑动结束位置索引值。 |
| onReachStart(event: () => void) | 列表到达起始位置时触发。 |
| onReachEnd(event: () => void) | 列表到底末尾位置时触发。 |
| onScrollStop(event: () => void) | 列表滑动停止时触发。 |
| 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#
ItemDragI
nfo对象说明
)
。 |
| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在列表元素范围内移动时触发,返回值event见
[
ItemDragInfo对象说明
](
ts-container-grid.md#
ItemDragI
nfo对象说明
)
,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置。 |
| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开列表元素时触发,返回值event见
[
ItemDragInfo对象说明
](
ts-container-grid.md#
ItemDragI
nfo对象说明
)
,itemIndex为拖拽离开的列表元素索引值。 |
| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的列表元素可作为拖拽释放目标,当在列表元素内停止拖拽时触发,返回值event见
[
ItemDragInfo对象说明
](
ts-container-grid.md#
ItemDragI
nfo对象说明
)
,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置,isSuccess为是否成功释放。 |
| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入列表元素范围内时触发,返回值event见
[
ItemDragInfo对象说明
](
ts-container-grid.md#
itemdragi
nfo对象说明
)
。 |
| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在列表元素范围内移动时触发,返回值event见
[
ItemDragInfo对象说明
](
ts-container-grid.md#
itemdragi
nfo对象说明
)
,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置。 |
| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开列表元素时触发,返回值event见
[
ItemDragInfo对象说明
](
ts-container-grid.md#
itemdragi
nfo对象说明
)
,itemIndex为拖拽离开的列表元素索引值。 |
| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的列表元素可作为拖拽释放目标,当在列表元素内停止拖拽时触发,返回值event见
[
ItemDragInfo对象说明
](
ts-container-grid.md#
itemdragi
nfo对象说明
)
,itemIndex为拖拽起始位置,insertIndex为拖拽插入位置,isSuccess为是否成功释放。 |
## ScrollState枚举说明
...
...
zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md
浏览文件 @
ace65681
...
...
@@ -23,10 +23,10 @@ ListItem()
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| sticky |
[
Sticky
](
#sticky
)
| Sticky.None | 设置ListItem吸顶效果。 |
| editable | boolean
\|
[
EditMode
](
#edit
Mode
)
| false | 当前ListItem元素是否可编辑,进入编辑模式后可删除或移动。 |
| sticky |
[
Sticky
](
#sticky
枚举说明
)
| Sticky.None | 设置ListItem吸顶效果。 |
| editable | boolean
\|
[
EditMode
](
#edit
mode枚举说明
)
| false | 当前ListItem元素是否可编辑,进入编辑模式后可删除或移动。 |
| selectable
<sup>
8+
</sup>
| boolean | true | 当前ListItem元素是否可以被鼠标框选。
<br/>
>
**说明:**
<br/>
>
外层List容器的鼠标框选开启时,ListItem的框选才生效。 |
| swipeAction
<sup>
9+
</sup>
| {
<br/>
start?:
CustomBuilder,
<br/>
end?:CustomBuilder,
<br/>
edgeEffect?:
[
SwipeEdgeEffect
](
#swipeedgeeffect
)
,
<br/>
} | - | 用于设置ListItem的划出组件。
<br/>
start:
ListItem向右划动时item左边的组件(List垂直布局时)或ListItem向下划动时item上方的组件(List水平布局时)。
<br/>
end:
ListItem向左划动时item右边的组件(List垂直布局时)或ListItem向上划动时item下方的组件(List水平布局时)。
<br/>
edgeEffect:
滑动效果。
<br/>
|
| swipeAction
<sup>
9+
</sup>
| {
<br/>
start?:
CustomBuilder,
<br/>
end?:CustomBuilder,
<br/>
edgeEffect?:
[
SwipeEdgeEffect
](
#swipeedgeeffect
9枚举说明
)
,
<br/>
} | - | 用于设置ListItem的划出组件。
<br/>
start:
ListItem向右划动时item左边的组件(List垂直布局时)或ListItem向下划动时item上方的组件(List水平布局时)。
<br/>
end:
ListItem向左划动时item右边的组件(List垂直布局时)或ListItem向上划动时item下方的组件(List水平布局时)。
<br/>
edgeEffect:
滑动效果。
<br/>
|
## Sticky枚举说明
| 名称 | 描述 |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录