CODEWITHSUNDEEP
qml
Vincent Vega
Vincent Vega

Reputation: 137

Qml nested row/repeater in a column/repeater

I am trying to create two rows of rectangles using a row/repeater within a column/repeater. The results I am seeing are that the rows of rectangles are stacked on top of each other. I expected to see a blue row of rectangles with a green row of rectangles beneath the blue row. It seems like this should be possible. Any ideas on what I am doing wrong?

I think a code example will help illustrate what I am trying to accomplish.

Here is my 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'}]
    }
}

Here is my 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
                       }
                   }
               }
            }
        }
    }
}

Upvotes: 0

Views: 5330

Answers (1)

Mitch
Mitch

Reputation: 24406

As in QML Form layout (GridLayout) troubles, you need to give the Item a width:

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

Or just remove it altogether; it doesn't seem to be necessary.

Upvotes: 2

Related Questions