Editing 2D Content

You design applications in the Form Editor by placing items into it.

"Form Editor view"

Resizing Items

When you select items in the Form Editor, selection handles appear around their edges and in their corners. You can drag the selection handles to resize items.

Snapping to Parent and Sibling Items

When you are working on a design, you can use snapping to align items in the Form Editor. Click the button to have the items snap to their parent or sibling items. Snapping lines automatically appear to help you position the items. Click the button to anchor the item to the items that you snap to.

Choose Tools > Options > Qt Quick > Qt Quick Designer to specify settings for snapping. In the Parent item padding field, specify the distance in pixels between the parent item and the snapping lines. In the Sibling item spacing field, specify the distance in pixels between sibling items and the snapping lines.

The following image shows the snapping lines (1) when Parent item padding is set to 5 pixels.

"Snapping lines on canvas"

Hiding Item Boundaries

The Form Editor displays the boundaries of items. To hide them, select the button.

Previewing Component Size

The width and height of the root item in a QML file determine the size of the component. You can reuse components, such as buttons, in different sizes in other QML files and design UIs for use with different device profiles, screen resolution, or screen orientation. The component size might also be zero (0,0) if its final size is determined by property bindings.

To experiment with different component sizes, enter values in the Override Width and Override Height fields (1) on the canvas toolbar. The changes are displayed in the Form Editor (2) and in the States view (3), but the property values are not changed permanently in the QML file. You can permanently change the property values in the Properties view (4).

"Canvas width and height"

To set the initial size of the root item, select Tools > Options > Qt Quick > Qt Quick Designer and specify the item width and height in the Root Item Init Size group.

Specifying Canvas Size

To change the canvas size, select Tools > Options > Qt Quick > Qt Quick Designer and specify the canvas width and height in the Canvas group.

Refreshing the Form Editor Contents

When you open QML files in the Design mode, the items in the file are drawn in the Form Editor. When you edit the item properties, the QML file and the contents of the editor might get out of sync. For example, when you change the position of an item within a column or a row, the new position might not be displayed correctly in the Form Editor.

To refresh the contents of the Form Editor, press R or select the (Reset View) button.

© 2020 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.