我正在使用QML网站中关于如何自定义ComboBox的示例,如下所示:
#Combo.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
ComboBox {
id: control
model: ["First", "Second", "Third"]
delegate: ItemDelegate {
width: control.width
contentItem: Text {
text: modelData
color: "#21be2b"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: control.highlightedIndex === index
}
indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: 12
height: 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 ? "#17a81a" : "#21be2b";
context.fill();
}
}
contentItem: Text {
leftPadding: 0
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font: control.font
color: control.pressed ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
border.color: control.pressed ? "#17a81a" : "#21be2b"
border.width: control.visualFocus ? 2 : 1
radius: 2
}
popup: Popup {
y: control.height - 1
width: control.width
implicitHeight: contentItem.implicitHeight
padding: 1
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
// ADDED SECTION TO CHANGE BACKGROUND OF LISTVIEW
delegate: Rectangle {
color: "#080808"
Text {
anchors.fill: parent
text: modelData
}
}
///////////////////////////////////////////////////
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
color: "#080808"
radius: 2
}
}
}#main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Combo {
width: 200
height: 40
anchors.centerIn: parent
}
}我向Combo.qml添加了一些新代码,如上面所示,将ListView项的背景颜色转换为更深的颜色,以与Popup本身的背景色相匹配,但是没有什么变化。项目的ListView背景色总是白色的。我很感激你能帮我弄清楚这件事。谢谢
发布于 2022-01-04 20:55:25
有两个问题正在进行中。首先,ComboBox上的委托:显然优先于ListView上的委托:。其次,ItemDelegate有一些非常特殊的突出显示行为,因此您需要覆盖它的背景和着色行为,如下所示:
import QtQuick 2.12
import QtQuick.Controls 2.12
ComboBox {
id: control
model: ["First", "Second", "Third"]
delegate: ItemDelegate {
id: itemDelegate
width: control.width
background: Rectangle {
visible: itemDelegate.down || itemDelegate.highlighted || itemDelegate.visualFocus
color: itemDelegate.highlighted ? "#808080" : "#080808"
implicitWidth: 100
implicitHeight: 40
}
contentItem: Text {
text: modelData
color: "#21be2b"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: control.highlightedIndex === index
}
indicator: Canvas {
id: canvas
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: 12
height: 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 ? "#17a81a" : "#21be2b";
context.fill();
}
}
contentItem: Text {
leftPadding: 0
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font: control.font
color: control.pressed ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
border.color: control.pressed ? "#17a81a" : "#21be2b"
border.width: control.visualFocus ? 2 : 1
radius: 2
}
popup: Popup {
y: control.height - 1
width: control.width
implicitHeight: contentItem.implicitHeight
padding: 1
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
// ADDED SECTION TO CHANGE BACKGROUND OF LISTVIEW
// delegate: Rectangle {
// width: parent.width
// height: 40
// color: "#080808"
// Text {
// anchors.fill: parent
// text: modelData
// }
// }
///////////////////////////////////////////////////
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
color: "#080808"
radius: 2
}
}
}https://stackoverflow.com/questions/70584348
复制相似问题