Here is my latest post on QML after a long time.
In this post I am going to explain how you can bundle a set of QML files to a module and make it shareable so that any other QML application can load and use it. If you have any of the component which is defined using C++ class then it is better to go with the plugin approach which is explained here.
To create a QML module which contains all teh QML files we need to follow some set of rules which Qt defined. More details can be found here.
- The folder structure where we keep the QML files and assets should be in the format
-imports
- com
- apk // this could be the name of your Organization/Project
- components
- fonts
- icons
2. We should keep a special file called qmldir
inside the components
folder which will have the list of QML components inside that folder. More details can be found here.
3. Add a new QRC file which includes all our QML files and the same can be used by thirdparty application to load this library. Below is the example file.
<RCC>
<qresource prefix="/">
<file>imports/com/apk/components/Button.qml</file>
<file>imports/com/apk/components/CheckBox.qml</file>
<file>imports/com/apk/components/SpinBox.qml</file>
<file>imports/com/apk/components/qmldir</file>
</qresource>
</RCC>
4. The component library can now be used in any of the third party applicatio by just importing the above mentioned imports
folder in the pro file and load the qrc file.
How to use Component Library in a project
As mentioned in above steps what you got is the imports
directory (contains all the QML & qmldir
file and other assets if any) and the imports.qrc
files.
- Create your test project where you want to use this library and in the pro file add the path to the
qmldir
file for the QMake to find and parse information about the library.
QML_IMPORT_PATH = "path/to/the/imports"
2. Load the imports.qrc
file to the project by adding it in the pro file by using
RESOURCES += imports.qrc
3. We need to also pass the path to qmldir to the QQmlEngine to search for the installed modules. This path may be a local filesystem directory, a Qt Resource path (:/imports), a Qt Resource url (qrc:/imports) or a URL. As we have already included the qrc file in aforementioned step we could use
engine.addImportPath(":/imports");
4. In the QML file import the module as
import com.apk.components 1.0 as Apk
Example code
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14
import com.apk.components 1.0 as Apk
Window {
visible: true
width: 640
height: 480
title: qsTr("Shared QML Components")
ColumnLayout {
anchors.centerIn: parent
Apk.Button {
}
Apk.CheckBox {
}
Apk.SpinBox {
}
}
}

Git Repo
Here you find the example code https://github.com/arunpkqt/SharedComponentLibrary