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

Posted 2023-02-16

【中文标题】如何在 QML 的自定义 ComboBox 中突出显示所选项目？

【英文标题】：How to highlight selected item in a custom ComboBox of QML?

【发布时间】：2020-12-15 14:00:48

【问题描述】：

这是代码：

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
            
        

这会导致：

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

我希望所选项目的矩形颜色在突出显示时改变。如何实现？

【问题讨论】：

我已经测试过类似的没有矩形的只有 ItemDelegate 中的文本，它会在选择时突出显示。也许它不能覆盖你的矩形，因为它是颜色项。

【参考方案1】：

您的 Combobox 至少有两个问题。

您正在设置height 的ListView 而不是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