Solved Defining custom colors in qml
-
Coming from the Android development world, I am used to defining my own colors in a colors.xml file. I am trying to replicate that facility in QML. I have found that I am able to do the following:
Item { id: customColors property color tealish_black: "#030b0d" property color light_sea_green: "#a1ede8" }
and then use the colors like so:
ApplicationWindow { color: customColors.tealish_black
However, this works only if the customColors Item is defined in the same qml file. I would like to define all my custom colors in a colors.qml and be able to use those color values in all other qml files I might create. How can I go about this?
-
Hi and welcome to devnet,
You can use a Style singleton like described here
-
I tried the following based on the singleton example:
Colors.qml:
pragma Singleton import QtQuick 2.0 QtObject { property color tealish_black: "#030b0d" property color light_sea_green: "#a1ede8" }
qmldir file:
module CustomStyles singleton Colors 1.0 Colors.qml
In main.qml:
import CustomStyles 1.0
However, QtCreator flags an error saying "QML module not found". If I try to run anyway, the build error is 'module "CustomStyles" is not installed'. The import path section says that the default path does include the current directory. Right now everything I am doing is indeed in one directory, so this should not have been a problem. What am I missing?
As an aside, what is the right way to create a qmldir file from inside Qt Creator? The New File dialog does not seem to suggest any suitable options.
-
@vikramg said:
However, QtCreator flags an error saying "QML module not found".
You need to set "QML_IMPORT_PATH" in your .pro/.pri file. And run Tools -> QML/JS -> Reset Code Model in Qt Creator.
For example:
quickandroid/quickandroid.pri at master · benlau/quickandroidIf I try to run anyway, the build error is 'module "CustomStyles" is not installed'. The import path section says that the default path does include the current directory. Right now everything I am doing is indeed in one directory, so this should not have been a problem. What am I missing?
Is CustomStyles folder located in the same directory as the entry point of your QML application? If not, you need to add the import path to QQmlEngine/ QQmlApplicationEngine.
As an aside, what is the right way to create a qmldir file from inside Qt Creator? The New File dialog does not seem to suggest any suitable options.
I usually just use "New File -> General -> Empty File"
-
I originally did not have CustomStyles as a subfolder; all files were in a single flat application directory. Moving the module to a CustomStyles subfolder got rid of the Qt Creator "QML module not found" error. But still stuck at 'module "CustomStyles" is not installed'. I have the following:
Base application directory QtQTest contains:
main.cpp
deployment.pri
main.qml
MainForm.ui.qml
qml.qrc
QtQTest.pro
QtQTest.pro.userSubfolder CustomStyles contains:
Colors.qml
customstyles.qrc
qmldir.pro file has:
RESOURCES += qml.qrc \
CustomStyles/customstyles.qrc
QML_IMPORT_PATH += $$PWDqml.qrc:
<RCC> <qresource prefix="/"> <file>main.qml</file> <file>MainForm.ui.qml</file> </qresource> </RCC>
CustomStyles/customstyles.qrc:
<RCC> <qresource prefix="/"> <file>Colors.qml</file> <file>qmldir</file> </qresource> </RCC>
Added imports to main.cpp:
QQmlApplicationEngine engine; engine.addImportPath("qrc:/"); engine.addImportPath("qrc:/CustomStyles/");
Can't get past the 'module "CustomStyles" is not installed' error.
I feel like I'm taking stabs in the dark. Is there a tutorial that explains how the directories are structured and what files go where?
-
@vikramg said:
CustomStyles/customstyles.qrc:
<RCC> <qresource prefix="/"> <file>Colors.qml</file> <file>qmldir</file> </qresource> </RCC>
Now you put Colors.qml to qrc:/// instead of qrc:///CustomStyles. In fact, you don't really customstyles.qrc. Instead , you may add Colors.qml and CustomStyles/qmldir to qml.qrc.
-
why not simply do it this way:
main.qml
ApplicationWindow { id: root property color light_sea_green: "#a1ede8"
.......
Another.qmlLabel { text: "my light sea green from root" color: root.light_sea_green }
-
@benlau said:
Now you put Colors.qml to qrc:/// instead of qrc:///CustomStyles. In fact, you don't really customstyles.qrc. Instead , you may add Colors.qml and CustomStyles/qmldir to qml.qrc.
Ah, because of the <qresource prefix="/">. Although I had originally tried adding CustomStyles/Colors.qml and CustomStyles/qmldir to the top-level qml.qrc and it still doesn't work ('module "CustomStyles" version 1.0 is not installed). There is some progress, the version number is now displayed in the error message, but it still won't run.
-
@ekkescorner
Is there a way to "include" the custom color property's as a file into the main.qml? I would want to use the same set of colors in multiple projects, and I suppose I could copy-paste all the definitions, but would be best to have them in a separate file. Hence the attempt to group them in a Colors.qml. -
@vikramg said:
@benlau said:
Now you put Colors.qml to qrc:/// instead of qrc:///CustomStyles. In fact, you don't really customstyles.qrc. Instead , you may add Colors.qml and CustomStyles/qmldir to qml.qrc.
Ah, because of the <qresource prefix="/">.
yesAlthough I had originally tried adding CustomStyles/Colors.qml and CustomStyles/qmldir to the top-level qml.qrc and it still doesn't work ('module "CustomStyles" version 1.0 is not installed). There is some progress, the version number is now displayed in the error message, but it still won't run.
That is a working example, you may use it as a reference:
quickandroid/Constants.qml at master · benlau/quickandroid
quickandroid/qmldir at master · benlau/quickandroid
quickandroid/quickandroid.qrc at master · benlau/quickandroid -
Finally was able to get this to work, using Approach 2 from here:
http://wiki.qt.io/QmlStylingAll that is needed is the following-
./CustomStyles/Colors.qml:
pragma Singleton import QtQuick 2.5 QtObject { readonly property color tealish_black: "#030b0d" readonly property color light_sea_green: "#a1ede8" }
./CustomStyles/qmldir:
singleton Colors Colors.qml
./main.qml:
import "./CustomStyles"
./qml.qrc:
<RCC> <qresource prefix="/"> <file>main.qml</file> <file>MainForm.ui.qml</file> <file>CustomStyles/Colors.qml</file> <file>CustomStyles/qmldir</file> </qresource> </RCC>
Now colors from Colors.qml can be accessed thus in main.qml, and the project runs without errors:
color: Colors.light_sea_green