Change style property of QML element over event

Question

I have a component which displays a custom combo box:

    Column {
        anchors.top: parent.top
        anchors.topMargin: 200
        anchors.left: parent.left
        anchors.leftMargin: 30
        Rectangle {
            id: rectangle1
            signal comboClicked
            Column {
                id: column_button
                MenuButtonStyle {
                    id: buttonCombo
                    style: MyComboBoxButtonStyle {
                        label: ButtonTextStyle {
                            text: "Choose"
                        }
                    }
                }
            }
            Column {
                id: column1
                anchors.left: column_button.right
                anchors.leftMargin: -25
                anchors.top: parent.top
                anchors.topMargin: 3
                Image {
                    id: image1
                    width: 16
                    source: "arrow_down.png"
                }
            }                
            Keys.onReturnPressed: {
                rectangle1.state = rectangle1.state==="dropDown"?"":"dropDown"
                console.log("Open Drop Down..")
            }

            states: State {
                  name: "dropDown";
                  PropertyChanges { target: buttonCombo; style: MyButtonStyle }
            }

        }
    }

The goal is to change the style property in "MenuButtonStyle" module.

I tried it with the line

PropertyChanges { target: buttonCombo; style: MyButtonStyle }

but it gives me the error:

file:///D:/projekte/qt_quick/FirstTest/MainPane.qml:82: ReferenceError: MyButtonStyle is not defined

If I replace the "MyComboBoxButtonStyle" directly with "MyButtonStyle" QT did not complain over a not defined reference.

What is the problem? Is it not possible to change the style of a component like it is possible with CSS in HTML?

score 0 · Answer 1 · answered Mar 19 '14 at 14:08

I am not sure how your MyButtonStyle is written, but you can instantiate MyButtonStyle in your root component and use it throughout the application:

MyButtonStyle { id: myButtonStyle }

or you can define it as a singleton object.

Reference: http://qt-project.org/wiki/QmlStyling

Change style property of QML element over event

1 Answers1