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.

QML orientation observer: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
In one of my mobile <span class="caps">QML</span> applications, I need to know when the handset orientation changes. The runtime knows but it doesn’t offer a signal to my code. Here is a <span class="caps">QML</span> hack that observes when orientation changes. It watches both height and width for changes. When they have both changed, it sets a boolean property to ‘true’. This works on handsets because both height and width change when orientation changes. It probably won’t work on a desktop because there it’s easy to change one without the other.
In one of my mobile QML applications, I need to know when the handset orientation changes. The runtime knows but it doesn't offer a signal to my code. Here is a QML hack that observes when orientation changes. It watches both height and width for changes. When they have both changed, it sets a boolean property to 'true'. This works on handsets because both height and width change when orientation changes. It probably won't work on a desktop because there it's easy to change one without the other.


===Categories:===
<code>


* [[:Category:snippets|snippets]]
/*<br /> Hack to observe changes in orientation from portrait to landscape in a Rectangle.
 
Observation: On handsets, both the width and the height of the<br /> Rectangle will change when orientation changes. There is no way to<br /> catch both changes at the same time, so we catch them individually<br /> and set corresponding bools so we can remember the events. When we<br /> observe that both flags are 'true', we determine the orientation<br /> and set both bools back to 'false'.<br />*/<br />property bool changeOfWidth: false<br />property bool changeOfHeight: false<br />property bool newOrientation: false
 
onWidthChanged: {changeOfWidth = true; newOrientation = (changeOfWidth &amp;&amp; changeOfHeight)}<br />onHeightChanged: {changeOfHeight = true; newOrientation = (changeOfWidth &amp;&amp; changeOfHeight)}
 
onNewOrientationChanged: {<br /> if (newOrientation) {<br /> changeOfWidth = false;<br /> changeOfHeight = false;
 
if (width &gt; height) {<br /> // landscape<br /> console.log(&quot;landscape&amp;quot;)<br /> } else {<br /> // portrait<br /> console.log(&quot;portrait&amp;quot;)<br /> }<br /> }<br />}
 
</code>

Revision as of 10:46, 24 February 2015

In one of my mobile QML applications, I need to know when the handset orientation changes. The runtime knows but it doesn't offer a signal to my code. Here is a QML hack that observes when orientation changes. It watches both height and width for changes. When they have both changed, it sets a boolean property to 'true'. This works on handsets because both height and width change when orientation changes. It probably won't work on a desktop because there it's easy to change one without the other.

/*<br /> Hack to observe changes in orientation from portrait to landscape in a Rectangle.

Observation: On handsets, both the width and the height of the<br /> Rectangle will change when orientation changes. There is no way to<br /> catch both changes at the same time, so we catch them individually<br /> and set corresponding bools so we can remember the events. When we<br /> observe that both flags are 'true', we determine the orientation<br /> and set both bools back to 'false'.<br />*/<br />property bool changeOfWidth: false<br />property bool changeOfHeight: false<br />property bool newOrientation: false

onWidthChanged: {changeOfWidth = true; newOrientation = (changeOfWidth &amp;&amp; changeOfHeight)}<br />onHeightChanged: {changeOfHeight = true; newOrientation = (changeOfWidth &amp;&amp; changeOfHeight)}

onNewOrientationChanged: {<br /> if (newOrientation) {<br /> changeOfWidth = false;<br /> changeOfHeight = false;

if (width &gt; height) {<br /> // landscape<br /> console.log(&quot;landscape&amp;quot;)<br /> } else {<br /> // portrait<br /> console.log(&quot;portrait&amp;quot;)<br /> }<br /> }<br />}