1# ListItem 2 3用来展示列表具体item，宽度默认充满List组件，必须配合List来使用。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含单个子组件。 13 14 15## 接口 16 17ListItem(value?: string) 18 19 20## 属性 21 22| 名称 | 参数类型 | 默认值 | 描述 | 23| ----------------------- | ------- | ----------- | ---------------------------------------- | 24| sticky | Sticky | Sticky.None | 设置ListItem吸顶效果，参见Sticky枚举描述。<br/>默认值：Sticky.None | 25| editable | boolean \| EditMode | false | 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动。<br/>默认值：false | 26| selectable<sup>8+</sup> | boolean | true | 当前ListItem元素是否可以被鼠标框选。<br/>默认值：true<br/>**说明：**<br/>外层List容器的鼠标框选开启时，ListItem的框选才生效。 | 27 28## Sticky枚举说明 29 30| 名称 | 描述 | 31| ------ | --------- | 32| None | 无吸顶效果。 | 33| Normal | 当前item吸顶。 | 34| Opacity | 当前item吸顶显示透明度变化效果。 | 35 36## EditMode枚举说明 37 38| 名称 | 描述 | 39| ------ | --------- | 40| None | 编辑操作不限制。 | 41| Deletable | 可删除。 | 42| Movable | 可移动。 | 43 44## 事件 45 46| 名称 | 功能描述 | 47| ---------------------------------------- | ---------------------------------------- | 48| onSelect(event: (isSelected: boolean) => void)<sup>8+</sup> | ListItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 | 49 50 51## 示例 52 53```ts 54// xxx.ets 55@Entry 56@Component 57struct ListItemExample { 58 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 59 @State editFlag: boolean = false 60 61 build() { 62 Column() { 63 List({ space: 20, initialIndex: 0 }) { 64 ListItem() { 65 Text('sticky:Normal , click me edit list') 66 .width('100%').height(40).fontSize(12).fontColor(0xFFFFFF) 67 .textAlign(TextAlign.Center).backgroundColor(0x696969) 68 .onClick(() => { 69 this.editFlag = !this.editFlag 70 }) 71 }.sticky(Sticky.Normal) 72 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 }.editable(this.editFlag) 79 }, item => item) 80 } 81 .editMode(true) 82 .onItemDelete((index: number) => { 83 console.info(this.arr[index - 1] + 'Delete') 84 this.arr.splice(index - 1,1) 85 this.editFlag = false 86 return true 87 }).width('90%') 88 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 89 } 90} 91``` 92 93 94
