[Solved] Nested ListView layout issues

stevenhurd

I'm trying to design a nested QML ListView of items. Eventually the delegates will be more complex items. The biggest issue I'm having is that the layout is turning into a nightmare. The text in the items could potentially be really long and I need it to wrap so that it's all visible. So the delegates themselves needs heights based on the wrapped Text items. Unfortunately with the simple example I have below the text doesn't wrap and I get a warning saying "QML ListView: Binding loop detected for property "height"" for the nested ListView. Any help would be appreciated. Thanks.

@ListView {
anchors.fill: parent
model: 5
delegate:
ListView {
height: contentHeight
width: parent.width

            model: 5
            header: Item {
                height: headerItem.height
                width: parent.width
                Text {
                    id: headerItem
                    text: "This could be a really long string in the header"
                    wrapMode: Text.WordWrap
                }
            }
            delegate: Item {
                height: itemRow.height
                width: parent.width
                Text {
                    id: itemRow
                    text: "This could be a really long string in the lists"
                    wrapMode: Text.WordWrap
                }
            }
        }
}@

Jens

Do you really need to nest the listviews? Since you are hardcoding the height of the listview to be the content height, it sounds like your use case would be easier solved by making the child listview simply a Column with a repeater inside it. That way you wont have problems with nesting flickables.

Ie:

Column {
Repeater {
model: 5
Text { }
}
}

stevenhurd

Thanks Jens! That seems to work great for the example code I gave.

As to whether or not I actually need nested listviews, that's a good question. You are correct that I don't want the nested lists to be flickables but I also eventually need to make each item in the sublists selectable. I'm certainly a QML beginner so I don't know exactly what ListView provides that Repeater does not. From the little experience I have, however, it seems like selectable sublists should be at least easily faked within the Repeaters...

For anyone interested, here's the updated code with Jens' suggested changes:

@ListView {
anchors.fill: parent
model: 5
delegate:
Column {
width: parent.width
Text {
width: parent.width
text: "This could be a really long string in the header"
wrapMode: Text.WordWrap
}

        Repeater {
            width: parent.width
            model: 5
            Text {
                id: itemRow
                width: parent.width
                text: "This could be a really long string in the lists"
                wrapMode: Text.WordWrap
            }
        }
    }
}@