列/中继器中的Qml嵌套行/中继器

我正在尝试使用列/中继器中的行/中继器创建两行矩形。我看到的结果是，一排排的矩形相互堆叠。我希望看到一排蓝色的矩形，在蓝色的一排下面有一排绿色的矩形。看来这应该是可能的。你知道我做错了什么吗

我认为一个代码示例将有助于说明我试图实现的目标

这是我的

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

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

这是我的

RectRow.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'}]
    }
}

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

如中所示，您需要为项目指定宽度：

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

或者干脆把它全部去掉；这似乎没有必要