Search code examples
qtqmlqt-quickqtquick2

Set common property value in QML such as QSS


For example i have 2 different QML elemnts with common property such as:

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Text {
        id: t
        color: "red"
        text: qsTr("Hello World")
        anchors.top: parent.top
    }
    TextInput {
        text: qsTr("Hello all!")
        color: "red"
        anchors.top: t.bottom

    }
}

You can see, that Text and TextInput have equal property called "color" with equal value.

In QSS i can use common property value, for example:

QWidget {
   background: "red"
}

and all QWidgets, that belong the qss widget also will have red background.

Is way for set common property in QML?


Solution

  • There is no support for customizing using QSS in QML. But you can use "Style Object" method to set the properties and use them in all your QML files.

    In this, you define a Style object in a "Style.qml" file, with properties defining the style. Instantiate in the root component, so it will be available throughout the application.

    // Style.qml
    QtObject {
        property int textSize: 20
        property color textColor: "green"
    }
    
    // root component
    Rectangle {
        ...
        Style { id: style }
        ...
    }
    
    // in use
    Text {
        font.pixelSize: style.textSize
        color: style.textColor
        text: "Hello World"
    }
    

    You can find more information here.