Quick controls 2 ComboBox doesn't show the popup with the delegate
Solved
QML and Qt Quick
-
Hi Devs, I have tried to use a ComboBox with a model. On Desktop all works fine, but on ios (Iphone 7)
the popup with the delegates are not show up.import QtQuick 2.9 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 import QtQuick.Controls.Material 2.2 ApplicationWindow { visible: true width: 640 height: 480 title: qsTr("Example") Flickable { id: flickable anchors.fill: parent contentHeight: root.implicitHeight boundsBehavior: Flickable.OvershootBounds Pane { id: root anchors.fill: parent ColumnLayout { anchors.right: parent.right anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter Label { anchors { left: parent.left; right: parent.right } topPadding: 10 bottomPadding: 10 font.pixelSize: 20 horizontalAlignment: Qt.AlignHCenter text: qsTr("Example") } ComboBox { textRole: "key" model: ListModel { ListElement { key: "First"; value: 123 } ListElement { key: "Second"; value: 456 } ListElement { key: "Third"; value: 789 } } } } } } }
Have anyone the same problem?
I use Qt 5.9.1 and QuickControls 2.2
-
@Manu19 Hi, you can use this.
Customizing ComboBox
ComboBox consists of background, content item, popup, and delegate.
import QtQuick 2.6
import QtQuick.Controls 2.1ComboBox {
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 } 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 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" horizontalAlignment: Text.AlignLeft 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: listview.contentHeight padding: 1 contentItem: ListView { id: listview clip: true model: control.popup.visible ? control.delegateModel : null currentIndex: control.highlightedIndex ScrollIndicator.vertical: ScrollIndicator { } } background: Rectangle { border.color: "#21be2b" radius: 2 } }
}
-
It has been fixed in Qt 5.9.2. Here's the bug report: https://bugreports.qt.io/browse/QTBUG-61935 (including a workaround in the comment section).