javascript - 如何在 QML 的自定义 ComboBox 中突出显示所选项目?
问题描述
这是代码:
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 至少有两个问题。
- 您正在设置
height
of yourListView
而不是 itsimplicitHeight
。你应该使用implicitHeight
,像这样:
contentItem: ListView {
implicitHeight: contentHeight
...
}
- 另一个问题是您的 ItemDelegate 使用的是默认值
background
。这里的一个选择是将背景更改为空Item
,然后contentItem
根据highlighted
状态切换您的颜色:
delegate: ItemDelegate {
width: control.width
height: control.height
contentItem: Rectangle
{
color: highlighted ? "red" : decoration.colour_666b78
...
}
background: Item {}
highlighted: control.highlightedIndex === index
}
推荐阅读
- django - 带有 GET 请求的 Django DeleteView
- python - python树数据结构的打印问题
- xaml - .cs 文件不在 .xaml 文件下
- ubuntu - 在不同的基于 linux 的操作系统中构建
- dart - 从 dartlang 中的字符串创建类实例
- tensorflow.js - Model.Classify() 给出 GL_INVALID_OPERATION: Object cannot be used because it has not been generated
- java - 在java中嵌套XML标签时面临问题
- pymc3 - 在 Anaconda 3 / Win 上安装 PyMC3
- redmine - Redmine 中的 Backlogs 插件出现错误
- ios - iOS侧载expo应用水平翻转