如何在 QML 的自定义 ComboBox 中突出显示所选项目？

Question

这是代码：

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

这导致：

如您所见，第一项后面显示了白色的东西。 这似乎是亮点。

我希望所选项目的矩形颜色在突出显示时改变。 如何做到这一点？

Answer 1

您的 Combobox 至少有两个问题。

1. 您正在设置ListView的height ，而不是它的implicitHeight 。 您应该使用implicitHeight ，如下所示：

            contentItem: ListView {
                implicitHeight: contentHeight

                ...
            }

2. 另一个问题是您的 ItemDelegate 使用的是默认background 。 这里的一种选择是将背景更改为空Item ，然后根据highlighted的 state 切换contentItem的颜色：

    delegate: ItemDelegate {
        width: control.width
        height: control.height

        contentItem: Rectangle
        {
            color: highlighted ? "red" : decoration.colour_666b78

            ...
        }

        background: Item {}

        highlighted: control.highlightedIndex === index
    }