declare global property in QML for other QML files

Question

I want to declare a global property in a config file and use it in other files. for example declare mainbg in:

Style.qml:

property color mainbg: 'red' 

and use it in other QML files (like view.qml and main.qml). How can I do this work?

Answer 1

Use a QML Singleton.

Please reference "Approach 2" on this page -- The ugly QTBUG-34418 comments are mine.

These are the pieces you need:

Style.qml

pragma Singleton import QtQuick 2.0 QtObject {     property color mainbg: 'red' } 

---

qmldir

This file must be in the same folder as the singleton .qml file (Style.qml in our example) or you must give a relative path to it. qmldir may also need to be included by the .qrc resource file. More information about qmldir files can be found here.

# qmldir singleton Style Style.qml 

---

How to Reference

import QtQuick 2.0 import "."  // this is needed when referencing singleton object from same folder Rectangle {     color: Style.mainbg  // <- there it is!!!     width: 240; height 160 } 

This approach is available since Qt5.0. You need a folder import statement even if referencing the QML singleton in the same folder. If is the same folder, use: import "." This is the bug that I documented on the qt-project page (see QTBUG-34418, singletons require explicit import to load qmldir file).

Answer 2

Basically, if you don't need property binding (if you value is a constant and will not need to be notifiable on change) you can define it in a Javascript shared library, like this :

// MyConstants.js .pragma library var mainbg = "red"; 

And use it in QML like this :

import "MyConstants.js" as Constants  Rectangle {      color: Constants.mainbg; } 

But the bad side of this are : - no strong typing (JS doesn't really know about types) so you could put anything even if it is not a color. - and if you change mainbg, the Item using it won't be notified about the change and will keep the old value

So if you need type checking and binding/change notify, simply declare your property as a member of the root object in you main.qml, and it will be accessible from everywhere in the QML application, because the property will in fact be directly registered into the Qml Context object, which is global by definition.

Hope it helps.