[Solved] Nested ListView layout issues



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


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



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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.