Adding Flow Items

After you create a Flow View component, use a project wizard template to add a Flow Item component for each screen in the UI.

If you imported your screen designs from a design tool as individual components (.ui.qml files), you can use them as content for flow items like any other components. The imported components are listed in Components > My Components.

If you are building your UI from scratch in Qt Design Studio, add components to the flow items first to create the screens as you would any components. For more information, see Using Components. The flow items that you attach the components to are listed under My Components.

"Custom Flow Item in Components"

Note: You must use the wizard to create the flow items. After you create a flow view, the Flow View module is added to Components. It contains the Flow Item component for applying states to flow items, and solely for that purpose.

To add flow items:

  1. Select File > New File > Qt Quick Files > Flow Item and follow the instructions of the wizard to create flow items for each screen in the UI.
  2. Add content to the flow item in one of the following ways:
    • Drag components from Components to a flow item in the 2D view or Navigator.
    • Drag a screen from Components > My Components to a flow item in the 2D view or Navigator.
  3. In Properties, edit the properties of each flow item.

Now, drag the flow items from Components > My Components to the flow view in the 2D or Navigator view. When you have all the flow items in place, add action areas to them to create transitions between them.

Flow Item Properties

You can specify basic properties for a Flow Item component in the Component, Geometry - 2D, and Visibility sections in the Properties view. Specify flow item properties in the Flow Item section.

"Flow Item properties"

The State change target and Target state properties are used to apply states in flows.

To include another flow view as a flow item into a flow view, select the UI file (.ui.qml) that specifies the flow view in the Loader source field.

Usually, a flow item is inactive and invisible when it is not currently selected in the flow. Especially, all events from the flow item are ignored. To make a flow item always active, so that another flow item within it can respond to events and trigger the opening of a dialog, for example, select the Force active checkbox.

In the flow view, transitions are drawn from action areas to the target flow item by default. To draw the transitions from the edges of flow items instead, select the Join lines checkbox in the Transition Lines section.

In the Advanced section, you can manage the more advanced properties of components.

Available under certain Qt licenses.
Find out more.