Qml Grid, Column, and RowLayout does not work with LayoutMirroring

Question

I am writing a qml application that should support RTL and LTR languages and the interface needs to be some how flexible, and anchors may not produce good UI

So I planned to use qml Grid, Column, and RowLayout, they work good but does not get mirrored when I use

LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true

is there any way to use these layout components with LayoutMirroring.enabled: true and if not how to set width and height for qml positioners (Row,Column,and Grid) to fill thier bounding item width and height

Michael Michael · Accepted Answer · 2013-09-24T16:00:20

LayoutMirroring is not available for RowLayout, ColumnLayout or GridLayout. You can use Row[View], Column[View] or Grid[View] instead. See http://qt-project.org/doc/qt-5.1/qtquick/qml-qtquick2-layoutmirroring.html for more information.

Here is a quick example for qml positioners:

Rectangle {
    width: 640
    height: 480
    color: "#303030"

    Rectangle {
        width: parent.width / 1.1
        height: parent.height / 1.1
        anchors.centerIn: parent
        color: "white"

        Grid {
            id: grid
            anchors.fill: parent

            columns: 2

            spacing: 6
            columnSpacing: spacing
            rowSpacing: spacing


            property int rowCount: Math.ceil(visibleChildren.length / columns)
            property real cellWidth: (width - (columns - 1) * columnSpacing) / columns
            property real cellHeight: (height - (rowCount - 1) * rowSpacing) / rowCount

            Rectangle {
                color: "#aa6666"
                width: grid.cellWidth
                height: grid.cellHeight
            }
            Rectangle {
                color: "#aaaa66"
                width: grid.cellWidth
                height: grid.cellHeight
            }
            Rectangle {
                color: "#9999aa"
                width: grid.cellWidth
                height: grid.cellHeight
            }
            Rectangle {
                color: "#6666aa"
                width: grid.cellWidth
                height: grid.cellHeight
            }
        }
    }
}

Change the number of columns and add or remove some rectangles, to see that it works.

Qml Grid, Column, and RowLayout does not work with LayoutMirroring

2 Answers