Qt Documentation

Contents

ComboBox QML Type

Provides a drop-down list functionality. More...

Import Statement: import QtQuick.Controls 1.3
Since: Qt 5.1
Inherits:

FocusScope

Properties

Signals

Methods

Detailed Description

Add items to the ComboBox by assigning it a ListModel, or a list of strings to the model property.

ComboBox {
    width: 200
    model: [ "Banana", "Apple", "Coconut" ]
}

In this example we are demonstrating how to use a ListModel with a combo box.

ComboBox {
    currentIndex: 2
    model: ListModel {
        id: cbItems
        ListElement { text: "Banana"; color: "Yellow" }
        ListElement { text: "Apple"; color: "Green" }
        ListElement { text: "Coconut"; color: "Brown" }
    }
    width: 200
    onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text + ", " + cbItems.get(currentIndex).color)
}

You can make a combo box editable by setting the editable property. An editable combo box will autocomplete its text based on what is available in the model.

In the next example we demonstrate how you can append content to an editable combo box by reacting to the accepted signal. Note that you have to explicitly prevent duplicates.

 ComboBox {
     editable: true
     model: ListModel {
         id: model
         ListElement { text: "Banana"; color: "Yellow" }
         ListElement { text: "Apple"; color: "Green" }
         ListElement { text: "Coconut"; color: "Brown" }
     }
     onAccepted: {
         if (find(currentText) === -1) {
             model.append({text: editText})
             currentIndex = find(editText)
         }
     }
 }

You can create a custom appearance for a ComboBox by assigning a ComboBoxStyle.

Property Documentation

read-onlyacceptableInput : bool

Returns true if the combo box contains acceptable text in the editable text field.

If a validator was set, this property will return true if the current text satisfies the validator or mask as a final string (not as an intermediate string).

This QML property was introduced in QtQuick.Controls 1.1.

See also validator and accepted.


activeFocusOnPress : bool

This property specifies whether the combobox should gain active focus when pressed. The default value is false.


read-onlycount : int

This property holds the number of items in the combo box.

This QML property was introduced in QtQuick.Controls 1.1.


currentIndex : int

The index of the currently selected item in the ComboBox.

Setting currentIndex to -1 will reset the selection and clear the text label. If editable is true, you may also need to manually clear editText.

See also model.


read-onlycurrentText : string

The text of the currently selected item in the ComboBox.

Note: Since currentText depends on currentIndex, there's no way to ensure currentText will be up to date whenever a onCurrentIndexChanged handler is called.


editText : string

This property specifies text being manipulated by the user for an editable combo box.

This QML property was introduced in QtQuick.Controls 1.1.


editable : bool

This property holds whether the combo box can be edited by the user. The default value is false.

This QML property was introduced in QtQuick.Controls 1.1.


read-onlyhovered : bool

This property indicates whether the control is being hovered.


read-onlyinputMethodComposing : bool

This property holds whether an editable ComboBox has partial text input from an input method.

While it is composing an input method may rely on mouse or key events from the ComboBox to edit or commit the partial text. This property can be used to determine when to disable events handlers that may interfere with the correct operation of an input method.

This QML property was introduced in QtQuick.Controls 1.3.


This property contains the edit Menu for working with text selection. Set it to null if no menu is wanted.

Note: The menu is only in use when editable is true

This QML property was introduced in QtQuick.Controls 1.3.


model : model

The model to populate the ComboBox from.

Changing the model after initialization will reset currentIndex to 0.


read-onlypressed : bool

This property holds whether the button is being pressed.


selectByMouse : bool

This property determines if the user can select the text in the editable text field with the mouse.

The default value is true.

This QML property was introduced in QtQuick.Controls 1.3.


style : Component

The style Component for this control.

See also Qt Quick Controls Styles QML Types.


textRole : string

The model role used for populating the ComboBox.


validator : Validator

Allows you to set a text validator for an editable ComboBox. When a validator is set, the text field will only accept input which leaves the text property in an intermediate state. The accepted signal will only be sent if the text is in an acceptable state when enter is pressed.

Currently supported validators are IntValidator, DoubleValidator, and RegExpValidator. An example of using validators is shown below, which allows input of integers between 11 and 31 into the text field:

Note: This property is only applied when editable is true

import QtQuick 2.2
import QtQuick.Controls 1.2

ComboBox {
    editable: true
    model: 10
    validator: IntValidator {bottom: 0; top: 10;}
    focus: true
}

This QML property was introduced in QtQuick.Controls 1.1.

See also acceptableInput, accepted, and editable.


Signal Documentation

accepted()

This signal is emitted when the Return or Enter key is pressed on an editable combo box. If the confirmed string is not currently in the model, the currentIndex will be set to -1 and the currentText will be updated accordingly.

Note: If there is a validator set on the combobox, the signal will only be emitted if the input is in an acceptable state.

The corresponding handler is onAccepted.

This QML signal was introduced in QtQuick.Controls 1.1.


activated(int index)

index is the triggered model index or -1 if a new string is accepted

This signal is similar to currentIndex changed, but will only be emitted if the combo box index was changed by the user and not when set programatically.

The corresponding handler is onActivated.

This QML signal was introduced in QtQuick.Controls 1.1.


Method Documentation

find( text)

Finds and returns the index of a given text If no match is found, -1 is returned. The search is case sensitive.

This QML method was introduced in QtQuick.Controls 1.1.


selectAll()

Causes all editText to be selected.

This QML method was introduced in QtQuick.Controls 1.1.


textAt( index)

Returns the text for a given index. If an invalid index is provided, null is returned

This QML method was introduced in QtQuick.Controls 1.1.


© 2015 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.