How to use HarmonyOS NEXT – List Layout?

A list is a complex container that automatically provides scrolling functionality when the number of items in the list reaches a certain level and the content exceeds the screen size. It is suitable for presenting similar data types or datasets, such as images and text. Displaying a dataset in a list is a common requirement in many applications, such as contacts, music lists, shopping lists, etc.

Using lists can easily and efficiently display structured and scrollable information. By linearly arranging the sub components ListItemGroup or ListItem vertically or horizontally in the List component, a single view is provided for the rows or columns in the list, or a loop rendering is used to iterate a set of rows or columns, or any number of individual views and ForEach structures are mixed to construct a list. The List component supports generating sub components using rendering control methods such as conditional rendering, loop rendering, lazy loading, etc.

interface

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

List contains ListItem and ListItemGroup sub components.
The sub components of List must be ListItemGroup or ListItem, and ListItem and ListItemGroup must be used in conjunction with List.

Rendering list data through ForEach loop
Code Examples

@Entry
@Component
struct ListPage {
  @State message: string = 'List Layout';

  cities:Array=[
    '北京市','上海市','广州市','杭州市','东莞市'
  ]

  @Builder
  groupHeader(text: string) {
    Text(text)
      .fontWeight(FontWeight.Bold)
      .backgroundColor(Color.Orange)
      .width('100%')
      .padding(4)
      .textAlign(TextAlign.Center)
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      List() {
        ListItem() {
          Text('北京')
        }

        ListItem() {
          Text('上海')
        }

        ListItem() {
          Text('广州')
        }

        ListItemGroup({ header: this.groupHeader('一线城市')}){
          ListItem() {
            Text('北京')
          }

          ListItem() {
            Text('上海')
          }

          ListItem() {
            Text('广州')
          }
        }

        ListItemGroup({header:this.groupHeader('循环遍历')}){
          ForEach(this.cities,(item:string)=>{
            ListItem(){
              Text(item)
            }
          })
        }
      }
      .backgroundColor('#EEEEEE')
      .alignListItem(ListItemAlign.Center)
    }
    .height('100%')
    .width('100%')
  }
}

Add a dividing line
·List provides a divider attribute to add separators between list items. When setting the divider property, the thickness and color of the separator can be set through the strokeWidth and color properties.
·The startMargin and endMargin properties are used to set the distance between the separation line and the starting end of the side of the list, and the distance from the end of the side of the list, respectively.

Code Examples

class DividerTmp {
  strokeWidth: Length = 1
  startMargin: Length = 60
  endMargin: Length = 10
  color: ResourceColor="#ffe9f0f0"

  constructor(strokeWidth: Length, startMargin: Length, endMargin: Length, color: ResourceColor) {
    this.strokeWidth = strokeWidth
    this.startMargin = startMargin
    this.endMargin = endMargin
    this.color = color
  }
}
@Entry
@Component
struct EgDivider {
  @State egDivider: DividerTmp = new DividerTmp(1, 60, 10, '#ffe9f0f0')
  build() {
    List() {
      // ...
    }
    .divider(this.egDivider)
  }
}

scroll bar
When using the List component, the display of the list scrollbar can be controlled through the scrollBar property. The value type of scrollBar is BarState. When the value is BarState Auto means to display scrollbars as needed. At this point, when touching the scrollbar area, the control is displayed. You can drag the scrollbar up and down to quickly browse the content, and it will become thicker when dragged. If no action is taken, the scrollbar will automatically disappear after 2 seconds.

List() {
  // ...
}
.scrollBar(BarState.Auto)