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

Question

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

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) 如上所述，为什么直到我从下拉列表中 select 一个项目才显示组合框文本？

2) selected index/item 根本没有突出显示。

Answer 1

1) As mentioned above why does combobox text is not displayed until I select an item from the drop down?

这是因为您的背景矩形颜色是 "White"，与文本颜色相同（"white" 是默认颜色）。

2) The selected index/item is not highlighted at all.

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

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

QML combobox styling issue in QtQuick.Controls 2.2

qt

qml

qtquickcontrols

qtquickcontrols2