Qt Reference Documentation

QML SelectionListItem Element

Symbian: Provides a list item that shows the current value and optionally a label for a setting. More...

Inherits ListItem

This element was introduced in Qt Quick Components 1.0.


Detailed Description

SelectionListItem is purely a visual component. It is not tied to any particular selector but you can use it, for instance, with SelectionDialog or Tumbler. You must bind the currently selected item to SelectionListItem's textual properties in a way that is suitable for that particular use case.

It is not recommended to use the subItemIndicator and paddingItem properties inherited from ListItem with SelectionListItem since it is a concrete, self-contained list item.

There are the following two possible layouts for SelectionListItem:

  • The two-row layout showing a label and a value. This layout is applied when you specify both the title and subTitle properties.
  • The single-row layout showing a value. This layout is applied when you leave the subTitle property empty.

The screenshots below illustrate two-row and one-row SelectionListItem components.

A two-row SelectionListItem component with the "City" label and the "Helsinki" value.

A one-row SelectionListItem component with the "Helsinki" value only.

Integrating SelectionDialog to SelectionListItem

The example below shows how to integrate SelectionDialog with SelectionListItem.

In this example the SelectionListItem is used as a standalone component outside any list. While this is technically possible, it is more typical to place this component in a ListView or other vertical list element.

     SelectionListItem {
         id: item
         title: "City"
         subTitle: selectionDialog.selectedIndex >= 0
                   ? selectionDialog.model.get(selectionDialog.selectedIndex).name
                   : "Please select"

         onClicked: selectionDialog.open()

         SelectionDialog {
             id: selectionDialog
             titleText: "Select one of the values"
             selectedIndex: -1
             model: ListModel {
                 ListElement { name: "Helsinki" }
                 ListElement { name: "Oulu" }
                 ListElement { name: "Rovaniemi" }
                 ListElement { name: "Tampere" }
                 ListElement { name: "Vaasa" }

The screenshot below shows the result of the code snippet.

SelectionDialog integrated to SelectionListItem.

Property Documentation

subTitle : string

The subtitle text that is shown below the title. This is an optional property.

title : string

The title text. You should use this property to show the selection value when you do not use subTitle.