Qt Creator Manual | Creating Qt Quick Projects

Qt Creator Manual 4.4.0

Developing Qt Quick Applications ◦ Qt Quick UI Forms

# Creating Qt Quick Projects

When you create a new Qt Quick project from scratch, you have the following options:

- Qt Quick Application creates a Qt Quick 2 application project that can contain both QML and C++ code. The project includes a QQuickView. You can build the application and deploy it to desktop, embedded, and mobile target platforms.
- Qt Quick Controls 2 Application is like Qt Quick Application, but using Qt Quick Controls 2 (requires Qt 5.7 or later).
- Qt Canvas 3D Application creates a Qt Quick application that imports the Qt Canvas 3D module and, optionally, includes three.js.
- Qt Quick UI Prototype (in the Other Project category) creates a Qt Quick UI project with a single QML file that contains the main view. You can review Qt Quick 2 UI projects in the QML Scene preview tool. You do not need to build them, because they do not contain any C++ code. Use this only if you are prototyping. You cannot create a full application with this.

  Qt Quick UI projects cannot be deployed to embedded or mobile target platforms. For those platforms, create a Qt Quick application instead.

- Qt Quick 2 Extension Plugin (in the Library category) create C++ plugins that make it possible to offer extensions that can be loaded dynamically into Qt Quick 2 applications.

Note: The SDK for a particular target platform might install additional templates for that platform. For example, the QNX templates are installed as part of the QNX SDK.

Qt Creator creates the necessary boilerplate files. Some of the files are specific to a particular target platform.

## Creating Qt Quick Applications

1. Select File > New File or Project > Application > Qt Quick Application > Choose.
2. In the Name field, enter a name for the application.
3. In the Create in field, enter the path for the project files, and then select Next (or Continue on macOS).
4. In the Build system field, select the build system to use for building and running the project: qmake, CMake, or Qbs.
5. Select Next.
6. Select the Qt version to develop with in the Minimal required Qt version field. The Qt version determines the Qt Quick imports that are used in the QML files.
7. Select the With .ui.qml file check box to create an UI form that can contain a subset of the QML language. Similarly as with the UI forms for Qt Designer, it is recommended that you use Qt Quick Designer to edit the UI forms. For more information, see Qt Quick UI Forms.
8. Select Next.
9. Select kits for running and building your project, and then click Next.

   Note: Kits are listed if they have been specified in Tools > Options > Build & Run > Kits.

10. Review the project settings, and click Finish (on Windows and Linux) or Done (on macOS) to create the project.

Qt Creator generates a UI file, Page1Form.ui.qml, that you can modify in the Qt Quick Designer Form Editor and two QML files, Page1.qml and main.qml, that you can modify in the Text Editor to add the application logic. The .ui.qml file is created if you selected the With .ui.qml file check box.

## Creating Qt Quick Controls 2 Applications

1. Select File > New File or Project > Application > Qt Quick Controls 2 Application > Choose.
2. In the Name field, enter a name for the application.
3. In the Create in field, enter the path for the project files, and then select Next (or Continue on macOS).
4. In the Build system field, select the build system to use for building and running the project: qmake, CMake, or Qbs.
5. In the Qt Quick Controls 2 Style field, select one of the predefined UI styles to use, and then select Next.
6. Select kits for the platforms that you want to build the application for. To build applications for mobile devices, select kits for Android ARM and iPhone OS, and click Next.

   Note: Kits are listed if they have been specified in Tools > Options > Build & Run > Kits (on Windows and Linux) or in Qt Creator > Preferences Build & Run > Kits (on macOS).

7. Select Next.
8. Review the project settings, and click Finish (or Done on macOS).

Qt Creator generates a UI file, Page1Form.ui.qml, that you can modify in the Qt Quick Designer Form Editor and two QML files, Page1.qml and main.qml, that you can modify in the Text Editor to add the application logic.

## Creating Qt Quick UI Projects

Qt Quick UI projects are useful for testing or prototyping user interfaces, or for setting up a separate project just for QML editing, for example. You cannot use them for application development, because they do not contain:

- C++ code
- Resource files (.qrc)
- Code needed for deploying applications to devices

To create a Qt Quick UI project:

1. Select File > New File or Project > Other Project > Qt Quick UI > Choose.
2. In the Minimal required Qt version field, select the Qt version to develop with. The Qt version determines the Qt Quick imports that are used in the QML files.

   You can add imports later to combine Qt Quick basic types with Qt Quick Controls, Qt Quick Dialogs, and Qt Quick Layouts (available since Qt 5.1).

3. Select the With .ui.qml file check box to create an UI form.
4. Select Next (or Continue on macOS).
5. Review the project settings, and click Finish (on Windows and Linux) or Done (on macOS) to create the project.

Qt Creator creates the following files:

- .qmlproject project file defines that all QML, JavaScript, and image files in the project folder belong to the project. Therefore, you do not need to individually list all the files in the project.
- .qml file defines an UI item, such as a component, screen, or the whole application UI.
- ui.qml file defines a form for the application UI. This file is created if you selected the With .ui.qml file check box.

To use JavaScript and image files in the application, copy them to the project folder.

Developing Qt Quick Applications ◦ Qt Quick UI Forms