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.
-
@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
-
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 }
-
@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 } } }