- Qt Design Studio Manual
- Creating Projects
- Qt Design Studio Manual 2.3.0

Keyboard Shortcuts ◦ Use Cases

# Creating Projects

One of the major advantages of Qt Design Studio is that it allows a team of designers and developers to share a project across different development platforms with a common tool for design, development, profiling, and debugging.

Creating a project enables you to:

- Group files together
- Include UI files (.ui.qml), component files (.qml), and assets files
- Specify settings for previewing UIs

Setting up a new project in Qt Design Studio is aided by a wizard that guides you step-by-step through the project creation process. The wizard templates prompt you to enter the settings needed for a particular type of project and create the necessary files for you.

Qt Design Studio projects are useful for creating UIs. You cannot use them for application development, because they do not contain:

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

Because the projects do not contain any C++ code, you do not need to build them. To test how well your designs work, you can preview the UIs on the desktop or embedded Linux devices. For more information, see Validating with Target Hardware.

You can export designs from other design tools and import them to projects or create them from scratch using the following wizard templates:

Category | Wizard Template | Purpose
--- | --- | ---
General | Qt Quick Application - Empty | Creates a project that uses default components and preset UI controls and can be run on all target platforms.
Qt Quick 3D Application | Creates a project that uses default components, UI controls, and 3D components.
Qt for MCUs | Qt for MCUs Application | Creates an application that uses a subset of preset components (as supported by Qt for MCUs) that you can deploy, run, and debug on MCU boards.
Mobile | Qt Quick Application - Scroll | Creates an application that uses UI controls to implement a scrollable list.
Qt Quick Application - Stack | Creates an application that uses UI controls to implement a set of pages with a stack-based navigation model.
Desktop | Qt Quick Application - Launcher | Creates a project that uses default components and UI controls and defines a launcher application.

For an example of creating a Qt Quick 3D Application project, watch the following video:

## Using Project Wizards

1. Select File > New Project.
2. Select a wizard template, and then select Choose.
3. In the Name field, enter a name for the project. Keep in mind that projects cannot be easily renamed later.

4. In the Create in field, enter the path for the project files. You can move project folders later without problems.
5. Select Next (or Continue on macOS).
6. In the Screen resolution field, select the screen resolution for previewing the UI on the desktop or on a device. This determines the screen size.

7. To use a custom screen size, specify the width and height of the screen in the Custom screen width and Custom screen height fields. You can easily change the screen size later in Properties.
8. In the Qt Quick Controls Style field, select one of the predefined UI styles to use.
9. Select the Use Qt Virtual Keyboard check box to enable users to enter text using a virtual keyboard.
10. In the Target Qt Version field, select the Qt version to use for developing the application. While you can change the Qt version later in the Run Settings of the project, keep in mind that the two versions are not fully compatible.
11. Select Finish (or Done on macOS) to create the project.

Qt Design Studio creates the following files and folders:

- .qmlproject project file defines that all component, 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 the functionality and appearance of a component.
- Screen01.ui.qml defines a custom component that you can edit in Form Editor. For more information, see UI Files.

  By default, this is the main file in the project, but you can change that in the .qmlproject file. While the custom component is a good starting point for new users, you don't have to use it. Specifically, if you export and import designs using Qt Bridge, your main file is most likely called something else. For more information, see Exporting from Design Tools.

- qtquickcontrols2.conf file specifies the preferred style and some style-specific arguments.
- fonts folder contains font files that you have added in Library > Assets.
- imports folder contains a Constants.qml file that specifies a font loader for the Arial font and the screen resolution. The size of the default Screen.ui.qml Rectangle should be set as `width: Constants.width & height: Constants.height` so that it inherits the global resolution saved here.
- qmldir module definition file declares the Constant component. For more information, see Module Definition qmldir Files.

To use JavaScript and image files in the UI, select Library > Assets > .

## Adding Files to Projects

You can use wizard templates also to add individual files to projects.

The wizard templates in the Qt Quick Controls category create stylable versions of the components in the Qt Quick Controls module. For more information, see Creating Custom Controls.

You can create the following types of files:

Category | Wizard Template | Purpose
--- | --- | ---
Qt Quick Files | Flow Item and Flow View | Generate components that you can use to design the application flow.
Qt Quick File | Generates a component with one of the following default components or positioners as the root component: Item, Rectangle, Image, Border Image, Flickable, Row, Column, Flow, or Grid.
Qt Quick UI File | Generates a UI file with one of the above components as the root component.
Qt Quick Views | Generates a Grid View or a List View. For more information, see List and Grid Views.
Qt Quick Controls | Custom Button | Creates a push button with a text label.
Custom CheckBox | Creates a check box.
Custom Dial | Creates a dial.
Custom Slider | Creates a slider.
Custom SpinBox | Creates a spin box.
Custom Switch | Creates a switch with on and off states.
Pane | Provides a background that matches the UI style and theme.
StackView | Provides a stack-based navigation model.
SwipeView | Enables users to navigate pages by swiping sideways.
QML Files | ListModel | Adds a list model to the project.
JavaScript | JavaScript File | Generates files that you can use to write the application logic. This is useful for testing the application before the developers implement the application logic in C++, for example. For more information, see Simulating Application Logic.

Keyboard Shortcuts ◦ Use Cases