LayoutMirroring QML Element

TheLayoutMirroring attached property is used to mirror layout behavior.More...

• List of all members, including inherited members

Properties

• childrenInherit : bool
• enabled : bool

Detailed Description

TheLayoutMirroring attached property is used to horizontally mirrorItem anchors,positioner elements (such asRow andGrid) and views (such asGridView and horizontalListView). Mirroring is a visual change: left anchors become right anchors, and positioner elements likeGrid andRow reverse the horizontal layout of child items.

Mirroring is enabled for an item by setting theenabled property to true. By default, this only affects the item itself; setting thechildrenInherit property to true propagates the mirroring behavior to all child elements as well. If theLayoutMirroring attached property has not been defined for an item, mirroring is not enabled.

The following example shows mirroring in action. TheRow below is specified as being anchored to the left of its parent. However, since mirroring has been enabled, the anchor is horizontally reversed and it is now anchored to the right. Also, since items in aRow are positioned from left to right by default, they are now positioned from right to left instead, as demonstrated by the numbering and opacity of the items:

import QtQuick 1.1Rectangle {LayoutMirroring.enabled:trueLayoutMirroring.childrenInherit:truewidth:300;height:50color:"yellow"border.width:1Row {anchors {left:parent.left;margins:5 }y:5;spacing:5Repeater {model:5Rectangle {color:"red"opacity: (5-index)/5width:40;height:40Text {text:index+1anchors.centerIn:parent                }            }        }    }}

Layout mirroring is useful when it is necessary to support both left-to-right and right-to-left layout versions of an application to target different language areas. ThechildrenInherit property allows layout mirroring to be applied without manually setting layout configurations for every item in an application. Keep in mind, however, that mirroring does not affect any positioning that is defined by theItemx coordinate value, so even with mirroring enabled, it will often be necessary to apply some layout fixes to support the desired layout direction. Also, it may be necessary to disable the mirroring of individual child items (by settingLayoutMirroring.enabled to false for such items) if mirroring is not the desired behavior, or if the child item already implements mirroring in some custom way.

SeeQML Right-to-left User Interfaces for further details on usingLayoutMirroring and other related features to implement right-to-left support for an application.

Property Documentation