QML ListItem Element

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

Inherits Item

Inherited by SelectionListItem.

Properties

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

Signals

• 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 all the ListItems 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

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.padding
          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 focus but is not yet selected. This is only available on devices that have hardware selection keys that allow a 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.padding
         role: "Title"
         mode: listItem2.mode
         text: "Hello world!"
     }
 }

Signal Documentation