How can I change the color of the text inside the ComboBox, please help. I tried the following but it says "Invalid property name 'style' " and I get the error "ComboBoxStyle is not a type".

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"
                    }


                                }

CodePudding user response：

You're referring to an option of Qt Controls 1 which are deprecated and you sould use that and most likely you're correctly using the Qt Controls 2

Controls are "rich" component but they are just a composition of Item, Rectangles and whatever. Controls expose an ItemDelegate to customize their layout.

When you want to customize a default Control (instead of building one from scratch) you should refer to this page of the documentation:

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

Since you just want to customize the text color, defining the delegate property should be enough:

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

if you want to change ComboBox text color to change with a property binding, you could expose the property accordingly:

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

CodePudding user response：

@Moia's answer is right in that you usually need to provide your own implementation, but in some cases there are easier, less intrusive ways to customise stuff. For example, the Material style has attached style properties that can be set:

ComboBox {
    model: 10

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

I set each property to a different colour so you can see which items are affected.