Grandchild breaks repeater

Question

Why does this work: (works = each delegate text appears below the previous one)

    Column {
        Repeater {
            model: ['test1', 'test2', 'test3']
            delegate: Text {
                text: modelData
            }
        }
    }

But this breaks the layout, as in each text appears on top of each other:

    Column {
        Repeater {
            model: ['test1', 'test2', 'test3']
            delegate: Item {
                Text {
                    text: modelData
                }
            }
        }
    }

The same thing happens if I create a separate component:

MyTextItem.qml

import QtQuick 2.5

Item {
    property string myText: ''
    Text {
       text: myText
    }
}

And then:

    Column {
        Repeater {
            model: ['test1', 'test2', 'test3']
            delegate: MyTextItem {
                myText: modelData
            }
        }
    }

score 5 · Accepted Answer · answered Mar 31 '20 at 16:16

The problem is simple: Column is based on the geometry of the delegate's topItem, in your initial case Text has an implicitWidth and implicitHeight that is based on the content but an Item has geometry of 0x0 causing them to overlap. The solution is to establish the appropriate geometry for the Item, for example that it takes the same size of the Text:

Column {
    Repeater {
        model: ['test1', 'test2', 'test3']
        delegate: Item{
            implicitWidth: txt.implicitWidth
            implicitHeight: txt.implicitHeight
            Text {
                id: txt
                text: modelData
            }
        }
    }
}

Yes, this works. I think there should be a warning generated when you do this, as this is very easy to miss and I think the far more common use case is to have items be "lined up" rather than stacked. — Juha Untinen, Mar 31 '20 at 21:25

Grandchild breaks repeater

1 Answers1