Qml Grid、Column 和 RowLayout 不适用于 LayoutMirroring答案

【问题标题】：Qml Grid, Column, and RowLayout does not work with LayoutMirroringQml Grid、Column 和 RowLayout 不适用于 LayoutMirroring
【发布时间】：2013-08-22 09:20:26
【问题描述】：

我正在编写一个应该支持 RTL 和 LTR 语言的 qml 应用程序，并且界面需要一些灵活，并且锚点可能不会产生良好的 UI

所以我打算使用 qml Grid、Column 和 RowLayout，它们工作得很好，但我使用时没有得到镜像

LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true

有没有办法将这些布局组件与 LayoutMirroring.enabled: true 一起使用如果不是，如何为 qml 定位器（行、列和网格）设置宽度和高度以填充边界项的宽度和高度

【问题讨论】：

标签： c++ qt qml

【解决方案1】：

LayoutMirroring 不适用于 RowLayout、ColumnLayout 或 GridLayout。您可以改用 Row[View]、Column[View] 或 Grid[View]。请参阅http://qt-project.org/doc/qt-5.1/qtquick/qml-qtquick2-layoutmirroring.html 了解更多信息。

下面是 qml 定位器的简单示例：

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
            }
        }
    }
}

更改列数并添加或删除一些矩形，看看它是否有效。

【讨论】：

【解决方案2】：

在 Qt 5.2 RowLayout 中，ColumnLayout 和 GridLayout 都有 layoutDirection 属性来支持 RTL 布局

【讨论】：