Qt Quick Components

ListItem

The ListItem element provides common layout options for the row content in a ListView element. More...

Inherited by SelectionListItem.

  • List of all members, including inherited members
  • Properties

    Signals

    Methods

    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 but themable 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 image below shows the result.

     ListItem {
         id: textItem
         Column {
             anchors.fill: textItem.padding
             ListItemText {
                 id: titleText
                 mode: textItem.mode
                 role: "Title"
                 text: "Title text"
                 width: parent.width
             }
             ListItemText {
                 id: subtitleText
                 mode: textItem.mode
                 role: "SubTitle"
                 text: "Subtitle text"
                 width: parent.width
             }
         }

    ListItem with text and subtitle

    ListItem states

    A ListItem can have one of four internal states:

    • "" This is the default state of a ListItem.
    • "Pressed" The ListItem enters this state when the ListItem is pressed by the user.

    • "Focused" This state indicates that the item is focused but not yet selected. This is only available on devices that have hardware selection keys which 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 will not emit signals.

    See also ListHeading, ListItemText, and ListView.

    Property Documentation

    drillDownIndicator : bool


    enabled : bool

    Symbian: If true, the user can interact with this list item. If false, the list item is disabled and does nothing when the user selects it.


    horizontalSpacing : double


    mode : string

    Symbian: The Mode of the ListItem

    Mode property can be used to create association between ListItem and ListItemText. This way ListItemText is aware of internal state of the ListItem.

     ListItem {
         id: listItem
    
         ListItemText {
             anchors.fill: listItem.padding
             role: "Title"
             mode: listItem.mode
             text: "Hello world!"
         }
     }

    padding : Item

    The padding rectangle for the ListItem that items can be anchored to.


    paddingItem : Item

    Symbian: The invisible padding rectangle for the ListItem that items can be anchored to.


    style : style


    subItemIndicator : bool

    Symbian: If true, this list item will indicate that pressing the item will take user to some other item. For example another ListView will be shown to the user when the item is pressed. Note: It's up a developer to implement actual logic by handling pressed signal.

    ListItem with witn the subitem indicator


    verticalSpacing : double


    Signal Documentation

    ListItem::clicked ()

    This signal is emitted when the list item is pressed and released by the user.


    ListItem::pressAndHold ()

    Symbian: This signal is emitted when the user presses on the list item for the "long press" period of time. The length of time for a long press is the same as for MouseArea::onPressAndHold() which is currently 800ms.


    Method Documentation

    ListItem::preferredImageHeight ( ListImageSize )


    ListItem::preferredImageWidth ( ListImageSize )