Question

我正在尝试使用列/转发器中的行/转发器创建两行矩形。我看到的结果是矩形行堆叠在一起。我希望看到一排蓝色的矩形，蓝色排下面有一排绿色的矩形。看来这应该是可能的。关于我做错了什么想法？

我认为代码示例将有助于说明我要完成的任务。

这是我的main.qml

import QtQuick 2.2

Rectangle {
    visible: true
    width: 640
    height: 480
    color: 'black'
    border.color: 'white'

    RectRow {
       id: rectRow
       startX: 10
       startY: 10
       rectVals: [{count: 4, color: 'blue'}, {count: 2, color: 'green'}]
    }
}

这是我的RectRow.qml

import QtQuick 2.2

Item {
    property var rectVals
    property alias startX: rectCol.x
    property alias startY: rectCol.y
    property string rectBorderColor: '#ffffff'

    Column {
        id: rectCol
        Repeater {
            id: repeater
            model: rectVals
            Item {
               height: 50
               Row {
                   property string rectColor: modelData.color
                   Repeater {
                       model: modelData.count
                       Rectangle {
                           width: 100
                           height: 50
                           color: parent.rectColor
                           border.color: rectBorderColor
                       }
                   }
               }
            }
        }
    }
}

Answer 1

与QML Form layout (GridLayout) troubles中一样，您需要为Item指定宽度：

import QtQuick 2.2

Item {
    property var rectVals
    property alias startX: rectCol.x
    property alias startY: rectCol.y
    property string rectBorderColor: '#ffffff'

    Column {
        id: rectCol
        Repeater {
            id: repeater
            model: rectVals
            Item {
               width: row.width
               height: 50
               Row {
                   id: row
                   property string rectColor: modelData.color
                   Repeater {
                       model: modelData.count
                       Rectangle {
                           width: 100
                           height: 50
                           color: parent.rectColor
                           border.color: rectBorderColor
                       }
                   }
               }
            }
        }
    }
}

或者完全删除它;它似乎没必要。

列/转发器中的Qml嵌套行/转发器

1 个答案: