- Qt Creator Manual
- Editing 2D Content
- Qt Creator Manual 4.14.2

Creating Components ◦ Shapes

# Editing 2D Content

You design applications in the Form Editor view by placing 2D components and assets into it.

When you select items in Form Editor, markers appear around their edges and in their corners. Depending on the shape of the cursor, you can move, resize, or rotate the item by dragging it. The following image shows the move cursor.

## Resizing 2D Items

When the resize cursor is displayed, you can drag the selection handles to resize items.

## Rotating 2D Items

When the rotation cursor is displayed in one of the corners of an item, you can drag clockwise or counter-clockwise to freely rotate the item around its origin in Form Editor.

Additionally, press Shift or Alt to rotate items in steps of 5 or 45 degrees, respectively.

You can set the origin in the Origin field in the Advanced tab in the Properties view. There, you can also enter the value of the Rotation property in degrees.

## Zooming

You can use the zoom buttons on the toolbar to zoom into and out of Form Editor or select the zoom level as a percentage from a list. More buttons are availabe for zooming to fit all content in the view or zooming to fit the currently selected components.

The following table lists the zoom buttons:

Icon | Tooltip
--- | ---
| Zoom in
| Zoom out
| Zoom to fit all content
| Zoom to fit the current selection

## Snapping to Parent and Sibling Items

When you are working on a design, you can use snapping to align items in 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. Only one snapping button can be selected at the time. Selecting one snapping button automatically deselects the others.

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.

## Hiding Item Boundaries

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 view (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).

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.

## Setting Canvas Color

If you set the background of the root item of your component transparent, the canvas color can make it difficult to see the component you are working on. To make components more visible, you can select the canvas color in the list. By default, the color is transparent. Setting the canvas color does not affect the background color of your UI or components in any way.

## Refreshing the Form Editor Contents

When you open QML files in the Design mode, the items in the file are drawn in 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 Form Editor.

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

## Context Menu

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

To Learn About | Go To
--- | ---
Arrange | Arranging Items
Edit | Showing and Hiding Items
Anchors | Setting Anchors and Margins
Position | Using Positioners
Layout | Using Layouts
Stacked Container | Lists and Other Data Models
Timeline | Creating Timelines
Edit Color | Editing Properties Inline
Edit Annotation | Annotating Designs
Merge File with Template | Merging Files with Templates
Move Component into Separate File | Moving Components into Separate Files
Add New Signal Handler | Adding Signal Handlers
Go to Implementation | Using Qt Quick UI Forms
Go into Component | Moving Within Components

Creating Components ◦ Shapes