I'm using the example from QML website on how to customize ComboBox as seen below:

#Combo.qml

import QtQuick 2.12
import QtQuick.Controls 2.12

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
    }

    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
            // ADDED SECTION TO CHANGE BACKGROUND OF LISTVIEW
            delegate: Rectangle {
                color: "#080808"
                Text {
                    anchors.fill: parent
                    text: modelData
                }
             }
             ///////////////////////////////////////////////////

            ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            color: "#080808"
            radius: 2
        }
    }
}

#main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

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


    Combo {
        width: 200
        height: 40
        anchors.centerIn: parent
    }
}

I added some new code to Combo.qml as seen above to turn the background of the ListView items to a darker color to match the background color of the Popup itself, but nothing is changing. The ListView background color for the items is always white. I'd appreciate some help on figuring this out. Thanks

CodePudding user response：

There are two issues going on. First, the delegate: on the ComboBox apparently takes precedence over the delegate: on the ListView. Second, the ItemDelegate has some pretty specific highlighting behavior so you need to override it's background and the coloring behavior of it like this:

import QtQuick 2.12
import QtQuick.Controls 2.12

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

    delegate: ItemDelegate {
        id: itemDelegate
        width: control.width
        background: Rectangle {
            visible: itemDelegate.down || itemDelegate.highlighted || itemDelegate.visualFocus
            color: itemDelegate.highlighted ? "#808080" : "#080808"
            implicitWidth: 100
            implicitHeight: 40
        }

        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
            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
            // ADDED SECTION TO CHANGE BACKGROUND OF LISTVIEW
//            delegate: Rectangle {
//                width: parent.width
//                height: 40
//                color: "#080808"
//                Text {
//                    anchors.fill: parent
//                    text: modelData
//                }
//             }
             ///////////////////////////////////////////////////

            ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            color: "#080808"
            radius: 2
        }
    }

}