Skip to main content

Using the exported QML

The export is plain QML for Qt 6.12. Developers load the layer files they need and add the export folder to the QML import path, so that the images and shared types are found.

Requirements​

  • Qt 6.12. Clate targets Qt 6.12.
  • The exported files use QtQuick. Designs with shapes or gradients also use the QtQuick.Shapes and QtQuick.Shapes.DesignHelpers modules, which ship with Qt Quick.

What is in the export folder​

See Export to QML for the details. In short:

  • Every page is a folder, and every layer on the page is a QML file in that folder, named after the layer. For example, the layer Welcome Shell Top Nav on the page Welcome becomes Welcome/welcome_Shell_Top_Nav.qml.
  • The images are in an assets module, <Project>/Assets. A file that shows an image imports it with import <Project>.Assets.

Layers are plain files, not types of a module: a page folder does not list its layers. Load a layer by its file.

Use it in an application​

  1. Copy the export folder into your project, or keep it where it is.
  2. Add the export folder to the QML import path of your application, so that import <Project>.Assets works. In C++, call engine.addImportPath("<export folder>"). With the Qt qml tool, use the -I option.
  3. Load a layer file, for example with a Loader:
import QtQuick

Window {
    width: 1280
    height: 860
    visible: true

    Loader {
        anchors.fill: parent
        source: "file:///path/to/export/Welcome/welcome_Shell_Top_Nav.qml"
    }
}

To look at one layer quickly, run qml -I <export folder> <export folder>/Welcome/welcome_Shell_Top_Nav.qml.

tip

If a layer with images does not load and Qt reports module "...Assets" is not installed, the export folder is missing from the import path. Layers without images load without it.

Every file in the export is a regular QML file, so developers can open it in their editor, add behavior, and combine layers from several pages.

Tips for designers​

  • Give layers clear names. The names of your layers become the file names your developers see.
  • Export into an empty folder, and export again into a new folder after you rename layers.
  • Use Preview to check the result before you hand the files over.

Next steps​

Continue with Export to QML.