QML control type: ComboBox, Control

ComboBox

1. Description

ComboBox is a combination button and popup list. It provides a way to present a list of options to the user in a way that takes up the least amount of screen real estate.

ComboBox is populated with data model. Data models are typically JavaScript arrays, ListModels, or integers, but other types of data models are also supported.

2. Attribute members

1. [read-only] acceptableInput: bool

Whether to include acceptable text in editable text fields.

2. count: int

The number of items in the combo box.

3. currentIndex: int

The index of the current item in the combo box. The default value is -1 when count is 0, otherwise the default value is 0.

4. [read-only] currentText: string

The text of the current item.

5. [read-only] currentValue: var

The value of the current item.

6. delegate: Component

A delegate used to display an item in a combo box popup.

It is recommended to use ItemDelegate (or any other AbstractButton derived class) as the delegate. This ensures that interactions work as expected and popups will automatically close when appropriate.

When using other types as delegates, popups must be closed manually. For example, if using MouseArea:

delegate: Rectangle {
//...
MouseArea {
//...
onClicked: comboBox.popup.close()
}
}

7. displayText: string

The text displayed on the button of the combo box.

By default, the display text shows the current selection. That is, the text that follows the current item. However, the default display text can be overridden with a custom value.

ComboBox {
currentIndex: 1
displayText: "Size: " + currentText
model: ["S", "M", "L"]
}

8. down: bool

Whether the combobox button is visually down.

Unless explicitly set otherwise, this property is true when pressed or when popup.visible is true. To return to the default value, set this property to undefined.

9. editText: string

The text in the text field of the editable combo box.

10. editable: bool

Whether the combo box is editable. The default value is false.

11. flat: bool

Whether the combobox button is flat. The default value is false.

Flat combobox buttons don’t paint the background unless interacted with. A flat combo box provides an appearance that makes it less prominent from the rest of the UI than a normal combo box. For example, when placing a combo box into a toolbar, you may want to make the combo box flat to better match the flat appearance of the tool buttons.

12. [read-only] highlightedIndex: int

The index of the highlighted item in the combo box’s popup list.

When the highlighted item is activated, the popup is closed, currentIndex is set to highlightIndex, and the value of this property is reset to -1 since there are no more highlighted items.

13. implicitContentWidthPolicy: enumeration

This property controls how the ComboBox’s implicit content width is calculated.

When the ComboBox is not wide enough to display the text, the text will be omitted, which may make it difficult for the end user to select an item. An effective way to ensure that the ComboBox is wide enough to avoid text being ignored is to set a width that is known to be large enough:

width: 300
implicitContentWidthPolicy: ComboBox.ContentItemImplicitWidth

However, it is often impossible to know whether a hardcoded value is large enough, because the size of the text depends on many factors, such as font family, font size, translation, etc.

The implicit content width policy provides an easy way to control how the implicit content width is calculated, which in turn affects the implicit width of the combo box and ensures that text is not ignored.

ContentItemImplicitWidth: implicitContentWidth will default to the width of the content item. This is the most efficient option because no additional text layout is done. Defaults.

WidestText: Every time the model changes, implicitContentWidth will be set to the implicit width of the largest text for the given textRole. This option should be used for smaller models as it can be expensive in performance.

WidestTextWhenCompleted: When the component completes, implicitContentWidth will be set to the implicit width of the largest text for the given textRole. This option should be used for smaller models as it can be expensive in performance.

Since this property only affects the ComboBox’s implicit width, setting an explicit width causes this property to be ignored.

Note: This functionality requires contentItem to be a type derived from TextInput.

14. [read-only] implicitIndicatorHeight: real / implicitIndicatorWidth: real

The privacy width and height of the indicator item.

15. indicator: Item

Indicator item (triangular item).

16. [read-only] inputMethod Composing: bool

Whether the editable combobox has partial text input from an input method.

While typing, an input method may rely on mouse or key events from the combo box to edit or submit parts of the text. This property can be used to determine when to disable event handlers that might interfere with the correct operation of the input method.

17. inputMethodHints: flags

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

The default is Qt.ImhNoPredictiveText. See: QML type: inputMethodHints property of TextEdit

18. model: model

The model that provides the data for the combo box.

ComboBox {
textRole: "key"
model: ListModel {
ListElement { key: "First"; value: 123 }
ListElement { key: "Second"; value: 456 }
ListElement { key: "Third"; value: 789 }
}
}

19. popup: Popup

pop up.

Popups can be manually opened or closed if necessary:

onSpecialEvent: comboBox.popup.close()

20. [read-only] pressed: bool

Whether the combobox button was physically pressed. Buttons can be pressed through touch or key events.

21. selectTextByMouse: bool

Is it possible to select the textfield of an editable ComboBox with the mouse. The default value is false.

22. textRole: string

The model role used to populate the combo box.

When a model has multiple roles, textRole can be set to determine which role should be displayed.

ApplicationWindow {
width: 640
height: 480
visible: true

QtObject {
id: backend
property int modifier
}

ComboBox {
textRole: "text"
valueRole: "value"
onActivated: backend. modifier = currentValue
Component.onCompleted: currentIndex = indexOfValue(backend.modifier)
model: [
{ value: Qt.NoModifier, text: qsTr("No modifier") },
{ value: Qt.ShiftModifier, text: qsTr("Shift") },
{ value: Qt.ControlModifier, text: qsTr("Control") }
]
}
}

23. Validator: Validator

Input text validator for editable combobox.

When a validator is set, the text field will only accept input that puts the text property in an intermediate state. Accept is signaled only if the text is acceptable when the Return or Enter key is pressed.

Currently supported validators are IntValidator, DoubleValidator, and RegularExpressionValidator. The following shows an example of using a validator that allows integers between 0 and 10 to be entered in a text field:

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

24. valueRole: string

A model role that stores the values associated with each item in the model.

3. Signal member

1. void accepted()

This signal is emitted when the Return or Enter key is pressed on an editable combo box.

This signal can be handled to add newly entered items to the model, for example:

ComboBox {
editable: true
model: ListModel {
id: model
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
onAccepted: {
if (find(editText) === -1)
model.append({text: editText})
}
}

Before emitting the signal, a check is made to see if the string exists in the model. If it is, then currentIndex will be set to its index, and currentText will be set to the string itself.

After the signal is emitted, if the first check fails (i.e. the item does not exist), another check is made to see if the item was added by the signal handler. If yes, currentIndex and currentText are updated accordingly. Otherwise, they are set to -1 and “” respectively.

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

2. void activated(int index)

This signal is emitted when the user activates the item at index.

Activated when an item is selected while the popup is open, causing the popup to close (and currentIndex to change), or when the popup is closed and the combobox is navigated by keyboard, causing currentIndex to change. The currentIndex property is set to index.

3. void highlighted(int index)

This signal is emitted when the user highlights the item at index in the popup list.

The highlighted signal is only emitted when the popup is open and the item is highlighted, but not necessarily activated (activated()).

4. Member functions

1. void decrementCurrentIndex()

Decrements the current index of the combo box or the highlighted index if the popup list is visible.

void incrementCurrentIndex()

Increments the current index of the combo box or the highlighted index if the popup list is visible.

2. int find(string text, enumeration flags)

Returns the index of the specified text, or -1 if no match is found.

The way the search is performed is defined by the specified match flags. By default, combo boxes perform case-sensitive exact matching (Qt.MatchExactly). All other match types are case-insensitive unless the Qt.MatchCaseSensitive flag is specified.

• Qt.MatchExactly: Search term matches exactly (default).
• Qt.MatchRegularExpression: The search term is matched as a regular expression.
• Qt.MatchWildcard: Search term matching using wildcards.
• Qt.MatchFixedString: The search term is matched as a fixed string.
• Qt.MatchStartsWith: The search term matches the beginning of the item.
• Qt.MatchEndsWidth: The end of the search term matching item.
• Qt.MatchContains: The search term is contained in items.
• Qt.MatchCaseSensitive: The search is case-sensitive.

This function can only be used after the ComboBox has issued Component.completed().

ComboBox {
model: ListModel {
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
Component.onCompleted: currentIndex = find("Coconut")
}

3. int indexOfValue(object value)

Returns the index of the specified value, or -1 if no match is found.

This function can only be used after the ComboBox has issued Component.completed().

4. void selectAll()

Selects all text in the editable text field of the combo box.

5. string textAt(int index)

Returns the text at the specified index, or an empty string if the index is out of range.

This function can only be used after the ComboBox has issued Component.completed().

ComboBox {
model: ListModel {
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
onActivated: (index) => { print(textAt(index)) }
}

5. Custom ComboBox Example

import QtQuick
import QtQuick. Controls

Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")

ComboBox {
id: control
model: ["First", "Second", "Third"]

delegate: ItemDelegate {
width: control.width
contentItem: Text {
text: modelData
color: "#21be2b"
font: control.font
elide: Text. ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: control.highlightedIndex === index

required property int index
required property var modelData
}

indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: 12
height: 8
contextType: "2d"

Connections {
target: control
function onPressedChanged() { canvas. requestPaint(); }
}

onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context. closePath();
context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
context. fill();
}
}

contentItem: Text {
leftPadding: 0
rightPadding: control.indicator.width + control.spacing

text: control.displayText
font: control.font
color: control.pressed ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
elide: Text. ElideRight
}

background: Rectangle {
implicitWidth: 120
implicitHeight: 40
border.color: control.pressed ? "#17a81a" : "#21be2b"
border.width: control.visualFocus? 2 : 1
radius: 2
}

popup: Popup {
y: control. height - 1
width: control.width
implicitHeight: contentItem.implicitHeight
padding: 1

contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex

ScrollIndicator. vertical: ScrollIndicator { }
}

background: Rectangle {
border.color: "#21be2b"
radius: 2
}
}
}
}

Welfare for this article,QT development learning package and technical video for fee, including (C++ language foundation, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project combat, QT embedded development, Quick module, etc.) strong>