List

The <list> component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.

NOTE

• This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
• This component can produce a bounce effect only when there is more than one screen of content.

Child Components

This component supports the <ListItem> child components.

APIs

List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})

Parameters

Attributes

Events

ScrollState

NOTE

To enable the editable mode for a list, the following conditions must be met:

• editMode is set to true.

• The list is bound to the onItemDelete event and the event returns true in the event callback.

• The editable attribute of ListItem is set to true.

To enable dragging for a list item, the following conditions must be met:

• editMode is set to true.

• The list item is bound to the onDragStart event and the event returns a floating UI during event callback.

Example

// xxx.ets
@Entry
@Component
struct ListExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State editFlag: boolean = false

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column() {
        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              Text('' + item)
                .width('100%').height(100).fontSize(16)
                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
            }.editable(true)
          }, item => item)
        }
        .listDirection(Axis.Vertical) // Arrangement direction
        .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider
        .edgeEffect(EdgeEffect.None) // No effect when the list scrolls to the edge.
        .chainAnimation(false) // Chained animations are disabled.
        .onScrollIndex((firstIndex: number, lastIndex: number) => {
          console.info('first' + firstIndex)
          console.info('last' + lastIndex)
        })
        .editMode(this.editFlag)
        .onItemDelete((index: number) => {
          console.info(this.arr[index] + 'Delete')
          this.arr.splice(index, 1)
          console.info(JSON.stringify(this.arr))
          this.editFlag = false
          return true
        }).width('90%')
      }.width('100%')

      Button('edit list')
        .onClick(() => {
          this.editFlag = !this.editFlag
        }).margin({ top: 5, left: 20 })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}