QtQuick.Controls 2.2 中的 QML 组合框样式问题

Posted 2023-02-16

【中文标题】QtQuick.Controls 2.2 中的 QML 组合框样式问题

【英文标题】：QML combobox styling issue in QtQuick.Controls 2.2

【发布时间】：2017-07-21 04:53:05

【问题描述】：

我是初学者。我正在尝试使用组合框来填充元素列表，但是当我尝试设置样式时，在显示文本时出现了一些问题。 代码如下：

import QtQuick 2.7
import QtQuick.Controls 2.2

Item 
    property string btntext : "First"
    signal dropDownIndexChanged(int index)

    id: mainDropDown
    ListModel
        id: modelList
        ListElement text: "First" 
        ListElement text: "Second" 
        ListElement text: "Third" 
    

    ComboBox 
        id: comboButton
        width: parent.width
        height: parent.height
        model:modelList
        currentIndex: 0
        editText : btntext

        Image 
            id: imageMainButton
            x: 119
            anchors.top: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 9
            anchors.topMargin: -7
            fillMode: Image.Tile
            sourceSize.height: 25
            sourceSize.width: 25
            source: "<some image>"
        
        delegate: ItemDelegate 
            id:itemDelegate
            width: comboButton.width

            background:Rectangle
                gradient: Gradient 
                    GradientStop 
                        position: 0.0
                        color: itemDelegate.down ? "white" : "blue"
                    
                    GradientStop 
                        position: 1.0
                        color: itemDelegate.down ? "yellow" : "orange"
                    
                
            

            contentItem: Text 
                text: modelData
                elide: Text.ElideRight

                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 11
                font.family: "Arial"
                color:  itemDelegate.down ? "black" : "white"
            
            highlighted: comboButton.highlightedIndex === index

        

        indicator: Canvas 
        



        //When this is added combo box text disapears or will be empty until something else is selected from the dropdown.
        contentItem: Text 
            text: comboButton.displayText
            anchors.centerIn: parent

            //font: comboButton.font
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight

            renderType: Text.NativeRendering
            anchors.left : parent.left
            anchors.leftMargin: 10
            font.family: "Verdena"
            font.pointSize: 12
            font.bold: true
            color: "white"
        


        background: Rectangle 
            implicitWidth: 120
            implicitHeight: 40
            radius: 2

            color : "white"
            //height:100
            smooth: true
            //border.width: 1
            border.color: "white"


        

        popup: Popup 
            y: comboButton.height
            width: comboButton.width -5
            //implicitHeight: contentItem.implicitHeight -1
            padding: 1

            background: Rectangle 
                border.color: "black"
                radius: 2
                color : "white"
            

            contentItem: ListView 
                //clip: true
                implicitHeight: contentHeight
                model: comboButton.popup.visible ? comboButton.delegateModel : null
                currentIndex: comboButton.highlightedIndex
                interactive: false

            
        

        onCurrentIndexChanged:
        
            btntext = mainDropDown.get(currentIndex).text
            dropDownIndexChanged(currentIndex)
            console.log(btntext ,currentIndex)
        
    

1) 如上所述，为什么在我从下拉列表中选择一个项目之前不显示组合框文本？

2) 所选索引/项目根本没有突出显示。

【参考方案1】：

1) 如上所述，为什么在我从下拉列表中选择一个项目之前不显示组合框文本？

这是因为您的背景矩形颜色是“白色”，与您的文本颜色相同（“白色”是默认颜色）。

2) 所选索引/项目根本没有突出显示。

这是因为在 delegate (id: itemDelegate) 内部，您正在根据 itemDelegate.down 条件更改颜色。将其更改为 itemDelegate.highlighted。

【讨论】：

还有一个问题：我已将 popup:contentitem:ListView interactive 属性设置为 false ，因为在弹出窗口中无法正确显示边框.你能建议如何解决这个问题吗？

你能附上你上面描述的问题的截图吗？

itemDelegate width 应与 Listview 的 width 相同，定义为 popup 的 contentItem，而不是 comboButton.width