Converting UI Projects to Applications
Qt Quick UI projects are useful for creating user interfaces. To use them for application development in Qt Creator you have to add:
- Project configuration file (.pro)
- C++ code (.cpp)
- Resource files (.qrc)
- Code needed for deploying applications to devices
For more information about integrating QML and C++, see Overview - QML and C++ Integration.
You can 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 file.
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 contains 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.
The Qt Quick Designer Components module is delivered with Qt Design Studio. If you use Studio Components or Effects in your project, you have to build the module and install it to your Qt to be able to build your project.
The Qt Quick Timeline module is delivered with Qt Design Studio and with Qt 5.14, and later. If you use a timeline in a Qt Design Studio project that you import to Qt Design Studio, and your Qt is older than 5.14, you must build the Qt Quick Timeline module and install it to your Qt to be able to build your project.
Converting Projects
To convert a project that has a .qmlproject file to one that has a .pro file:
- Select File > New File or Project > Application (Qt Quick) > Qt Quick Application - Empty > Choose.
- In the Build system field, select qmake as the build system to use for building and running the project, and then select Next (or Continue on macOS).
- Follow the instructions of the wizard to create the project.
- In the file explorer, copy the source files from the Qt Quick UI project directory to a subdirectory in the application project directory. For the purpose of these instructions, the directory is called
qml
. - Open the application project file, and edit the value of the
RESOURCES
option to add the following line:RESOURCES += \ $$files(qml/*)
- Also edit the value of the
QML_IMPORT_PATH
option to specify the QML import path:QML_IMPORT_PATH = qml/imports
Where
qml/imports
is the import path. - Select Build > Run qmake to apply the
RESOURCES
option to the build configuration. - Open the main.cpp file and replace the QQmlApplicationEngine object with a QQuickView object:
QQuickView view; view.engine()->addImportPath("qrc:/qml/imports"); view.setSource(QUrl("qrc:/qml/ProgressBar.ui.qml")); if (!view.errors().isEmpty()) return -1; view.show();
Where
qrc:/qml/imports
is the import path andqrc:/qml/ProgressBar.ui.qml
is the path to and the name of the main QML file in the Qt Quick UI project. - Select Build > Run to build and run your project.
For example, if you copy the source files of the ProgressBar example from your Qt Design Studio installation (located in the \share\qtcreator\examples\ProgressBar
directory) to an empty Qt Quick application project and make the necessary changes, the main.cpp file should look as follows:
#include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQuickView> int main(int argc, char *argv[]) { QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QGuiApplication app(argc, argv); QQuickView view; view.engine()->addImportPath("qrc:/qml/imports"); view.setSource(QUrl("qrc:/qml/ProgressBar.ui.qml")); if (!view.errors().isEmpty()) return -1; view.show(); app.exec(); }
Adding Custom Fonts
To use custom fonts from the Qt Quick UI project, call the QFontDatabase::addApplicationFont() function from the main.cpp file.
Adding Qt Quick Designer Components to Qt Installations
If you use Studio Components or Effects in your project, you have to check out and install the Qt Quick Designer Components module from Qt Code Review.
For example:
git clone "ssh://user@codereview.qt-project.org:29418/qt-labs/qtquickdesigner-components"
Then use qmake from your Qt installation to build the module and to add it to your Qt. Switch to the directory that contains the sources (usually, qtquickdesigner-components), and enter the following commands:
<path_to_qmake>\qmake -r make make install
On Windows, use the nmake
and nmake install
commands instead.
Adding Qt Quick Timeline Module to Qt Installations
Note: You only need to do this if your Qt version is older than 5.14.
Check out the Qt Quick Timeline module from Qt Code Review.
For example:
git clone ssh://user@codereview.qt-project.org:29418/qt/qtquicktimeline
Then build the module and add it to your Qt as described in the previous section.
Available under certain Qt licenses.
Find out more.