ComboBox

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

Import Statement:	import QtQuick.Controls 1.4
Since:	Qt 5.1
Inherits:	FocusScope

List of all members, including inherited members

Properties

acceptableInput : bool
activeFocusOnPress : bool
count : int
currentIndex : int
currentText : string
editText : string
editable : bool
hovered : bool
inputMethodComposing : bool
inputMethodHints : enumeration
menu : Component
model : model
pressed : bool
selectByMouse : bool
style : Component
textRole : string
validator : Validator

Signals

accepted()
activated(int)

Methods

int find(string text)
void selectAll()
string textAt(int index)

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-only] acceptableInput : 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-only] count : 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-only] currentText : 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-only] hovered : bool

This property indicates whether the control is being hovered.

[read-only] inputMethodComposing : 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.

inputMethodHints : enumeration

Provides hints to the input method about the expected content of the combo box and how it should operate.

The value is a bit-wise combination of flags or Qt.ImhNone if no hints are set.

Flags that alter behavior are:

Qt.ImhHiddenText - Characters should be hidden, as is typically used when entering passwords.
Qt.ImhSensitiveData - Typed text should not be stored by the active input method in any persistent storage like predictive user dictionary.
Qt.ImhNoAutoUppercase - The input method should not try to automatically switch to upper case when a sentence ends.
Qt.ImhPreferNumbers - Numbers are preferred (but not required).
Qt.ImhPreferUppercase - Upper case letters are preferred (but not required).
Qt.ImhPreferLowercase - Lower case letters are preferred (but not required).
Qt.ImhNoPredictiveText - Do not use predictive text (i.e. dictionary lookup) while typing.
Qt.ImhDate - The text editor functions as a date field.
Qt.ImhTime - The text editor functions as a time field.

Flags that restrict input (exclusive flags) are:

Qt.ImhDigitsOnly - Only digits are allowed.
Qt.ImhFormattedNumbersOnly - Only number input is allowed. This includes decimal point and minus sign.
Qt.ImhUppercaseOnly - Only upper case letter input is allowed.
Qt.ImhLowercaseOnly - Only lower case letter input is allowed.
Qt.ImhDialableCharactersOnly - Only characters suitable for phone dialing are allowed.
Qt.ImhEmailCharactersOnly - Only characters suitable for email addresses are allowed.
Qt.ImhUrlCharactersOnly - Only characters suitable for URLs are allowed.

Masks:

Qt.ImhExclusiveInputMask - This mask yields nonzero if any of the exclusive flags are used.

This QML property was introduced in QtQuick.Controls 1.5.

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-only] pressed : 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.

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)

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

index is the activated model index, or -1 if a new string is accepted.

The corresponding handler is onActivated.

This QML signal was introduced in QtQuick.Controls 1.1.

Method Documentation

int find(string 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.

void selectAll()

Causes all editText to be selected.

This QML method was introduced in QtQuick.Controls 1.1.

string textAt(int 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.

Contents

ComboBox

Properties

Signals

Methods

Detailed Description

Property Documentation

Signal Documentation

Method Documentation

Sign Up and Download for Free