[Interest] A question about QtQuick.Control 2.0 ComboBox customisation

[J-P Nurmi]

The documentation for ComboBox::popup seems rather scarce, so I've added a related note to https://bugreports.qt.io/browse/QTBUG-55904.

- http://doc.qt.io/qt-5/qml-qtquick-controls2-combobox.html#popup-prop
- http://doc.qt.io/qt-5/qml-qtquick-controls2-popup.html

--
J-P Nurmi

________________________________________
From: Nuno Santos <nunosantos at imaginando.pt>
Sent: Wednesday, September 28, 2016 00:17
To: J-P Nurmi
Cc: Qt Project
Subject: Re: [Interest] A question about QtQuick.Control 2.0 ComboBox customisation

Thanks so much for this tip!! I would never get there. I couldn’t find documentation for popup. Where is it defined?

Best regards,

Nuno

On 27 Sep 2016, at 17:22, J-P Nurmi <jpnurmi at qt.io<mailto:jpnurmi at qt.io>> wrote:

On 27 Sep 2016, at 17:40, Nuno Santos <nunosantos at imaginando.pt<mailto:nunosantos at imaginando.pt>> wrote:

Hi,

I’m customising a QtQuick.Control 2.0 ComboBox and I’m facing myself with the following problem:

I don’t know how to close the ComboBox when using a another element than ItemDelegate. The customisation page says the following:

http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox

delegate: ItemDelegate {
    width: control.width
    text: modelData
    font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
    highlighted: control.highlightedIndex == index
}

But I need to use a rectangle in order to have a different background color of the combobox drop down, so I’m doing the following:

delegate: Rectangle {
    width: control.width
    height: label.paintedHeight+10
    color: controller.settings.baseColor

    Text {
        id: label
        anchors.fill: parent
        anchors.margins: 10
        text: modelData
        font.family: opensans.name
        font.pixelSize: 14
        verticalAlignment: Text.AlignVCenter
        color: control.highlightedIndex==index?controller.settings.highlightColor:"white"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            control.currentIndex=index
        }
    }
}

But now, how do I close the combo box? Any ideas?


Hi,

The most straight-forward way is to add “control.popup.close()” in the existing MouseArea onClicked handler. Alternatively, switch to AbstractButton and kill the MouseArea altogether:


        delegate: AbstractButton {

            width: control.width

            height: label.paintedHeight+10

            padding: 10

            background: Rectangle {

                color: controller.settings.baseColor

            }

            contentItem: Text {

                id: label

                // ...

            }

        }


--
J-P Nurmi

_______________________________________________
Interest mailing list
Interest at qt-project.org<mailto:Interest at qt-project.org>
http://lists.qt-project.org/mailman/listinfo/interest