如何在 QML 的自定义 ComboBox 中突出显示所选项目?
How to highlight selected item in a custom ComboBox of QML?
这是代码:
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0
ComboBox
{
id: control
property string text_color
property string backcolor
property int font_size
property string font_family: decoration.font_family
model: ["ABCD", "XYZQ"]
delegate: ItemDelegate {
width: control.width
height:control.height
Rectangle
{
height: control.height; width: control.width; border.width: 1; color: decoration.colour_666b78
radius: 4
border.color: decoration.colour_24232f
Text {
opacity: 0.70
text: modelData
color: control.text_color
font.family: control.font_family
font.pointSize: control.font_size
anchors.centerIn: parent
}
}
highlighted: control.highlightedIndex === index
}
indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: decoration.getWidth( 12)
height: decoration.getHeight( 8)
contextType: "2d"
Connections {
target: control
function onPressedChanged() { canvas.requestPaint(); }
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = control.pressed ? "white":"white"
context.fill();
}
}
contentItem: Text
{
leftPadding: decoration.getWidth( 10)
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font.family: control.font_family
font.pointSize: control.font_size
color: control.pressed ? "#bdbdbe" : "#bdbdbe"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
width: control.width
height: control.height
color: decoration.colour_292a38
border.color: decoration.colour_23232f
border.width: decoration.button_border_width
radius: decoration.box_radius
}
popup:
Popup
{
y: control.height - 1
width: control.width
implicitHeight: contentItem.implicitHeight
padding: decoration.getWidth( 1)
contentItem: ListView {
clip: true
height: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
color: control.backcolor
border.color: decoration.colour_69697c
radius: decoration.box_radius
}
}
}
这导致:
如您所见,第一项后面显示了一些白色的东西。这似乎是亮点。
我希望所选项目的矩形颜色在突出显示时发生变化。如何实现?
您的 Combobox 至少有两个问题。
- 您正在设置
ListView
的 height
而不是 implicitHeight
。你应该使用 implicitHeight
,像这样:
contentItem: ListView {
implicitHeight: contentHeight
...
}
- 另一个问题是您的 ItemDelegate 使用默认
background
。这里的一个选择是将背景更改为空白 Item
,然后根据 highlighted
状态切换 contentItem
的颜色:
delegate: ItemDelegate {
width: control.width
height: control.height
contentItem: Rectangle
{
color: highlighted ? "red" : decoration.colour_666b78
...
}
background: Item {}
highlighted: control.highlightedIndex === index
}
这是代码:
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0
ComboBox
{
id: control
property string text_color
property string backcolor
property int font_size
property string font_family: decoration.font_family
model: ["ABCD", "XYZQ"]
delegate: ItemDelegate {
width: control.width
height:control.height
Rectangle
{
height: control.height; width: control.width; border.width: 1; color: decoration.colour_666b78
radius: 4
border.color: decoration.colour_24232f
Text {
opacity: 0.70
text: modelData
color: control.text_color
font.family: control.font_family
font.pointSize: control.font_size
anchors.centerIn: parent
}
}
highlighted: control.highlightedIndex === index
}
indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: decoration.getWidth( 12)
height: decoration.getHeight( 8)
contextType: "2d"
Connections {
target: control
function onPressedChanged() { canvas.requestPaint(); }
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = control.pressed ? "white":"white"
context.fill();
}
}
contentItem: Text
{
leftPadding: decoration.getWidth( 10)
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font.family: control.font_family
font.pointSize: control.font_size
color: control.pressed ? "#bdbdbe" : "#bdbdbe"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
width: control.width
height: control.height
color: decoration.colour_292a38
border.color: decoration.colour_23232f
border.width: decoration.button_border_width
radius: decoration.box_radius
}
popup:
Popup
{
y: control.height - 1
width: control.width
implicitHeight: contentItem.implicitHeight
padding: decoration.getWidth( 1)
contentItem: ListView {
clip: true
height: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
color: control.backcolor
border.color: decoration.colour_69697c
radius: decoration.box_radius
}
}
}
这导致:
如您所见,第一项后面显示了一些白色的东西。这似乎是亮点。
我希望所选项目的矩形颜色在突出显示时发生变化。如何实现?
您的 Combobox 至少有两个问题。
- 您正在设置
ListView
的height
而不是implicitHeight
。你应该使用implicitHeight
,像这样:
contentItem: ListView {
implicitHeight: contentHeight
...
}
- 另一个问题是您的 ItemDelegate 使用默认
background
。这里的一个选择是将背景更改为空白Item
,然后根据highlighted
状态切换contentItem
的颜色:
delegate: ItemDelegate {
width: control.width
height: control.height
contentItem: Rectangle
{
color: highlighted ? "red" : decoration.colour_666b78
...
}
background: Item {}
highlighted: control.highlightedIndex === index
}