QML ListItem Element

Symbian: Provides a template for creating a ListView delegate. More...

Inherited by SelectionListItem.

This element was introduced in Qt Quick Components 1.0.

• List of all members, including inherited members

Properties

• enabled : bool
• mode : string
• paddingItem : Item
• platformInverted : bool
• subItemIndicator : bool

Signal Handlers

• clicked
• pressAndHold

Detailed Description

A ListItem does not contain any visible content by default, it has only an invisible padding area to which you can anchor other items. This means that all the ListItem components in a list can have common margins.

A ListItem with the padding rectangle drawn as white

A ListItem with items anchored to the padding area

Implementing a ListItem

The following code snippet implements a ListItem with a text item on the top and subtitle text below. The two items are aligned in a column and they have the standard vertical spacing for a ListItem. The code snippet results a default state list item shown in the list below.

 ListItem {
      id: listItem1
      Column {
          anchors.fill: listItem1.paddingItem
          ListItemText {
              id: titleText
              mode: listItem1.mode
              role: "Title"
              text: "Title text"
          }
          ListItemText {
              id: subtitleText
              mode: listItem1.mode
              role: "SubTitle"
              text: "Subtitle text"
          }
      }
 }

ListItem States

A ListItem can have one of the four internal states:

• "" - The default state of a ListItem.

  

• "Pressed" - The ListItem enters this state when the user presses the ListItem.

  

• "Focused" - This state indicates that the list item has the focus but is not yet selected. This is only available on devices that have hardware selection keys that allow the user to navigate a list without touching the screen.

  

• "Disabled" - In this state the ListItem does not handle any touch or hardware inputs and the ListItem does not emit signals.

  

See also ListHeading, ListItemText, and ListView.

Property Documentation

 ListItem {
     id: listItem2

     ListItemText {
         anchors.fill: listItem2.paddingItem
         role: "Title"
         mode: listItem2.mode
         text: "Hello world!"
     }
 }

Signal Handler Documentation