Adding the main QML file

Next, you can add a QML file to define the UI for the application.

1. Click the Edit icon on the left side, right-click the QtHmi folder in the Projects view, then choose Add New... in the popup menu.
2. In the New File dialog, select Qt in the Files and Classes list, then QML File (Qt Quick 2) in the list of file types (shown in the middle), then click Choose...
3. In the Location page of the New QML file dialog, name the file main, then click Next.
4. In the Summary page, click Finish.

   Qt Creator adds main.qml to the project and opens this file in the editing area.

5. Replace the contents of this file with the following:

   import QtQuick 2.0
   
   Rectangle {
   
       color: "black"
   
       Text {
           color: "white"
           text: qsTr("Awesome HMI goes here")
           anchors.centerIn: parent
       }
   }
   

6. After saving the QML file, edit the QtHmi.pro file to add the following lines:

   # The Qt modules needed for this project
   QT += quick
   

   This informs Qt Creator that the project uses the quick module, which is needed to build QML-based UIs.