Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 583
synacker Avatar asked Jan 20 '13 23:01

synacker


1 Answers

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.

like image 101
Ajith Avatar answered Nov 04 '22 10:11

Ajith