Adding Flow Items

After you create a Flow View component, you can 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. The imported components are listed in Library > Components > My Components.

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

"Custom Flow Item in Library"

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

To add flow items:

  1. Select File > New File or Project > Files and Classes > 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-and-drop components from Library to a flow item in Form Editor or Navigator.
    • Drag a screen from Library > Components My Components to a flow item in Form Editor or Navigator.
  3. In Properties, edit the properties of each flow item.

You can now drag the flow items from Library > Components My Components to the flow view in Form Editor or Navigator. When you have all the flow items in place, you can 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, and Visibility groups.

"Flow Item properties"

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

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

By default, transitions are drawn from action areas to the target flow item. To draw the transitions from the edges of flow items instead, select the Join lines check box.

In the Layout tab, you can use anchors to position the component.

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

Available under certain Qt licenses.
Find out more.