# ListItem
>![](../../public_sys-resources/icon-note.gif) **说明:**
>该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
用来展示列表具体item,宽度默认充满List组件,必须配合List来使用。
## 权限列表
无
## 子组件
可以包含单个子组件。
## 接口
ListItem\(\)
## 属性
名称
|
参数类型
|
默认值
|
描述
|
sticky
|
Sticky
|
None
|
设置ListItem吸顶效果,参见Sticky枚举描述。
|
editable
|
boolean
|
false
|
声明当前ListItem元素是否可编辑,进入编辑模式后可删除。
|
- Sticky枚举说明
名称
|
描述
|
None
|
无吸顶效果。
|
Normal
|
当前item吸顶,滑动消失。
|
## 示例
```
@Entry
@Component
struct ListItemExample {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State editFlag: boolean = false
build() {
Column() {
List({ space: 20, initialIndex: 0 }) {
ListItem() {
Text('sticky:Normal , click me edit list')
.width('100%').height(40).fontSize(12).fontColor(0xFFFFFF)
.textAlign(TextAlign.Center).backgroundColor(0x696969)
.onClick(() => {
this.editFlag = !this.editFlag
})
}.sticky(Sticky.Normal)
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}.editable(this.editFlag)
}, item => item)
}
.editMode(true)
.onItemDelete((index: number) => {
console.info(this.arr[index - 1] + 'Delete')
this.arr.splice(index - 1,1)
this.editFlag = false
return true
}).width('90%')
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}
```
![](figures/ListItem.gif)