ListItem
NOTE This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The <ListItem> component displays specific items in the list. Its width occupies the <List> component by default and must be used together with <List>.
Required Permissions
None
Child Components
This component can contain a single child component.
APIs
ListItem()
Attributes
Name | Type | Default Value | Description |
---|---|---|---|
sticky | Sticky | Sticky.None | Sticky effect of the list item. For details, see Sticky enums. |
editable | boolean | false | Whether the list item is editable. A list item can be deleted in editing mode. |
selectable8+ | boolean | true | Whether the current <ListItem> is selectable by the mouse. > ![]() > This attribute takes effect only when mouse frame selection is enabled for the parent <List> container. |
- Sticky enums
Name | Description |
---|---|
None | No sticky. |
Normal | The list item is sticky. |
Events
Name | Description |
---|---|
onSelect(callback: (isSelected: boolean) => any)8+ | Triggered when the selected state of the <ListItem> changes. isSelected: Returns true if the <ListItem> is selected by the mouse; returns false otherwise. |
Example
@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 })
}
}