1# ListItem 2 3The **\<ListItem>** component displays specific items in the list. It must be used together with **\<List>**. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12This component can contain a single child component. 13 14 15## APIs 16 17ListItem(value?: string) 18 19Since API version 9, this API is supported in ArkTS widgets. 20 21## Attributes 22 23In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 24 25| Name| Type| Description| 26| -------- | -------- | -------- | 27| sticky<sup>(deprecated)</sup> | [Sticky](#stickydeprecated) | Sticky effect of the list item.<br>Default value: **Sticky.None**<br>This API is deprecated since API version 9. You are advised to use **sticky** of the [\<List>](ts-container-list.md#attributes) component.| 28| editable<sup>(deprecated)</sup> | boolean \| [EditMode](#editmode) | Whether to enter editing mode, where the list item can be deleted or moved.<br>This API is deprecated since API version 9.<br>Default value: **false**| 29| selectable<sup>8+</sup> | boolean | Whether the current list item is selectable by mouse drag.<br>**NOTE**<br>This attribute takes effect only when mouse frame selection is enabled for the parent **\<List>** container.<br>Default value: **true**| 30| swipeAction<sup>9+</sup> | {<br>start?: CustomBuilder,<br>end?:CustomBuilder,<br>edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),<br>} | Component displayed when the list item is swiped out from the screen edge.<br>- **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).<br>- **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).<br>- **edgeEffect**: scroll effect.<br>**NOTE**<br>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.| 31 32## Sticky<sup>(deprecated)</sup> 33This API is deprecated since API version 9. You are advised to use [stickyStyle](ts-container-list.md#stickystyle9) of the **\<List>** component. 34| Name| Description| 35| -------- | -------- | 36| None | The list item is not sticky.| 37| Normal | The list item is sticky with no special effects.| 38| Opacity | The list item is sticky with opacity changes.| 39 40## EditMode 41 42| Name | Description | 43| ------ | --------- | 44| None | The editing operation is not restricted. | 45| Deletable | The list item can be deleted.| 46| Movable | The list item can be moved.| 47 48## SwipeEdgeEffect<sup>9+</sup> 49| Name| Description| 50| -------- | -------- | 51| 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.| 52| None | The list item cannot scroll beyond the edge of the list| 53 54## Events 55 56| Name| Description| 57| -------- | -------- | 58| onSelect(event: (isSelected: boolean) => void)<sup>8+</sup> | Triggered when the selected state of the **\<ListItem>** changes.<br>**isSelected**: Returns **true** if the **\<ListItem>** is selected by mouse drag; returns **false** otherwise.| 59 60 61## Example 62 63```ts 64// xxx.ets 65@Entry 66@Component 67struct ListItemExample { 68 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 69 70 build() { 71 Column() { 72 List({ space: 20, initialIndex: 0 }) { 73 ForEach(this.arr, (item) => { 74 ListItem() { 75 Text('' + item) 76 .width('100%').height(100).fontSize(16) 77 .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) 78 } 79 }, item => item) 80 }.width('90%') 81 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 82 } 83} 84``` 85 86 87 88```ts 89// xxx.ets 90@Entry 91@Component 92struct ListItemExample2 { 93 @State message: string = 'Hello World' 94 95 @Builder itemEnd() { 96 Row () { 97 Button("Del").margin("4vp") 98 Button("Set").margin("4vp") 99 }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly) 100 } 101 102 build() { 103 Column() { 104 List({space:10}) { 105 ListItem() { 106 Text(this.message) 107 .width('100%') 108 .height(100) 109 .fontSize(16) 110 .textAlign(TextAlign.Center) 111 .borderRadius(10) 112 .backgroundColor(0xFFFFFF) 113 } 114 .swipeAction({ end:this.itemEnd}) 115 116 ListItem() { 117 Text(this.message) 118 .width('100%') 119 .height(100) 120 .fontSize(16) 121 .textAlign(TextAlign.Center) 122 .borderRadius(10) 123 .backgroundColor(0xFFFFFF) 124 } 125 .swipeAction({ start:this.itemEnd}) 126 } 127 } 128 .padding(10) 129 .backgroundColor(0xDCDCDC) 130 .width('100%') 131 .height('100%') 132 } 133} 134``` 135 136
