Designer-developer workflow

Qt Design Studio enables designers and developers to work together on common projects to develop applications. Designers use the views in the Design mode to modify UI files (.ui.qml), whereas developers use Qt Creator to work on the Qt Quick (.qml) and other files that are needed to implement the application logic and to prepare the application for production.

Qt Design Studio projects come with boilerplate code for a working Qt 6 application that you can build and run in Qt Creator using CMake. Therefore, you can open, build, and run the projects with Qt Creator.

Qt Design Studio continues to use the .qmlproject file format, while Qt Creator uses a CMakeLists.txt file as the project file. This enables you to share your project as a fully working C++ application with developers.

You can also enable Qt Design Studio projects for Python development. When enabled, Qt Design Studio creates a Python folder within the project folder with the file main.py. Use this file to start the development in Python for the UI made with Qt Design Studio.

Exporting a Qt Design Studio project for C++ development

Before you export a Qt Design Studio project for Qt Creator, install the following:

• Qt Creator 13.0 or above.
• Qt Design Studio 4.5 or above.
• Git. To learn more about installing Git, see https://wiki.qt.io/Git_Installation.

To export a Qt Design Studio project for Qt Creator:

1. Create or open your Qt Design Studio project with Qt Design Studio 4.5 or above.

   Note: If you are creating a new project in Qt Design Studio, select the Target Qt Version that is not higher than the Qt version used in your Qt Creator.

2. Go to File > Export Project > Enable CMake Generator. This creates a CMakeLists.txt file in your project folder.

   Note: Enabling this option tracks the changes made to the project in Qt Design Studio and automatically updates in Qt Creator. The connection works unless you deactivate the option.

   

Opening the Qt Design Studio project in Qt Creator

Open the CMakeLists.txt file in Qt Creator:

1. In Qt Creator, select File > Open File or Project.
2. Browse through your project directory and select CMakeLists.txt. Then select Open.

   

3. Select the Qt version and then Configure Project.

   Note: If your Qt Design Studio project was created with a more updated Qt than the one available in Qt Creator, the import doesn't work. Use Qt Online Installer to install the latest Qt version. If successfully opened, all the files are accessible in the Projects view.

   

4. To run the project, select the run dropdown from the top toolbar, and then select Live Preview.

Learn more about the CMake Generator

Converted contents of the CMake Generator

The CMake Generator converts the contents of the .qmlproject file to CMake.

Changes tracked by the CMake Generator

All the files that are listed in .qmlproject are tracked by the CMake Generator. Editing the .qmlproject file triggers a CMake generation. Adding, removing, and renaming files are tracked.

Stubb or mock QML data for Qt Design Studio

Qt Design Studio doesn't understand C++ code, so the CMake Generator ignores any components or properties made with C++. If you want a similar representation in Qt Design Studio for the components or properties created with C++, add a QML mock file for Qt Design Studio. Keep these mock files in a dedicated folder within your project folder. You can later add a mockImports variable within the .qmlproject file and include the folder path with mock files in the mockImports variable. CMake ignores all folders and files included in the mockImports variable. So they only stay in the Qt Design Studio space and are not converted with CMake Generator.

Example:

mockImports: [ "MockDatas" ]

Here, MockDatas is a folder in your project folder with all the files with QML mock data. If you include this code in the .qmlproject file, the CMake Generator ignores everything inside the MockDatas folder.

Manually changing the contents of the CMakeLists.txt files

You can change the CMakeLists.txt files existing in the App and the Root folders of your project. The CMakeLists.txt files in other folders of your project are overwritten as soon as the CMake generator runs next time. Only the CMakeLists.txt files in the App and the Root folders of your project are not overwritten.

Changes in the project structure since Qt Design Studio 4.5

Qt Design Studio project structure has been changed since Qt Design Studio 4.5. Now, there is only a common import path (./) at the root of the project. This makes the project in line with the QML compiler and tooling. Learn more about the QML compiler.

Find the difference between the project structures from the table below:

Converting a project to the current Qt Design Studio project structure

To convert the structure of a project created with a Qt Design Studio version earlier than 4.5 to the current project structure:

1. Move the project files from ./import/ProjectName to the ./ProjectName folder. If you have additional modules in ./import/, move them similarly. You do not need to adjust the URI.
2. Move the project files from ./assets_imports to the ./Generated folder. Adjust the import URIs throughout the project.
3. Rename ./content to ./ProjectNameContent. Adjust the import URIs throughout the project.
4. Make sure that URIs in qmldir files match the folder structure.

   Note: A qmldir defined in ./Generated/QtQuick3D/DangerArrow/qmldir should be defined as module Generated.QtQuick3D.DangerArrow. This ensures the same URIs between Qt Design Studio and the generated CMakeLists files. Ensure that import in .qml files matches these URIs.

5. Add missing filters to the .qmlproject file.
   • If a folder contains QML and JavaScript files, define QMLFiles and JavaScriptFiles in the .qmlproject file.
   • For the files that don't have dedicated keywords, such as ImageFiles or FontFiles, add them to the .qmlproject as a filter. To add WAV or MP3 files, define filters in the .qmlproject file like this:

     Files {
         filter: "*.wav;*.mp3"
     }

     To learn more about the defined file formats, see here.

6. Remove all the CMakeLists.txt files. The CMakeLists.txt files are automatically generated when you access CMake generation using File > Export Project > Enable CMake Generator.
7. In the examples/dataImports/DataModels/ folder, update the ExamplesModel.qml and ExamplesModelV2.qml files to reflect qmlFileName correctly after a successful CMake generation.
8. If the project uses shaders, add the following snippet to the .qmlproject file:

   ShaderTool {
       args: "-s --glsl \"100 es,120,150\" --hlsl 50 --msl 12"
       files: [ "UntitledProject3DContent/shaders/*" ]
   }

Importing Qt Quick Designer Components with CMake Generator

Some Qt Quick components, such as Pie, Regular Polygon, Star, and others are exclucive to Qt Design Studio. For more information, see here. These components get bundled within the Dependencies folder after the CMake generation. In the previous versions of Qt Design Studio, you had to manually include these components from a git repository after the CMake generation.

Exporting a Qt Design Studio project for Python development

1. Create a project with Qt Design Studio 4.5 or above. Then open your Qt Design Studio project with Qt Design Studio 4.6 or above.

   Note: You cannot export a project created with Qt Design Studio 4.4 or an earlier version of Qt Design Studio for Python development.

2. Go to File > Export Project > Enable Python Generator. This creates a Python folder in your project folder. You can find the main.py file in the Python folder. This file is necessary for working in Python.

   Note: Do not modify the contents of the autogen folder inside the Python folder manually; they are overwritten with each change you make in the project.

   

Opening the Qt Design Studio project with Python

After your project have the Python folder and the main.py file available, you can start setting up your Python environment for developing with Qt Design Studio projects.

1. Install Python. The latest version of Python is available here.
2. Follow the steps from this document to install PySide6. You need this for working with Qt in Python.

   Note: You need Python version between 3.8 and 3.13 to install PySide6.

3. Install the Qt Design Studio packages for PySide6. Stay in the virtual environment that was accessed for installing PySide6. From there, execute the command in the command prompt.

   pip install PySide6_DS

4. Go to your project folder in the command prompt.

   cd <path/to/your/project/folder>

5. Run the command below in the command prompt to open the main.py file from your project.

   python Python\main.py

   Note: Any extra data or Python files you add to the project and, import from main.py must remain inside the Python folder.

Your Qt Design Studio project now runs in Python. Use Python to add more functionalities to the project. Go to Qt for Python to learn more about developing Qt projects using Python.

Converting Qt Design Studio projects to applications

Qt Design Studio projects are useful for creating user interfaces. To use them for application development in Qt Creator you have to add:

• A project configuration file (CMakeLists.txt or a .pro file)
• C++ code (.cpp)
• Resource files
• Code needed for deploying applications to devices

For more information about integrating QML and C++, see Overview - QML and C++ Integration.

To use qmake as the build system, use a Qt Creator wizard template to create a Qt Quick application that is built using the qmake build system and then copy the source files from the Qt UI Quick project to the application project.

You can use the RESOURCES option in the project configuration file to automatically add all the QML files and related assets to a Qt resource collection file (.qrc). However, large files should be included as external binary resources instead of compiling them into the binary.

The wizard automatically adds the QML_IMPORT_PATH option to the project file for specifying the required QML import path. The path is only needed if more than one subdirectory has QML files.

Then you can use the QQuickView class in the main C++ source file to show the main QML file when the application starts.

If you only install Qt Creator and Qt, remember to also select the Qt Quick Timeline module for installation.

Handling Large Data Files

Graphical assets used in the UI, such as images, effects, or 3D scenes are a typical cause for performance problems in UIs. Even building the application requires huge amounts of memory if you try to include large asset files, such as 100-MB 3D models or 64-MB textures, into the .qrc file for compiling them into the binary.

First try to optimize your assets, as described in Optimizing designs and Creating optimized 3D scenes.

Large assets should either be loaded directly from the file system or by using the Qt resource system dynamically. For more information, see The Qt Resource System.

Adding Qt Quick Studio Components to Qt Installations

Since Qt Design Studio 3.9, the Qt Quick Studio Components module is installed by default as part of the application created with Qt Design Studio. You can also install the module manually.

For example:

1. Clone the module repository.

   git clone https://code.qt.io/qt-labs/qtquickdesigner-components.git

2. Install the Qt Quick Studio Components module.

   mkdir build
   cd build
   cmake -GNinja -DCMAKE_INSTALL_PREFIX=<path_to_qt_install_directory> <path_to_qtquickdesigner-components>
   cmake --build .
   cmake --install .

   Note: Here, <path_to_qt_install_directory> and <path_to_qtquickdesigner-components> needs to be replaced with the real location on your local drive. For example, <path_to_qt_install_directory> can be something like /Qt/6.3.0/msvc2019_64 and <path_to_qtquickdesigner-components> like this ../qtquickdesigner-components/