Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
Qt Quick Donts: Difference between revisions
No edit summary |
(Add to Advice category.) |
||
| (4 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
[[Category:Developing_with_Qt::Qt Quick]] | [[Category:Developing_with_Qt::Qt Quick]] | ||
[[Category:Advice]] | |||
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. | 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 === | === Fixed Sizes and Positions === | ||
| Line 11: | Line 9: | ||
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. | 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: | When centering an element: | ||
<code> | |||
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; | |||
} | |||
} | |||
} | |||
</code> | |||
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: | In this case, you should instead use: | ||
<code>anchors.centerIn: parent</code> | |||
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. | 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 | === See also === | ||
* [[Qt Quick Best Practices]] | |||
Latest revision as of 09:05, 11 July 2019
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.