Defining the user interface

You can define the UI by adding a QML file that declares the UI components to your new project.

1. Click the Edit icon on left side, right-click the QtApp folder in the Projects view, then choose Add New...
   
2. In the New File dialog, select Qt in the Files and Classes list, then QML File (Qt Quick 2.0) in the list of specific file types (shown in the middle), then click Choose...

   Qt Creator displays the New QML File (Qt Quick 2.0) configuration dialog.

3. In the Location page, name the file main, then click Next.
4. In the Summary page, click Finish.

   The main.qml file is opened for editing.

5. Delete the default file content and replace it with the following:

   import QtQuick 2.0
   
   Rectangle {
       width: 360
       height: 360
       Text {
           text: qsTr("Hello World")
           anchors.centerIn: parent
       }
   }
   

   This QML code defines a simple UI consisting of a square box displaying Hello World.
6. Save the file.