Creating Screens

You can use predefined QML elements and your own components to create screens. Typically, the main qml file in a Qt Quick project specifies the main window of an application.

The QML files in the project folder are displayed in QML Components in the Library pane.

Adding Components to Screens

1. Drag and drop components from the Library pane to the editor.
2. Select components in the Navigator pane to edit their properties in the Properties pane.

   For example, you can anchor components to a position on the screen.

Organizing Items on Screens

You can create the following types of views to organize items provided by data models:

• Grid View
• List View
• Path View

In the code editor, write the code to use the data models.

Using States

Use states and transitions to navigate between screens.

QML states typically describe user interface configurations, such as the UI elements, their properties and behavior and the available actions. For example, you can use states to create two screens.

To add states, click the empty slot in the States pane. Then modify the new state in the visual editor.

The properties that you change in a state are highlighted with blue color. In the code editor, you can see the changes recorded as changes to the base state.

To keep the QML code clean, you should create a base state that contains all the elements you will need in the application. You can then create states, in which you hide and show a set of items and modify their properties. This allows you to:

• Align items on different screens with each other.
• Avoid excessive property changes. If an item is invisible in the base state, you must define all changes to its child elements as property changes, which leads to complicated QML code.
• Minimize the differences between the base state and the other states to keep the QML code short and readable and to improve performance.
• Avoid problems when using transitions and animation when changing states.

To create screens for an application by using states:

1. In the base state, add all elements you will need in the application. While you work on one screen, you can click the icon to hide elements on the canvas that are not part of a screen.
2. In the States pane, click the empty slot to create a new state and give it a name. For example, Normal.
3. In the Properties pane, deselect the Visibility check box or set Opacity to 0 for each element that is not needed in this view. If you specify the setting for the parent element, all child elements inherit it and are also hidden.

   

4. Create additional states for each screen and set the visibility or opacity of the elements in the screen.
5. To determine which view opens when the application starts, use the code editor to set the state of the root item of the .qml file, as specified by the following code snippet:

    Item {
        state: "Normal"
    }