Back to Doc.qt.io
Contact Us Blog Download Qt

Creating a single-page navigation web application

This tutorial explains how you can create a single-page navigation web application suitable to run in Qt Design Viewer. In this project, you create the structure and navigation for the web application.

Setting up the project

In the Qt Design Studio Welcome screen, select Create Project. Then, in the Presets tab, select >uicontrol Desktop > Launcher, and set:

  • Resolution to 1024 x 768.
  • Qt Target Version to 6.2.

Next, you will remove the unneeded components from the new project.

In Navigator:

  1. Select and delete Text.
  2. Select Rectangle and in Properties, set Fill color to #ffffff.

Adding components

Next, you will add the needed components to create the structure for your web application.

First, to add the needed components to Components, add the QtQuick Layouts module to your project:

  1. In Components, select the Plus button .
  2. Select QtQuick.Layouts.

Next, drag the following components from Components to Navigator:

  1. A Rectangle to the root Rectangle.
  2. A Row component to the new rectangle component.
  3. Three Button components to Row.
  4. A Flickable to the new rectangle.
  5. A Column Layout to Flickable.

{The added components in the Navigator view.}

Creating the pages

Next, you will create the separate pages for your web application. In this tutorial, you create pages for Home, About Us, and Contact Us.

You will create each page as a separate component and then add it to the main application.

To create the first page:

  1. Go to File > New File.
  2. On the Qt Quick Files tab, select the Qt Quick File wizard template.
  3. Select Choose and enter a name, for example, Page1.
  4. Set Root Item to Rectangle.

{Creating a new page using the Qt Quick File wizard template.}

When you have created the new page, select rectangle in Navigator, and in the Properties view:

  • Set Size > H to 1024.
  • Next to Size > W, select the Action button , and select Reset.

Next, create a header for the page:

  1. From Components, drag a Text component to Rectangle in Navigator.
  2. In Properties, go to the Text tab and set:
    • Text to Welcome.
    • Style Name to Bold.
    • Size to 32 px.
  3. On the Layout tab set the anchors and margins to:
    • Top, 100
    • Left, 50

    {Setting the anchors and margins in the Layout tab of the Properties view.}

Now, with the first page done, create two more pages in the same way. For these pages, set the text to About Us and Contact Us respectively.

You can change the file that you are working on from the dropdown menu in the toolbar. Now, select Screen01.ui.qml from this menu to go back to your main page.

{Changing between files using the dropdown menu.} {Changing the file in top toolbar.}

You can see the pages you created under My Components in the Components view. To edit a component, right-click it in Components and select Edit Component

{The newly created pages in My Components in the Components view.}

Organizing the pages

To organize the pages vertically:

  1. From Components, drag each of the pages to columnLayout in Navigator.

    {The added components in the Navigator view.}

  2. Select columnLayout in Navigator and in Properties:
    • Next to Size > W and Size > H, select the Action button and select Reset.
    • Set Column Spacing to 0.
  3. Select flickable in Navigator, and in Properties:
    • Next to Size > W and Size > H, select the Action button and select Reset.
    • Set Content size > H to 3072.
    • On the Layout tab, select Fill parent component.

You must also create a scrollbar to scroll the web application. You create vertical and horizontal scrollbars that are visible only when the content doesn't fit in the window, similar to web browser scrollbars.

To create the scrollbar, go to the Code view and enter the scrollbar code inside the Flickable component:

Flickable {
  id: flickable
  anchors.fill: parent
  contentHeight: 3072
 ScrollBar.vertical: ScrollBar {
      policy: flickable.contentHeight > flickable.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
      width: 20
  }
  ScrollBar.horizontal: ScrollBar {
      policy: flickable.contentWidth > flickable.width ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
      height: 20
  }
  ...

To align the scrollbar to the right and bottom side of the window, set the height and width of the main rectangle, so that it adapts to the window size:

  1. In Navigator, select Rectangle.
  2. In Properties, select the Binding button next to Width and select Set Binding.
  3. Enter Window.width

    {Window.width set in Binding Editor.}

  4. Repeat step 2 and 3 for Height and set the value to Window.height.

Creating the navigation

For the final step of the tutorial, you will create the navigation for the web page using the buttons that you created earlier.

First, create an animation to use when scrolling between the different pages:

  1. From Components, drag a Number Animation to Rectangle in Navigator.
  2. In Properties, set:
    • Target to flickable.
    • Property to contentY.
    • Duration to 200.

Next, connect the buttons to the number animation to scroll the content vertically to the correct place:

  1. In Navigator, select rectangle and in Properties set:
    • Height to 40.
    • Fill color to #e0e0e0.
    • Z stack to 1.
  2. Select the Binding button next to Width and select Set Binding.
  3. Enter parent.width.

    {parent.width set in Binding Editor.}

  4. In Navigator:
    1. Select Button and on the Button tab in Properties, set Text to Home.
    2. Select Button1 and on the Button tab in Properties, set Name to About Us.
    3. Select Button2 and on the Button tab in Properties, set Name to Contact Us.
  5. In Code, enter connections for each of the buttons to run the number animation when pressed.
    Button {
          id: button
          text: qsTr("Home")
          Connections {
              target: button

              onPressed: {
                  numberAnimation.to = 0
                  numberAnimation.start()
              }
          }
      }

      Button {
          id: button1
          text: qsTr("About Us")
          Connections {
              target: button1

              onPressed: {
                  numberAnimation.to = 1024
                  numberAnimation.start()
              }
          }
      }

      Button {
          id: button2
          text: qsTr("Contact Us")
          Connections {
              target: button2

              onPressed: {
                  numberAnimation.to = 2048
                  numberAnimation.start()
              }
          }
      }

Previewing the application

To preview your application in the live preview, select Alt + P. You can also go to File > Share Application Online to share and preview your application in a web browser.

Available under certain Qt licenses.
Find out more.