Creating a Qt Quick Application

This tutorial uses built-in QML types and illustrates basic concepts of Qt Quick. For more information about the UI choices you have, see User Interfaces.

This tutorial describes how to use Qt Creator to implement Qt Quick states and transitions. We create an application that displays a Qt logo that moves between three rectangles on the page when you click them.

"States and transitions example"

For more information about developing Qt Quick applications in the Design mode, see Developing Qt Quick Applications.

For examples of using Qt Quick Controls, see Qt Quick Controls Examples.

Creating the Project

  1. Select File > New File or Project > Application (Qt Quick) > Qt Quick Application - Swipe.
  2. Select Choose to open the Project Location dialog.
  3. In the Name field, enter a name for the application.
  4. In the Create in field, enter the path for the project files.
  5. Select Next (or Continue on macOS) to open the Define Build System dialog.
  6. In the Build system field, select the build system to use for building and running the project: qmake, CMake, or Qbs.
  7. Select Next to open the Define Project Details dialog.
  8. Select Next to use the default settings and to open the Translation File dialog.
  9. Select Next to use the default settings and to open the Kit Selection dialog.
  10. Select kits for the platforms that you want to build the application for. To build applications for mobile devices, select kits for Android ARM and iPhone OS.

    Note: Kits are listed if they have been specified in Tools > Options > Kits (on Windows and Linux) or in Qt Creator > Preferences > Kits (on macOS). For more information, see Adding Kits.

  11. Select Next to open the Project Management dialog.
  12. Review the project settings, and select Finish (or Done on macOS) to create the project.

Qt Creator generates two UI files, Page1Form.ui.qml and Page2Form.ui.qml, and a QML file, main.qml. You can modify Page1Form.ui.qml in the Form Editor to create the application main view and main.qml in the Text Editor to add the application logic. For the purposes of this example, you can ignore Page2Form.ui.qml.

For more information about the settings that you skipped, see Creating Qt Quick Applications.

Creating the Main View

The main view of the application displays a Qt logo in the top left corner of the view and two empty rectangles.

To use the qt-logo.png image in your application, you must copy it from the Qt examples directory to the project directory (same subdirectory as the QML file). The image appears in Assets. You can also use any other image or a QML type, instead.

  1. In the Projects view, double-click the Page1Form.ui.qml file to open it in the Design mode.

    "Transitions project in Design Mode"

    Note: If a view is hidden, you can show it by selecting Window > Views.

  2. In the Navigator, select Label and press Delete to delete it.
  3. Select Page in Navigator, and enter page in the Id field in the Properties view.
  4. In Library > Assets, select qt-logo.png and drag and drop it to the page in Navigator.

    "Image properties"

    1. In the Id field, enter icon.
    2. In the Position field, set X to 10 and Y to 20.
  5. In the Projects view, right-click the resource file, qml.qrc, and select Add Existing File to add qt-logo.png to the resource file for deployment.
  6. In Library > QML Types > Qt Quick - Basic, select Rectangle, drag and drop it to page in Navigator, and edit its properties in the Properties view.

    "Rectangle properties"

    1. In the Id field, enter topLeftRect.
    2. In the Size field, set W to 55 and H to 41, for the rectangle size to match the image size.
    3. In the Color field, click the (Transparent) button to make the rectangle transparent.
    4. In the Border color field, set the border color to #808080.
    5. Click Layout, and then click the (Top) and (Left) anchor buttons to anchor the rectangle to the top left corner of the page.
    6. In the Margin field, select 20 for the top anchor and 10 for the left anchor.

      "Anchor margins"

  7. Drag and drop a Mouse Area type from the Library to topLeftRect in Navigator.
  8. Click Layout, and then click the (Fill to Parent) button to anchor the mouse area to the rectangle.
  9. In the Navigator, copy topLeftRect (by pressing Ctrl+C) and paste it to page in Navigator twice (by pressing Ctrl+V). Qt Creator renames the new instances of the type topLeftRect1 and topLeftRect2.
  10. Select topLeftRect1 and edit its properties:
    1. In the Id field, enter middleRightRect.
    2. In Layout, select the (Vertical Center anchor button and then the (Right) anchor button to anchor the rectangle to the middle right margin of its parent.
    3. In the Margin field, select 10 for the right anchor and 0 for the vertical center anchor.
  11. Select topLeftRect2 and edit its properties:
    1. In the Id field, enter bottomLeftRect.
    2. In Layout, select the (Bottom) and (Left) anchor buttons to anchor the rectangle to the bottom left margin of its parent.
    3. In the Margin field, select 20 for the bottom anchor and 10 for the left anchor.
  12. In the Navigator, select the (Export) button for each type to export all types as properties. This enables you to use the properties in the main.qml file.
  13. Press Ctrl+S to save the changes.

To check your code, you can view your Page1Form.ui.qml file in the Text Editor and compare it with the Page1Form.ui.qml example file.

The new project wizard adds boilerplate code to the Page1.qml file to create menu items and push buttons. Modify the boilerplate code by removing obsolete code. You removed the push buttons from the UI form, so you also need to remove the corresponding code from Page1.qml (or the application cannot be built).

The UI is now ready and you can switch to editing the main.qml file in the Text Editor to add animation to the application, as described in the following section.

"Transitions UI"

Adding Application Logic

Edit the main.qml file to add pointers to two additional states: State1 and State2. You cannot use the Form Editor to add states for a Window QML type. Use the Text Editor to add the states inside a StateGroup QML type and refer to them by using the id of the state group.

  1. Specify an id for the Page1 type to be able to use the properties that you exported in Page1Form.ui.qml:
    
      ApplicationWindow {
          visible: true
          width: 640
          height: 480
          title: qsTr("Tabs")
    
          SwipeView {
              id: swipeView
              anchors.fill: parent
              currentIndex: tabBar.currentIndex
    
              Page1Form {
                  id: page
    
    
  2. Add a pointer to the clicked expressions in mouseArea:
    
                  mouseArea {
                      onClicked: stateGroup.state = ' '
                  }
    
    

    The expression sets the state to the base state and returns the image to its initial position.

  3. Add a pointer to a clicked expression to mouseArea1 to set the state to State1:
    
                  mouseArea1 {
                      onClicked: stateGroup.state = 'State1'
                  }
    
    
  4. Add a pointer to a clicked expression to mouseArea2 to set the state to State2:
    
                  mouseArea2 {
                      onClicked: stateGroup.state = 'State2'
                  }
              }
    
    
  5. Bind the position of the Qt logo to the rectangle to make sure that the logo is displayed within the rectangle when the view is scaled on different sizes of screens. Set expressions for the x and y properties, as illustrated by the following code snippet:
    
          StateGroup {
              id: stateGroup
              states: [
                  State {
                      name: "State1"
    
                      PropertyChanges {
                          target: page.icon
                          x: page.middleRightRect.x
                          y: page.middleRightRect.y
                      }
                  },
                  State {
                      name: "State2"
    
                      PropertyChanges {
                          target: page.icon
                          x: page.bottomLeftRect.x
                          y: page.bottomLeftRect.y
                      }
                  }
              ]
    
    
  6. Press Ctrl+R to run the application.

Click the rectangles to move the Qt logo from one rectangle to another.

Adding Animation to the View

Add transitions inside the state group to define how the properties change when the Qt logo moves between states. The transitions apply animations to the Qt logo. For example, the Qt logo bounces back when it moves to the middleRightRect and eases into bottomLeftRect.

  1. In the Text Editor, add the following code to specify that when moving to State1, the x and y coordinates of the Qt logo change linearly over a duration of 1 second:
    
              transitions: [
                  Transition {
                      from: "*"; to: "State1"
                      NumberAnimation {
                          easing.type: Easing.OutBounce
                          properties: "x,y";
                          duration: 1000
                      }
                  },
    
    
  2. You can use the Qt Quick toolbar for animation to change the easing curve type from linear to OutBounce:
    1. Click NumberAnimation in the Text Editor to display the icon, and then click the icon to open the toolbar:

      "Qt Quick toolbar for animation"

    2. In the Easing field, select Bounce.
    3. In the Subtype field, select Out.
  3. Add the following code to specify that when moving to State2, the x and y coordinates of the Qt logo change over a duration of 2 seconds, and an InOutQuad easing function is used:
    
          ...
                  Transition {
                      from: "*"; to: "State2"
                      NumberAnimation {
                              properties: "x,y";
                              easing.type: Easing.InOutQuad;
                              duration: 2000
                      }
                  },
    
    
  4. Add the following code to specify that for any other state changes, the x and y coordinates of the Qt logo change linearly over a duration of 200 milliseconds:
    
          ...
                  Transition {
                           NumberAnimation {
                               properties: "x,y";
                               duration: 200
                           }
                  }
              ]
    
    
  5. Press Ctrl+R to run the application.

Click the rectangles to view the animated transitions.

Files:

Images: