Qt Quick Donts

This article covers what not to do or what is not advisable (DON'Ts), while developing with Qt Quick. The points are made by developers who have made or seen these common mistakes during their work. Please add your recommendations and help this page grow.

Fixed Sizes and Positions

As Qt Quick code can run on devices of varying resolutions, it is important to allow your application to scale up or down. Even if you are set on a selected platform's resolution (eg. 640x360 for Symbian), future devices may be released in a different resolution or you may end up needing to support a different platform (eg 800x600 for Maemo 5 N900). In saying this, most applications may not be able to scale up to a full-blown desktop or scale down to a mobile device.

Another benefit of having dynamic sizes is that if you later decide to change its size through a function or otherwise, the positions and sizes of your layout will change dynamically too. The example below demonstrates this problem.

When centering an element:

Item {
 width: 200; height: 200 //<— Outermost element scales to the size of QMLViewer window
 Rectangle {
 x: 50; y: 50 //<— DON'T
 width: 100; height: 100 //<— DON'T
 color: "red"
 // Later you decide to add an animation:
 Behavior on width { NumberAnimation { duration: 500 } }
 MouseArea {
 anchors.fill: parent
 onPressed: parent.width = 150;
 }
 }
}

The above example will no longer be centered when clicked. If you set the 'x' to 25, the animation would not work properly.

In this case, you should instead use:

anchors.centerIn: parent

on line 4 as it will be able to identify the center for you and avoids pain when changing width or height in the future.

Qt Quick has handled the cross-platform code for you, it's up to you to make sure your code is cross-resolution.

See also

• Qt Quick Best Practices