Unsolved 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" } }