1# ListItem 2 3用来展示列表具体item，必须配合List来使用。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含单个子组件。 13 14 15## 接口 16 17ListItem(value?: string) 18 19从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21## 属性 22 23除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 24 25| 名称 | 参数类型 | 描述 | 26| -------- | -------- | -------- | 27| sticky<sup>(deprecated)</sup> | [Sticky](#stickydeprecated枚举说明) | 设置ListItem吸顶效果。<br/>默认值：Sticky.None<br/>从API version9开始废弃，推荐使用[List组件sticky属性](ts-container-list.md#属性)。 | 28| editable<sup>(deprecated)</sup> | boolean \| [EditMode](#editmode枚举说明) | 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动列表项。<br/>从API version9开始废弃。<br/>默认值：false | 29| selectable<sup>8+</sup> | boolean | 当前ListItem元素是否可以被鼠标框选。<br/>**说明：**<br/>外层List容器的鼠标框选开启时，ListItem的框选才生效。<br/>默认值：true | 30| swipeAction<sup>9+</sup> | {<br/>start?: CustomBuilder,<br/>end?:CustomBuilder,<br/>edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9枚举说明),<br/>} | 用于设置ListItem的划出组件。<br/>- start: ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。<br/>- end: ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。<br/>- edgeEffect: 滑动效果。<br/>**说明：** <br/>start和end对应的@builder函数中顶层必须是单个组件，不能是if/else、ForEach、LazyForEach语句。 | 31 32## Sticky<sup>(deprecated)</sup>枚举说明 33从API version9开始废弃，推荐使用[List组件stickyStyle枚举](ts-container-list.md#stickystyle9枚举说明)。 34| 名称 | 描述 | 35| -------- | -------- | 36| None | 无吸顶效果。 | 37| Normal | 当前item吸顶。 | 38| Opacity | 当前item吸顶显示透明度变化效果。 | 39 40## EditMode枚举说明 41 42| 名称 | 描述 | 43| ------ | --------- | 44| None | 编辑操作不限制。 | 45| Deletable | 可删除。 | 46| Movable | 可移动。 | 47 48## SwipeEdgeEffect<sup>9+</sup>枚举说明 49| 名称 | 描述 | 50| -------- | -------- | 51| Spring | ListItem划动距离超过划出组件大小后可以继续划动，松手后按照弹簧阻尼曲线回弹。 | 52| None | ListItem划动距离不能超过划出组件大小。 | 53 54## 事件 55 56| 名称 | 功能描述 | 57| -------- | -------- | 58| onSelect(event: (isSelected: boolean) => void)<sup>8+</sup> | ListItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 | 59 60 61## 示例 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
