Shared QML Component Library

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.

1. 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.

1. 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