Log In UI - Part 2

Illustrates how to position UI components on pages using anchors and positioners.

"Log In UI"

Log In UI - Part 2 is the second in a series of examples that build on each other to illustrate how to use Qt Design Studio to create a simple UI with some basic UI components, such as pages, buttons, and entry fields. Part 2 describes how to position the UI components on pages to create a scalable UI.

To ensure that the layout is responsive and all the UI elements stay in their proper places when you resize the UI on the desktop or on devices with different screen sizes, you will use anchors and positioners.

These instructions build on Log In UI - Part 1.

The Learn Qt Quick sections provide additional information about the features of QML and Qt Quick that are relevant to the task at hand.

Anchoring UI Components

First, you will add a new rectangle to the Form Editor and move all the current UI components to it to create a new page. Then, you will anchor the static elements on the page, that is the logo image (logo) and page title (pageTitle), to the page. When you created the project using the new project wizard in Part 1 of this example, the wizard anchored pageTitle to the vertical and horizontal center of the page. Therefore, you will only need to replace the vertical anchor of pageTitle with a top anchor to align it with logo on the page.

To preview the changes that you make to the UI while you make them, select the (Show Live Preview) button on the Form Editor toolbar or press Alt+P.

To anchor components on a page:

  1. Open Screen01.ui.qml for editing in the Design mode Form Editor.
  2. Select the rectangle that forms the UI background in the Navigator, and change its id to root in the Properties view.
  3. Drag and drop a Rectangle from the Library to root, and change its id to loginPage.
  4. In the Layout view, select the (Fill Parent Item) button to anchor the page to the root item on all sides.
  5. Select all the other UI elements below root in the Navigator (press the Shift key for multiple selection) and drag them to loginPage.
  6. Select logo in the Navigator.
  7. Select the (Top) and (Left) anchor buttons to anchor logo to the top left corner of its parent (the loginPage) with 10-pixel margins.
  8. Select pageTitle in the Navigator.
  9. Deselect the (Vertical Center) button to remove the anchor, and then select the Top button to anchor the title to the top of the page with a 70-pixel margin.
  10. Select File > Save or press Ctrl+S to save your changes.

Your page now should look something like this in the Design mode and live preview:

"Login page in the Design mode"

Learn Qt Quick - Anchors

In an anchor-based layout, each QML type can be thought of as having a set of invisible anchor lines: top, bottom, left, right, fill, horizontal center, vertical center, and baseline.

Anchors enable placing an object either adjacent to or inside of another object, by attaching one or more of the object's anchor lines to the anchor lines of the other object. If an object changes, the objects that are anchored to it will adjust automatically to maintain the anchoring.

For more information, see Positioning with Anchors.

Using Column Positioners

You will now add two entry fields to the page and position them in a column to learn another method of positioning items. Next, you will position the push buttons on the page in another column. Finally, you will anchor the columns to the page to enable their positions to change when the screen size changes.

To add entry fields to the page:

  1. In Library > QML Types, select the + QtQuick.Controls button to display the Qt Quick Controls 2 types in the tab:

  2. Drag and drop two instances of the Text Field type to the Form Editor.
  3. Select one of the text fields in the Navigator, and change its id to usernameField in the Properties view.
  4. In the Geometry group, Size field, set the width of the field to 300 pixels.
  5. In the Placeholder field, enter Username and select tr to mark the text translatable.

    "Text field properties"

  6. In the Text field, delete the default text to make the placeholder text visible on the Form Editor. The text value always takes precedence over the placeholder text value.
  7. Select the other text field, and change its id to passwordField, placeholder text to Password, and width to 300 pixels. Also remove the default text.

You will now position the fields and buttons as columns:

  1. Select usernameField and passwordField in the Navigator, and right-click on either item to open a context menu.
  2. Select Position > Position in Column to position the fields on top of each other in the Form Editor.
  3. Select the column in the Navigator and change its id to fieldColumn in Properties.
  4. In the Spacing field, set the spacing between the fields to 5 pixels.

    "Column properties"

  5. Select loginButton and registerButton, and then select Position > Position in Column to position them in a column.
  6. Select the button column, change its id to buttonColumn, and set the spacing between the buttons to 5 pixels, as above.

You will now anchor the field and button columns to the page:

  1. Select fieldColumn in the Navigator.
  2. In Properties > Layout, select the Top button to anchor the top of the button column to the top of its parent (the loginPage) with a 200-pixel margin.
  3. Select the (Horizontal Center) button to center the field column horizontally on the page.
  4. Select buttonColumn in the Navigator.
  5. In Properties > Layout, select the (Bottom) button to anchor the bottom of the button column to the bottom of its parent (the loginPage) with a 50-pixel margin.
  6. Select the Horizontal Center button to center the button column horizontally on the page.
  7. Select File > Save or press Ctrl+S to save your changes.

The second iteration of your UI is now ready and should look something like this in the Design mode and live preview:

"Login page in the Design mode"

Learn Qt Quick - Positioners

Qt Quick provides built-in positioner items. For many use cases, the best positioner to use is a simple grid, row, or column, and Qt Quick provides items that will position children in these formations in the most efficient manner possible. For more information about using pre-defined positioners, see Item Positioners.

For more complicated UI designs, you can use QML types from the Qt Quick Layouts module.

Next Steps

To learn more about positioning items in Qt Design Studio, see Positioning Items in UIs.

To learn how to add a second page and move to it from the main page, see the next example in the series, Log In UI - Part 3.

Files:

Images:

Available under certain Qt licenses.
Find out more.