QML orientation observer

From Qt Wiki
Jump to: navigation, search
This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

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 && changeOfHeight)} onHeightChanged: {changeOfHeight = true; newOrientation = (changeOfWidth && changeOfHeight)}

onNewOrientationChanged: {

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

if (width > height) {

// landscape
} else {
// portrait


For Qt 5.2 and greater:

import QtQuick.Window 2.2 then in your code: property bool isPortrait: Screen.primaryOrientation === Qt.PortraitOrientation || Screen.primaryOrientation === Qt.InvertedPortraitOrientation

onIsPortraitChanged: console.log("isPortrait", isPortrait)

The Screen object does not provide signals for when it's members change directly, but you can create your own via binding to the Screen object's properties.

This binding will be fired after the height and width changes are completed, so it's safe to recalculate your metrics or animations based on the new properties at this time.