CODEWITHSUNDEEP
qtqmlqt-quickqtquick2
synacker
synacker

Reputation: 1782

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?

Upvotes: 6

Views: 4616

Answers (1)

Ajith
Ajith

Reputation: 633

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.

Upvotes: 11

Related Questions