CODEWITHSUNDEEP
qtqml
Nigel Sharp
Nigel Sharp

Reputation: 97

Why do my nested ListViews only show one element of the outer model?

I'm following the code pattern of my unavailable predecessor - using nested ListView's to implement a TreeView-like interface. I'd prefer not to use a TreeView, purely to keep the same patterns throughout the code, rather than introducing more patterns. But I can't get the basics to work with a very simple piece of code!

I've tried looking for a definitive QML/QtQuick reference book but my searches mostly point to people asking why there isn't one. I find my self fighting against QML rather than working WITH it, a sure sign that I need to hit a book. So Question 2 is what should I read?

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 1.4

Window {
    id: theWindow
    visible: true
    width: 640
    height: 480

    ListModel {
        id: outerModel
        ListElement{ display: "One" }
        ListElement{ display: "Two" }
        ListElement{ display: "Three" }
    }
    ListModel {
        id: innerModel
        ListElement{ display: "A" }
        ListElement{ display: "B" }
    }
    Column{
        ListView {
            model: outerModel
            height: 100
            width: 200
            delegate: Column {
                Text {
                    text: display
                }
                ListView {
                    model: innerModel
                    height: 100
                    width: 200
                    delegate: Text {
                        text: display
                    }
                } // ListView inner
            } //delegate Column
        } // ListView outer
    } // Column
} // Window

I'd expect a result similar to:

One
A
B
Two
A
B
Three
A
B

But I only get

One
A
B

Upvotes: 0

Views: 190

Answers (1)

augre
augre

Reputation: 2051

The problem is the fixed height of 100px on both of your ListViews.

Remove the first wrapping Column and set a dyamic height on the inner ListView based on content:

ListView {
    model: outerModel
    height: parent.height // <====
    width: 200
    delegate: Column {
        Text {
            text: display
        }
        ListView {
            model: innerModel
            height: contentHeight // <====
            width: 200
            delegate: Text {
                text: display
            }
        }
    }
}

(or implement an actual TreeView :))

Upvotes: 1

Related Questions