Managing Item Hierarchy

The Navigator view displays the items in the current QML file and their relationships. Items (1) are listed in a tree structure, below their parent (2). You can preview items by hovering the mouse over them (3).

"Navigator with item preview"

You can select items in the Navigator view to edit their properties in the Properties view. Items can access the properties of their parent item. To select items in the Form Editor view, right-click an item, and select another item in the Selection submenu.

Typically, child items are located within the parent item in Form Editor. However, they do not necessarily have to fit inside the parent item. For example, you might want to make a mouse area larger than the rectangle or image beneath it.

"Mouse area for a button"

When you copy an item, all its child items are also copied. When you remove an item, the child items are also removed.

Select context menu commands to apply commands to items. The availability of the commands depends on the item type. For example, you can change the source of an Image type by selecting Change Source URL in the context menu.

Showing and Hiding Items

To show and hide items in Form Editor when focusing on specific parts of the application, click in Navigator.

To change the visibility of an item in the application code, select the Visibility check box in the Properties view or select Edit > Visibility in the context menu.

You can also set the Opacity field to 0 in Properties to hide items in the UI that you want to apply animation to.

As all properties, visibility and opacity are inherited from the parent item. To hide or show child items, edit the properties of the parent item.

To hide invisible items in Navigator, click (Filter Tree) and select Show only visible items.

Locking Items

When designing complex applications, it is easy to accidentally modify the properties of an item in one of the Qt Design Studio views in ways that lead to surprising results. For example, Form Editor can become crowded and other items can get in the way when you are trying to select or transform a particular item, so that you end up transforming more items than you wanted to.

To lock items that you are not currently editing and their children, click in Navigator. Locked items cannot be handled in any Qt Design Studio views. You can unlock the items when you want to edit them again.

You cannot select locked items in Form Editor or 3D Editor nor access their properties in Properties.

If you attempt to remove a state that changes the properties of a locked item, you are prompted to confirm the removal.

If you have added easing curves to keyframe animations, you can lock and unlock them in the Curve Editor view. If you lock the items that contain the easing curves, the lock status is synchronized between Navigator and Curve Editor.

Arranging Items

You can view the order of items in a QML file in Navigator and Text Editor. The order of items in the file also determines the order in which they are drawn in Form Editor. By default, items that are located at the top of the file are listed at the bottom of the Navigator tree and behind overlapping items in Form Editor. To list the items in the order in which they appear in the file, as some other tools do, click (Filter Tree), and select Reverse item order.

To move an item to the top or bottom of the tree within its parent, right-click it in Navigator or Form Editor and select Arrange > Bring to Front or Send to Back. To move an item up or down, select Bring Forward or Send Backward.

To reverse the order of the selected items in Navigator and Text Editor, select Arrange > Reverse.

You can also drag and drop the item to another position in the tree or use the arrow buttons to move the item in the tree. You can use the left and right arrow buttons to change the parent of the item.

"Navigator buttons"

When you drag and drop instances of QML types to Form Editor, the new item is added as a child of the item beneath it. When you move the items, it is not possible to determine whether you want to adjust their position or attach them to a new parent item. Therefore, the parent item is not automatically changed. To change the parent of the item, press down the Shift key before you drag and drop the item into a new position. The topmost item under the cursor becomes the new parent of the item.

Context Menu

The following table summarizes the Navigator and Form Editor context menu items and provides links to more information about them.

To Learn AboutGo To
ArrangeArranging Items
EditShowing and Hiding Items
AnchorsSetting Anchors and Margins
PositionUsing Positioners
LayoutUsing Layouts
Stacked ContainerLists and Other Data Models
TimelineCreating Timelines
Event ListSimulating Events
Edit ColorEditing Properties Inline
Edit AnnotationAnnotating Designs
Merge File with TemplateMerging Files with Templates
Move Component into Separate FileMoving Components into Separate Files
Add New Signal HandlerAdding Signal Handlers
Go to ImplementationUsing Qt Quick UI Forms
Go into ComponentMoving Within Components

Available under certain Qt licenses.
Find out more.