QML Quick Controls 2 Combobox change color of each item on the dropdown list

Markus Ippy

I am trying to make a very limited color picker with some predfined colors .
I would like to show the user the actual color when they click on the dropdown button .
Is there a way to color each line of the drop down indivudally with the color in the model ?

   ComboBox {
    id: usercolor
    x: 600
    y: 0
    width: 200
    height: 50
    model:["aliceblue","antiquewhite","aqua","aquamarine","azure"]
    visible: true
}

sierdzio

Use the delegate property.

Shrinidhi Upadhyaya

Hi @Markus-Ippy , you can use the delegate property.

Here is the sample code:-

 ListModel {
        id: colorModel

        ListElement {
            itemColor: "aliceblue"
        }

        ListElement {
            itemColor: "antiquewhite"
        }

        ListElement {
            itemColor: "aqua"
        }

        ListElement {
            itemColor: "aquamarine"
        }

        ListElement {
            itemColor: "azure"
        }
    }

    ComboBox {
        id: control
        height: 50
        width: 200
        model: colorModel

        delegate: Rectangle {
            width: control.width
            height: 100
            color:  itemColor

            Text {
                text: itemColor
                anchors.centerIn: parent
            }
        }
    }

Markus Ippy

@Shrinidhi-Upadhyaya
Thank you that was exactly what i was after