QML Right-to-left User Interfaces

Layout mirroring

The attached property LayoutMirroring is provided as a convenience for easily implementing right-to-left support for existing left-to-right Qt Quick applications. It mirrors the behavior of Item anchors, the layout direction of positioners and model views, and the explicit text alignment of QML text elements.

You can enable layout mirroring for a particular Item:

 Item {
     height: 50; width: 150

     LayoutMirroring.enabled: true
     anchors.left: parent.left   // anchor left becomes right

     Row {
         // items flow from left to right (as per default)
         Child {}
         Child {}
         Child {}
     }
 }

Or set all child elements to also inherit the layout direction:

 Item {
     height: 50; width: 150

     LayoutMirroring.enabled: true
     LayoutMirroring.childrenInherit: true
     anchors.left: parent.left   // anchor left becomes right

     Row {
         // setting childrenInherit in the parent causes these
         // items to flow from right to left instead
         Child {}
         Child {}
         Child {}
     }
 }

Applying mirroring in this manner does not change the actual value of the relevant anchor, layoutDirection or horizontalAlignment properties. You can use LayoutMirroring.enabled to query whether the mirroring is in effect.

Note that application layouts and animations that are defined using x property values (as opposed to anchors or positioner elements) are not affected by the LayoutMirroring attached property. Therefore, adding right-to-left support to these types of layouts may require some code changes to your application, especially in views that rely on both the anchors and x coordinate-based positioning. Here is one way to use the LayoutMirroring attached property to apply mirroring to an item that is positioned using x coordinates:

 Rectangle {
     color: "black"
     height: 50; width: 50
     x: mirror(10)
     function mirror(value) {
         return LayoutMirroring.enabled ? (parent.width - width - value) : value;
     }
 }

Not all layouts should necessarily be mirrored. There are cases where a visual element is positioned to the right side of the screen for improved one-handed use, because most people are right-handed, and not because of the reading direction. In the case that a child element should not be affected by mirroring, set the LayoutMirroring.enabled property for that element to false.

Qt Quick is designed for developing animated, fluid user interfaces. When mirroring your application, remember to test that the animations and transitions continue to work as expected. If you do not have the resources to add right-to-left support for your application, it may be better to just keep the application layouts left aligned and just make sure that text is translated and aligned properly.

 Image {
     source: "arrow.png"
     mirror: true
 }

 QT_TRANSLATE_NOOP("QApplication", "QT_LAYOUT_DIRECTION");

 lupdate myapp.qml -ts myapp.ts

 <context>
     <name>QApplication</name>
     <message>
         <location filename="myapp.qml" line="33"/>
         <source>QT_LAYOUT_DIRECTION</source>
         <translation type="unfinished">RTL</translation>
     </message>
 </context>

 qmlviewer myapp.qml -translation myapp.qm

 qmlviewer myapp.qml -reverse

 QApplication app(argc, argv);
 app.setLayoutDirection(Qt::RightToLeft);