You can use predefined QML types 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.
You can also use ready-made Qt Quick 1 Components (for Qt 4) to create screens with a native look and feel for a particular target platform. Since Qt 5.1, a set of Qt Quick Controls is available for creating classic desktop-style user interfaces using Qt Quick 2.1. You can install Qt Quick 1 Components as part of the Qt 4 SDK and the Qt Quick Controls as part of Qt 5.1, or later.
For example, you can anchor components to a position on the screen.
You can create the following types of views to organize items provided by data models:
When you add a Grid View, List View, or Path View, the ListModel and the delegate component that creates an instance for each item in the model are added automatically. You can edit item properties in the Properties pane or in the code editor. You can also replace the default model and delegate with other, more complex models and delegates in the code editor.
You can use the following QML types to arrange items on screens:
To lay out several items in a Column, Row, Grid, or Flow, select the items on the canvas, and then select Layout in the context menu.
Use states and transitions to navigate between screens.
QML states typically describe user interface configurations, such as the UI controls, 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 types 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:
To create screens for an application by using states:
Item { state: "Normal" }