在 QML 中更改 ComboBox 中文本的颜色答案

【问题标题】：Change color of text in ComboBox in QML在 QML 中更改 ComboBox 中文本的颜色
【发布时间】：2022-08-19 11:14:41
【问题描述】：

如何更改 ComboBox 内文本的颜色，请帮助。我尝试了以下方法，但它显示“无效的属性名称\'style\'\”，我收到错误“ComboBoxStyle 不是类型\”。

ComboBox {
                id:combobox_rectangle_ha_tipi_deger
                width: parent.width/1.8
                height: parent.height/1.3
                Material.background: row_even
                anchors.centerIn: parent
                model: [\"değer1\", \"değer2\", \"değer3\"]
                style:ComboBoxStyle{
                     textColor:\"red\"
                    }


                                }

标签： qt qml

【解决方案1】：

您指的是已弃用的 Qt Controls 1 选项，您应该使用它，并且很可能您正确使用 Qt Controls 2

控件是“丰富”的组件，但它们只是项目、矩形等的组合。控件公开一个 ItemDelegate 以自定义其布局。

当你想自定义一个默认控件（而不是从头开始构建一个）时，你应该参考文档的这个页面：

https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customizing-combobox

import QtQuick
import QtQuick.Controls

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

        required property int index
        required property var modelData
    }

    indicator: Canvas {
        id: canvas
        x: control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2
        width: 12
        height: 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 ? "#17a81a" : "#21be2b";
            context.fill();
        }
    }

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

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

由于您只想自定义文本颜色，因此定义 delegate property 就足够了：

ComboBox {
    id: control

    delegate: ItemDelegate {
        width: control.width
        contentItem: Text {
            text: modelData
            color: "red"
            font: control.font
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }
        highlighted: control.highlightedIndex === index

        required property int index
        required property var modelData
    }
}

如果要更改 ComboBox 文本颜色以使用属性绑定进行更改，则可以相应地公开该属性：

ComboBox {
    id: control
    property var textColor: "red"

    delegate: ItemDelegate {
        width: control.width
        contentItem: Text {
            text: modelData
            color: control.textColor
            font: control.font
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }
        highlighted: control.highlightedIndex === index

        required property int index
        required property var modelData
    }
}

【讨论】：

【解决方案2】：

@Moia 的答案是正确的，但是对于 Material 样式有一种更简单的方法，因为它附加了样式属性：

ComboBox {
    model: 10

    popup.Material.foreground: "red"
    Material.accent: "green"
    Material.foreground: "blue"
}

我将每个属性设置为不同的颜色，以便您查看哪些项目受到影响。

【讨论】：