diff --git a/en/application-dev/reference/arkui-ts/figures/deleteListItem.gif b/en/application-dev/reference/arkui-ts/figures/deleteListItem.gif new file mode 100644 index 0000000000000000000000000000000000000000..5c2c529ef670b83df2e4bd261bbddfe6bca7e7ef Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/deleteListItem.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_1501929990650.jpg b/en/application-dev/reference/arkui-ts/figures/en-us_image_1501929990650.jpg deleted file mode 100644 index ca0ec86c6c71b6c6daa60bf3ee43795f33568c64..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_1501929990650.jpg and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitem.md b/en/application-dev/reference/arkui-ts/ts-container-listitem.md index 97f1d9faf82279e83ed14f7388c6b495fa6e948a..c54b6e0ee78b9ee062639e1ba966e75566bda5e8 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -11,13 +11,28 @@ The **\** component displays specific items in the list. It must be us This component can contain a single child component. - ## APIs -ListItem(value?: string) - Since API version 9, this API is supported in ArkTS widgets. +**API 1**: ListItem(value?: ListItemOptions)10+ + +**Parameters** + +| Name| Type | Mandatory| Description | +| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | +| value | [ListItemOptions](#listitemoptions10) | No | Value of the list item, containing the **style** parameter of the **ListItemStyle**enum type.| + +**API 2**: ListItem(value?: string)(deprecated) + +This API is deprecated since API version 10. You are advised to use API 1 instead. + +**Parameters** + +| Name| Type | Mandatory| Description| +| ------ | ----------------------------- | ---- | -------- | +| value | string(deprecated) | No | N/A | + ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. @@ -27,7 +42,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | sticky(deprecated) | [Sticky](#stickydeprecated) | Sticky effect of the list item.
Default value: **Sticky.None**
This API is deprecated since API version 9. You are advised to use **sticky** of the [\](ts-container-list.md#attributes) component.| | editable(deprecated) | boolean \| [EditMode](#editmodedeprecated) | Whether to enter editing mode, where the list item can be deleted or moved.
This API is deprecated since API version 9.
Default value: **false**| | selectable8+ | boolean | Whether the current list item is selectable by mouse drag.
**NOTE**
This attribute takes effect only when mouse frame selection is enabled for the parent **\** container.
Default value: **true**| -| swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),
} | Component displayed when the list item is swiped out from the screen edge.
- **start**: component on the left of the list item when the item is swiped to the right (in vertical list layout) or component above the list item when the item is swiped down (in horizontal list layout).
- **end**: component on the right of the list item when the item is swiped to the left (in vertical list layout) or component below the list item when the item is swiped up (in horizontal list layout).
- **edgeEffect**: scroll effect.
**NOTE**
The top level of the **@builder** function corresponding to **start** and **end** must be a single component and cannot be an **if/else**, **ForEach**, or **LazyForEach** statement.| +| swipeAction9+ | {
start?: CustomBuilder \| [SwipeActionItem](#swipeactionitem10),
end?:CustomBuilder \| [SwipeActionItem](#swipeactionitem10),
edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),
} | Swipe action displayed when the list item is swiped out from the screen edge.
- **start**: swipe action displayed on the left of the list item when the item is swiped right (in vertical list layout) or above the list item when the item is swiped down (in horizontal list layout).
- **end**: swipe action displayed on the right of the list item when the item is swiped left (in vertical list layout) or below the list item when the item is swiped up (in horizontal list layout).
- **edgeEffect**: scroll effect.
**NOTE**
- The top level of the **@builder** function corresponding to **start** and **end** must be a single component and cannot be an **if/else**, **ForEach**, or **LazyForEach** statement.
- The swipe gesture works only in the list item area. If a swipe causes a child component to extend beyond the list item area, the portion outside the area does not respond to the swipe. In light of this, avoid setting **swipeAction** to a component too wide in a multi-column list. | ## Sticky(deprecated) This API is deprecated since API version 9. You are advised to use [stickyStyle](ts-container-list.md#stickystyle9) of the **\** component. @@ -48,8 +63,36 @@ This API is deprecated since API version 9. ## SwipeEdgeEffect9+ | Name| Description| | -------- | -------- | -| Spring | When the list item scrolls to the edge of the list, it can continue to scroll for a distance and rebound after being released.| -| None | The list item cannot scroll beyond the edge of the list| +| Spring | When the list item scrolls to the edge of the list, it can continue to scroll for a distance. If the delete area is set, the list item can continue to scroll after the scroll distance reaches the delete threshold and, after being released, rebound following the spring curve.| +| None | The list item cannot scroll beyond the edge of the list. If the delete area is set, the list item cannot continue to scroll after the scroll distance reaches the delete threshold. If the delete callback is set, it is triggered when the delete threshold is reached and the list item is released.| + +## SwipeActionItem10+ +Describes the swipe action item. + +For a list in vertical layout, it refers to the delete item displayed on the left (or right) of the list item when the list item is swiped right (or left). + +For a list in horizontal layout, it refers to the delete item displayed below (or above) the list item when the list item is swiped up (or down). + +| Name | Type | Mandatory| Description | +| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| deleteAreaDistance | [Length](ts-types.md#length) | No| Swipe distance threshold for deleting the list item.
Default value: **56vp**
**NOTE**
This parameter cannot be set in percentage.
If the value is greater than the list item width minus the width of **swipeAction**, or is less than or equal to 0, the delete area will not be set.| +| onDelete | () => void | No| Callback invoked when the list item is released while in the delete area.
**NOTE**
This callback is invoked only when the list item is released in a position that meets or goes beyond the specified swipe distance threshold (which must be valid) for deleting the list item.| +| onEntryDeleteArea | () => void | No| Callback invoked each time the list item enters the delete area.| +| onExitDeleteArea | () => void | No|Callback invoked each time the list item exits the delete area.| +| builder | CustomBuilder | No|Swipe action item displayed when the list item is swiped left or right (in vertical list layout) or up or down (in horizontal list layout).| +| useDefaultDeleteAnimation | boolean | No|Whether to use the default delete animation.
Default value: **true**| +## ListItemOptions10+ + +| Name | Type | Mandatory| Description | +| ----- | ----------------------------------------- | ---- | ------------------------------------------------------------ | +| style | [ListItemStyle](#listitemstyle10) | No | Style of the list item.
Default value: **ListItemStyle.NONE**
If this parameter is set to **ListItemStyle.NONE**, no style is applied.
If this parameter is set to **ListItemStyle.CARD**, the default card style is applied, but only when **ListItemGroupStyle.CARD** is set for [\](ts-container-listitemgroup.md).
In the default card style, the list item has a 48 vp height and 100% width. It can be in focus, hover, press, selected, or disable style depending on the state.
**NOTE**
In the default card style, the list has its **listDirection** attribute fixed at **Axis.Vertical** and **alignListItem** attribute at **ListItemAlign.Center**. | + +## ListItemStyle10+ + +| Name| Description | +| ---- | ------------------ | +| NONE | No style. | +| CARD | Default card style.| ## Events @@ -78,6 +121,7 @@ struct ListItemExample { } }, item => item) }.width('90%') + .scrollBar(BarState.Off) }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) } } @@ -85,45 +129,63 @@ struct ListItemExample { ![en-us_image_0000001219864159](figures/en-us_image_0000001219864159.gif) + ```ts // xxx.ets @Entry @Component struct ListItemExample2 { @State message: string = 'Hello World' + @State arr: number[] = [0, 1, 2, 3, 4] + @State enterEndDeleteAreaString: string = "not enterEndDeleteArea" + @State exitEndDeleteAreaString: string = "not exitEndDeleteArea" @Builder itemEnd() { - Row () { - Button("Del").margin("4vp") + Row() { + Button("Delete").margin("4vp") Button("Set").margin("4vp") }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly) } build() { Column() { - List({space:10}) { - ListItem() { - Text(this.message) - .width('100%') - .height(100) - .fontSize(16) - .textAlign(TextAlign.Center) - .borderRadius(10) - .backgroundColor(0xFFFFFF) - } - .swipeAction({ end:this.itemEnd}) - - ListItem() { - Text(this.message) - .width('100%') - .height(100) - .fontSize(16) - .textAlign(TextAlign.Center) - .borderRadius(10) - .backgroundColor(0xFFFFFF) - } - .swipeAction({ start:this.itemEnd}) + List({ space: 10 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text("item" + item) + .width('100%') + .height(100) + .fontSize(16) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(0xFFFFFF) + } + .transition({ type: TransitionType.Delete, opacity: 0 }) + .swipeAction({ + end: { + builder: this.itemEnd.bind(this, item), + useDefaultDeleteAnimation: true, + onDelete: () => { + animateTo({ duration: 1000 }, () => { + let index = this.arr.indexOf(item) + this.arr.splice(index, 1) + }) + }, + deleteAreaDistance: 80, + onEnterDeleteArea: () => { + this.enterEndDeleteAreaString = "enterEndDeleteArea" + this.exitEndDeleteAreaString = "not exitEndDeleteArea" + }, + onExitDeleteArea: () => { + this.enterEndDeleteAreaString = "not enterEndDeleteArea" + this.exitEndDeleteAreaString = "exitEndDeleteArea" + } + } + }) + }, item => item) } + Text(this.enterEndDeleteAreaString).fontSize(20) + Text(this.exitEndDeleteAreaString).fontSize(20) } .padding(10) .backgroundColor(0xDCDCDC) @@ -132,4 +194,4 @@ struct ListItemExample2 { } } ``` -![en-us_image_1501929990650](figures/en-us_image_1501929990650.jpg) +![deleteListItem](figures/deleteListItem.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md index f0aab291ecf652bba774dcdaa7c567081dea69a6..48ed2249eb25c786c2bcd5f8cb900bd4e4b1589a 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md @@ -19,15 +19,16 @@ This component supports the **[\](ts-container-listitem.md)** child co ## APIs -ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string}) +ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string, style?: ListItemGroupStyle}) **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| header | [CustomBuilder](ts-types.md#custombuilder8) | No| Header of the **\** component.| -| footer | [CustomBuilder](ts-types.md#custombuilder8) | No| Footer of the **\** component.| -| space | number \| string | No| Spacing between list items. This parameter is valid only between list items, but not between a header and list item or between a footer and list item.| +| Name | Type | Mandatory| Description | +| ------------------- | --------------------------------------------------- | ---- | ------------------------------------------------------------ | +| header | [CustomBuilder](ts-types.md#custombuilder8) | No | Header of the list item group. | +| footer | [CustomBuilder](ts-types.md#custombuilder8) | No | Footer of the list item group. | +| space | number \| string | No | Spacing between list items. This parameter is valid only between list items, but not between a header and list item or between a footer and list item.| +| style10+ | [ListItemGroupStyle](#listitemgroupstyle10) | No | Style of the list item group.
Default value: **ListItemGroupStyle.NONE**
If this parameter is set to **ListItemGroupStyle.NONE**, no style is applied.
If this parameter is set to **ListItemGroupStyle.CARD**, the default card style is applied, but only when **ListItemStyle.CARD** is set for [\](ts-container-listitem.md).
It can be in focus, hover, press, selected, or disable style depending on the state.
**NOTE**
In the default card style, the list has its **listDirection** attribute fixed at **Axis.Vertical** and **alignListItem** attribute at **ListItemAlign.Center**; the **header** and **footer** parameters cannot be set for the list item group. | ## Attributes @@ -35,6 +36,13 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: | -------- | -------- | -------- | | divider | {
strokeWidth: [Length](ts-types.md#length),
color?: [ResourceColor](ts-types.md#resourcecolor),
startMargin?: [Length](ts-types.md#length),
endMargin?: [Length](ts-types.md#length)
} \| null | Style of the divider for the list items. By default, there is no divider.
- **strokeWidth**: stroke width of the divider.
- **color**: color of the divider.
- **startMargin**: distance between the divider and the start of the list.
- **endMargin**: distance between the divider and the end of the list.| +## ListItemGroupStyle10+ + +| Name| Description | +| ---- | ------------------ | +| NONE | No style. | +| CARD | Default card style.| + > **NOTE** > > The **\** component does not support the universal attribute **[aspectRatio](ts-universal-attributes-layout-constraints.md)**. @@ -99,12 +107,12 @@ struct ListItemGroupExample { } }, item => item) } - .borderRadius(20) .divider ({ strokeWidth: 1,color:Color.Blue }) // Divider between lines }) } .width('90%') .sticky(StickyStyle.Header|StickyStyle.Footer) + .scrollBar(BarState.Off) }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) } }