QML orientation observer: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 3: Line 3:
<code>
<code>


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


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


onNewOrientationChanged: {<br /> if (newOrientation) {<br /> changeOfWidth = false;<br /> changeOfHeight = false;
onNewOrientationChanged: {
if (newOrientation) {
changeOfWidth = false;
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 />}
if (width > height) {
// landscape
console.log("landscape")
} else {
// portrait
console.log("portrait")
}
}
}


</code>
</code>

Revision as of 11:06, 25 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.

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

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

onWidthChanged: {changeOfWidth = true; newOrientation = (changeOfWidth &amp;&amp; changeOfHeight)}
onHeightChanged: {changeOfHeight = true; newOrientation = (changeOfWidth &amp;&amp; changeOfHeight)}

onNewOrientationChanged: {
 if (newOrientation) {
 changeOfWidth = false;
 changeOfHeight = false;

if (width > height) {
 // landscape
 console.log("landscape")
 } else {
 // portrait
 console.log("portrait")
 }
 }
}