Search code examples
qtqmlrepeaterqt5.5

Grandchild breaks repeater


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


Solution

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