提交 506dc460 编写于 作者: Y yeyinglong

废弃List编辑模式

Signed-off-by: Nyeyinglong <yeyinglong@live.com>
上级 319beabd
...@@ -35,7 +35,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller? ...@@ -35,7 +35,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
| divider | {<br/>strokeWidth:&nbsp;[Length](ts-types.md#length),<br/>color?:[ResourceColor](ts-types.md),<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>}&nbsp;\|&nbsp;null | 设置ListItem分割线样式,默认无分割线。<br/>- strokeWidth:&nbsp;分割线的线宽。<br/>- color:&nbsp;分割线的颜色。<br/>- startMargin:&nbsp;分割线与列表侧边起始端的距离。<br/>- endMargin:&nbsp;分割线与列表侧边结束端的距离。 | | divider | {<br/>strokeWidth:&nbsp;[Length](ts-types.md#length),<br/>color?:[ResourceColor](ts-types.md),<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>}&nbsp;\|&nbsp;null | 设置ListItem分割线样式,默认无分割线。<br/>- strokeWidth:&nbsp;分割线的线宽。<br/>- color:&nbsp;分割线的颜色。<br/>- startMargin:&nbsp;分割线与列表侧边起始端的距离。<br/>- endMargin:&nbsp;分割线与列表侧边结束端的距离。 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值:BarState.Off | | scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值:BarState.Off |
| cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量,其中ListItemGroup将作为一个整体进行计算,ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考[减少应用白块说明](../../ui/ui-ts-performance-improvement-recommendation.md#减少应用滑动白块)<br/>默认值:1 | | cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量,其中ListItemGroup将作为一个整体进行计算,ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考[减少应用白块说明](../../ui/ui-ts-performance-improvement-recommendation.md#减少应用滑动白块)<br/>默认值:1 |
| editMode | boolean | 声明当前List组件是否处于可编辑模式<br/>默认值:false | | editMode<sup>(deprecated)</sup> | boolean | 声明当前List组件是否处于可编辑模式。<br/>从API version9开始废弃<br/>默认值:false |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果。<br/>默认值:EdgeEffect.Spring | | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果。<br/>默认值:EdgeEffect.Spring |
| chainAnimation | boolean | 设置当前List是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:List内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。<br/>默认值:false<br/>-&nbsp;false:不启用链式联动。<br/>-&nbsp;true:启用链式联动。 | | chainAnimation | boolean | 设置当前List是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:List内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。<br/>默认值:false<br/>-&nbsp;false:不启用链式联动。<br/>-&nbsp;true:启用链式联动。 |
| multiSelectable<sup>8+</sup> | boolean | 是否开启鼠标框选。<br/>默认值:false<br/>-&nbsp;false:关闭框选。<br/>-&nbsp;true:开启框选。 | | multiSelectable<sup>8+</sup> | boolean | 是否开启鼠标框选。<br/>默认值:false<br/>-&nbsp;false:关闭框选。<br/>-&nbsp;true:开启框选。 |
...@@ -65,7 +65,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller? ...@@ -65,7 +65,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | -------- | -------- |
| onItemDelete(event: (index: number) => boolean) | 当List组件在编辑模式时,点击ListItem右边出现的删除按钮时触发<br/>- index: 被删除的列表项的索引值。 | | onItemDelete<sup>(deprecated)</sup>(event: (index: number) => boolean) | 当List组件在编辑模式时,点击ListItem右边出现的删除按钮时触发。<br/>从API version9开始废弃<br/>- index: 被删除的列表项的索引值。 |
| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发。<br/>- scrollOffset: 滑动偏移量。<br/>- [scrollState](#scrollstate枚举说明): 当前滑动状态。 | | onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发。<br/>- scrollOffset: 滑动偏移量。<br/>- [scrollState](#scrollstate枚举说明): 当前滑动状态。 |
| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发。<br/>计算索引值时,ListItemGroup作为一个整体占一个索引值,不计算ListItemGroup内部ListItem的索引值。<br/>- start: 滑动起始位置索引值。<br/>- end: 滑动结束位置索引值。 | | onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发。<br/>计算索引值时,ListItemGroup作为一个整体占一个索引值,不计算ListItemGroup内部ListItem的索引值。<br/>- start: 滑动起始位置索引值。<br/>- end: 滑动结束位置索引值。 |
| onReachStart(event: () => void) | 列表到达起始位置时触发。 | | onReachStart(event: () => void) | 列表到达起始位置时触发。 |
...@@ -89,7 +89,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller? ...@@ -89,7 +89,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
> **说明:** > **说明:**
> >
> 要使List处于可编辑模式需配合onItemDelete事件和ListItem的editable属性,即可编辑模式实现删除列表项功能,需满足以下条件: > 要使List处于可编辑模式需配合onItemDelete事件和ListItem的editable属性,即可编辑模式实现删除列表项功能,需满足以下条件(该功能从API9开始废弃)
> >
> - editMode属性设置为true。 > - editMode属性设置为true。
> >
...@@ -99,7 +99,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller? ...@@ -99,7 +99,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
> >
> 实现ListItem拖拽,需满足以下条件: > 实现ListItem拖拽,需满足以下条件:
> >
> - editMode属性设置为true。 > - editMode属性设置为true(从API9开始无需设置editMode属性)
> >
> - 绑定onDragStart事件,且事件回调中返回浮动UI布局。 > - 绑定onDragStart事件,且事件回调中返回浮动UI布局。
...@@ -112,43 +112,31 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller? ...@@ -112,43 +112,31 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
@Component @Component
struct ListExample { struct ListExample {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State editFlag: boolean = false
build() { build() {
Stack({ alignContent: Alignment.TopStart }) { Column() {
Column() { List({ space: 20, initialIndex: 0 }) {
List({ space: 20, initialIndex: 0 }) { ForEach(this.arr, (item) => {
ForEach(this.arr, (item) => { ListItem() {
ListItem() { Text('' + item)
Text('' + item) .width('100%').height(100).fontSize(16)
.width('100%').height(100).fontSize(16) .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) }
}.editable(true) }, item => item)
}, item => item) }
} .listDirection(Axis.Vertical) // 排列方向
.listDirection(Axis.Vertical) // 排列方向 .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
.edgeEffect(EdgeEffect.None) // 滑动到边缘无效果 .onScrollIndex((firstIndex: number, lastIndex: number) => {
.chainAnimation(false) // 联动特效关闭 console.info('first' + firstIndex)
.onScrollIndex((firstIndex: number, lastIndex: number) => { console.info('last' + lastIndex)
console.info('first' + firstIndex) })
console.info('last' + lastIndex) .width('90%')
}) }
.editMode(this.editFlag) .width('100%')
.onItemDelete((index: number) => { .height('100%')
console.info(this.arr[index] + 'Delete') .backgroundColor(0xDCDCDC)
this.arr.splice(index, 1) .padding({ top: 5 })
console.info(JSON.stringify(this.arr))
this.editFlag = false
return true
}).width('90%')
}.width('100%')
Button('edit list')
.onClick(() => {
this.editFlag = !this.editFlag
}).margin({ top: 5, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
} }
} }
``` ```
......
...@@ -23,7 +23,7 @@ ListItem(value?: string) ...@@ -23,7 +23,7 @@ ListItem(value?: string)
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| sticky<sup>(deprecated)</sup> | [Sticky](#stickydeprecated枚举说明) | 设置ListItem吸顶效果。<br/>默认值:Sticky.None<br/>从API version9开始废弃,推荐使用[List组件sticky属性](ts-container-list.md#属性)。 | | sticky<sup>(deprecated)</sup> | [Sticky](#stickydeprecated枚举说明) | 设置ListItem吸顶效果。<br/>默认值:Sticky.None<br/>从API version9开始废弃,推荐使用[List组件sticky属性](ts-container-list.md#属性)。 |
| editable | boolean&nbsp;\|&nbsp;[EditMode](#editmode枚举说明) | 当前ListItem元素是否可编辑,进入编辑模式后可删除或移动列表项<br/>默认值:false | | editable<sup>(deprecated)</sup> | boolean&nbsp;\|&nbsp;[EditMode](#editmodedeprecated枚举说明) | 当前ListItem元素是否可编辑,进入编辑模式后可删除或移动列表项。<br/>从API version9开始废弃<br/>默认值:false |
| selectable<sup>8+</sup> | boolean | 当前ListItem元素是否可以被鼠标框选。<br/>**说明:**<br/>外层List容器的鼠标框选开启时,ListItem的框选才生效。<br/>默认值:true | | selectable<sup>8+</sup> | boolean | 当前ListItem元素是否可以被鼠标框选。<br/>**说明:**<br/>外层List容器的鼠标框选开启时,ListItem的框选才生效。<br/>默认值:true |
| swipeAction<sup>9+</sup> | {<br/>start?:&nbsp;CustomBuilder,<br/>end?:CustomBuilder,<br/>edgeEffect?:&nbsp;[SwipeEdgeEffect](#swipeedgeeffect9枚举说明),<br/>} | 用于设置ListItem的划出组件。<br/>- start:&nbsp;ListItem向右划动时item左边的组件(List垂直布局时)或ListItem向下划动时item上方的组件(List水平布局时)。<br/>- end:&nbsp;ListItem向左划动时item右边的组件(List垂直布局时)或ListItem向上划动时item下方的组件(List水平布局时)。<br/>- edgeEffect:&nbsp;滑动效果。<br/> | | swipeAction<sup>9+</sup> | {<br/>start?:&nbsp;CustomBuilder,<br/>end?:CustomBuilder,<br/>edgeEffect?:&nbsp;[SwipeEdgeEffect](#swipeedgeeffect9枚举说明),<br/>} | 用于设置ListItem的划出组件。<br/>- start:&nbsp;ListItem向右划动时item左边的组件(List垂直布局时)或ListItem向下划动时item上方的组件(List水平布局时)。<br/>- end:&nbsp;ListItem向左划动时item右边的组件(List垂直布局时)或ListItem向上划动时item下方的组件(List水平布局时)。<br/>- edgeEffect:&nbsp;滑动效果。<br/> |
...@@ -35,8 +35,8 @@ ListItem(value?: string) ...@@ -35,8 +35,8 @@ ListItem(value?: string)
| Normal | 当前item吸顶。 | | Normal | 当前item吸顶。 |
| Opacity | 当前item吸顶显示透明度变化效果。 | | Opacity | 当前item吸顶显示透明度变化效果。 |
## EditMode枚举说明 ## EditMode<sup>(deprecated)</sup>枚举说明
从API version9开始废弃。
| 名称 | 描述 | | 名称 | 描述 |
| ------ | --------- | | ------ | --------- |
| None | 编辑操作不限制。 | | None | 编辑操作不限制。 |
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册