Grandchild breaks repeater

43 views Asked by At

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

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

enter image description here

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

enter image description here

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

enter image description here

1

There are 1 answers

1
eyllanesc On BEST ANSWER

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