Customizing ComboBox



  • I'm using the Customizing ComboBox example found here and modifying it to fit my style: https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-combobox

    I've changed the color of the background and popup background as well as the radius of each. However, I can't figure out what property I need to modify for the background of the selected item. It seems to use the default radius and a very light shade of gray for the background, which fails to provide good contrast with my pure white letters. Can anyone shed some light?



  • @kgregory You can replace the delegate with a fully customized one. For example, open qml/QtQuick/Controls.2/ComboBox.qml from your Qt binaries folder. You can see that in the Default style the delegate is ItemDelegate. It might be different type in other styles. Open ItemDelegate.qml. Now you can see how it is customized in the Default style, how it is customized in Default style ComboBox and how you can customize it further.


  • Moderators

    @kgregory
    you might use :

    ComboBox {
    background: Rectangle {
               color : "yellow"
           }
    }
    

    This overrides the background with a rectangle, where we set the color.
    It is explained in the link you provided us. There are several solutions there. Dependent on your use case you can pick one.

    Eddy



  • Oh yes, from what Eddy said I noticed you could mean the non-opened combobox background, not the selected item in the opened popup. But my advice of looking into the default implementations works for that, too.



  • This much I think I understand. I found the default code as Eeli recommended, but I still don't see how to change what I want.

    It seems to be the "highlighted" property. I don't see where to specify what that property does visually.

    I've redefined the popup background as follows. That seems to work correctely except for the highlighted item's background has radius 0 and is a light-gray color. I don't see how to modify that.

    background: Rectangle {
                        border.color: "#FFFFFF"
                        color: "#A0000000"
                        radius: 30
                    }
    


  • Hope this works:

    QComboBox QAbstractItemView
     {
        border: 2px solid Blue;
        selection-background-color:red;
        background-color: white;
    }
    


  • @kgregory Can you paste here your whole customized ComboBox file and also external customized component files (like MyItemDelegate.qml) if it uses them?



  • @kgregory If I interpret you correctly you would want to change the ComboBox delegate's background. It's in the ItemDelegate:

    background: Rectangle {
           implicitWidth: 100
           implicitHeight: 40
           visible: control.down || control.highlighted || control.visualFocus
           color: control.visualFocus
               ? (control.pressed ? Default.focusPressedColor : Default.delegateFocusColor)
               : (control.down ? Default.delegatePressedColor : Default.delegateColor)
    }
    

    It's visible only in selected or clicked item and the color is changed depending on the conditions you can see in the "color" property. When it's not visible, only the popup background is visible behind the text. Just change the color and set "radius: 30" or whatever you like. The component structure is:

    ComboBox {
        delegate: ItemDelegate {
            background: Rectangle {
                //customizations here
            }
        }
    }
    


  • @Eeli-K I tried that, but it seems to have overrided my background for all of the options (both highlighted & non-highlighted). Here is my entire combo box code:

    ComboBox{
            id: styleSelector
            width: 0.8*parent.width
            height: 0.05*parent.height
            anchors.top: nameBlock.bottom
            anchors.topMargin: .05*parent.width
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: .025*parent.height
            currentIndex: (snack.showSelection.showStyle-1)
            onCurrentIndexChanged: {
                snack.showSelection.showStyle=(currentIndex+1);
            }
            model: ["Popcorn","Candy"]
            delegate: ItemDelegate {
                    width: styleSelector.width
                    contentItem: Text {
                        text: modelData
                        color: "#FFFFFF"
                        font: parent.font
                        elide: Text.ElideRight
                        verticalAlignment: Text.AlignVCenter
                    }
                    background: Rectangle {
                        implicitWidth: parent.width
                        implicitHeight: parent.height
                        color: "#A0A0A0A0"
                        border.color: "#FFFFFF"
                        border.width: 2
                        radius: 30
                    }
                    highlighted: styleSelector.highlightedIndex === index
                }
            background: Rectangle {
                    implicitWidth: parent.width
                    implicitHeight: parent.height
                    color: "#A0000000"
                    border.color: styleSelector.pressed ? "#C0C0C0" : "#FFFFFF"
                    border.width: styleSelector.visualFocus ? 2 : 1
                    radius: 30
                }
            contentItem: Text {
                    leftPadding: 0
                    rightPadding: parent.indicator.width + parent.spacing
    
                    text: parent.displayText
                    font: parent.font
                    color: parent.pressed ? "#C0C0C0" : "#FFFFFF"
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }
            popup: Popup {
                    y: parent.height - 1
                    width: parent.width
                    implicitHeight: contentItem.implicitHeight
                    padding: 1
    
                    contentItem: ListView {
                        clip: true
                        implicitHeight: contentHeight
                        model: styleSelector.popup.visible ? styleSelector.delegateModel : null
                        currentIndex: styleSelector.highlightedIndex
                        ScrollIndicator.vertical: ScrollIndicator { }
                    }
    
                    background: Rectangle {
                        border.color: "#FFFFFF"
                        color: "#A0000000"
                        radius: 30
                    }
                }
        }
    


  • @kgregory Pay attention to the visibility property and what I said about it. You can copy it from the Default theme. The problem will be solved.


Log in to reply
 

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