问题

我正在尝试自定义一个用于自定义应用程序的ComboBox，但我无法确定在哪里需要进行更改以影响“高亮”矩形的颜色和半径。到目前为止，我已经参考了这个链接来自定义组件。然而，在这段代码中，我找不到与ComboBox弹出窗口中当前选定/悬停选项的高亮矩形对应的内容。

我的ComboBox组件基本上与上面示例中的代码相同，但以下是它的代码：

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
    }

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

    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

            ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            border.color: "#21be2b"
            radius: 12
        }
    }
}

请注意，上面的代码中，颜色和半径都已经设置好了。如果你想要更改“高亮”矩形的颜色和半径，可以修改background部分的border.color和radius属性。

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
    }

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

    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

            ScrollIndicator.vertical: ScrollIndicator { }
        }

        background: Rectangle {
            border.color: "#21be2b"
            radius: 12
        }
    }
}

答案1

得分: 0

为了在突出显示上设置半径，您需要自定义 ItemDelegate 的 background 属性，如下所示：

ItemDelegate {
    id: itemDelegate
    contentItem: Text {
        text: modelData
        color: "#21be2b"
        font: control.font
        elide: Text.ElideRight
        verticalAlignment: Text.AlignVCenter
    }
    highlighted: control.highlightedIndex === index

    background: Rectangle {
        width: control.width
        radius: 12
        color: itemDelegate.highlighted ? "blue" : "red"
    }
}

<details>
<summary>英文:</summary>
In order to set a radius on the highlight you need to [customize][1] the `background` property of the `ItemDelegate` like so:

ItemDelegate {
id: itemDelegate
contentItem: Text {
text: modelData
color: "#21be2b"
font: control.font
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}
highlighted: control.highlightedIndex === index

background: Rectangle {
width: control.width
radius: 12
color: itemDelegate.highlighted ? "blue" : "red"
}

}

[1]: https://doc.qt.io/qt-6/qtquickcontrols-customize.html#customizing-itemdelegate
</details>