Customizing ComboBox



  • Hi guys, I want to customize my ComboBox. I want to highlight (let's say blue) the item when pressed and leave the previously clicked item highlighted (let's say, lighter blue). I mean, I want the ComboBox to work as usually, but with different highlighting colours. I tried to use
    Customizing ComboBox, but it changes colours of delegates permanently and the highlighting effect dissapears. Here's my code:

    ComboBox {
        id: control
        property color color: "green"
        property int universalFontSize: height/3
        model: usersModel
    
        delegate: ItemDelegate {
            width: control.width
            text: modelData
            font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
            highlighted: control.highlightedIndex == index
            }
    
    
        indicator: Canvas {
            x: control.width - width - control.rightPadding
            y: control.topPadding + (control.availableHeight - height) / 2
            width: 12
            height: 8
            contextType: "2d"
    
            Connections {
                target: control
                onPressedChanged: indicator.requestPaint()
            }
    
            onPaint: {
                context.reset();
                context.moveTo(0, 0);
                context.lineTo(width, 0);
                context.lineTo(width / 2, height);
                context.closePath();
                context.fillStyle = root.color
                context.fill();
            }
        }
    
        contentItem: Text {
            leftPadding: 0
            rightPadding: control.indicator.width + control.spacing
            font.pixelSize: universalFontSize
            text: control.displayText
            color: root.color
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }
    
        background: Rectangle {
            implicitWidth: 120
            implicitHeight: 40
            border.color: root.color
            border.width: 1
        }
    }
    

    Thank you in advance:)



  • Is this what you're after?

    delegate: ItemDelegate {
        id: delegate
        width: control.width
        text: modelData
        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
        highlighted: control.highlightedIndex == index
        background: Rectangle {
            color: delegate.down ? "steelblue" : delegate.highlighted ? "lightsteelblue" : "white"
        }
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.