Qt QML components

In addition to the Esri QML components that are available for you to design the user interface of your app, you also have access to all of Qt's own QML components. This topic describes the most useful components. For a full list of Qt QML types, refer to the Qt Project documentation.

When defining the scope of your app's user interface, there are five QML types that are most useful to you:

  • Positioners
  • Anchors
  • Layouts
  • Repeaters
  • States

Positioners

Positioners are container items that manage the positions of items within your user interface. Positioner types include row, column, grid, and flow. Organizing your items based on any of these allows you to arrange them in a regular layout that is well suited to resizable user interfaces. For example, organize your items in a grid, and when you view your app in a portrait orientation you may see a 2 by 5 matrix of items, but switch to landscape and it will automatically rearrange your grid of items to best fit the screen, giving you a 3 by 4 matrix of items.

For more information on positioners, refer to the Qt Project documentation.

Anchors

Each item can be thought to have seven anchor points, and other items can be positioned in relation to these. These points are the top, bottom, left, right, horizontal center, vertical center, and baseline (the line on which text within the item would sit). This is ideal for positioning items relative to each other to create dynamic user interfaces. The anchors remain even when the dimensions or locations of items change. Anchor margins can also be defined, specifying how much space should be left outside an item's anchor.

For more information on anchors, refer to the Qt Project documentation.

Layouts

To use Qt Quick Layouts, you must reference an additional module in your QML file, for example:

import QtQuick.Layouts 2.1

The three layouts are RowLayout, ColumnLayout, and GridLayout. Compared to rows, columns, and grids, using layouts allows for more fine-grained control over item positioning. This includes the ability to specify the alignment of each item in the layout. GridLayouts are also able to set separate column and row spacing, span items across rows and columns, as well as specify an individual grid cell for an item. Layouts can also be used to set the preferred maximum and minimum widths and heights, as well as the ability to fill width and height, for each item. This is especially useful when designing for dynamic or multiple displays. Layouts can also be mirrored, changing a left-to-right layout into a right-to-left layout.

Repeaters

A repeater object creates items from a template for use with positioners, using data from a model. Combining repeaters and positioners is an easy way to lay out lots of items. A model can be one of the following:

  • Number that indicates the number of delegates to be created by the repeater
  • Free-form list data source—a ListModel
  • String list
  • Object list

The delegate provides a template defining each item instantiated by the repeater. A repeater delegate can access its index within the repeater as well as the model data relevant to the delegate.

For more information on repeaters, refer to the Qt Project documentation.

States

States can be used to show a different view or screen within an app. They can be used to show or hide elements based on the value of a property, to change anchoring, or to change parent objects. Based on the state, you can start, stop, or pause animations or execute scripts. Every item-based component has a state property and a default state. The default state is the empty string ("") and contains all initial property values. Setting the state property to an empty string will load the default state.

For more information on states, refer to the Qt Project documentation.