Nested lists in QT QML

[Raghavendra R M]

HI,Can I create nested lists using QML ListView in Qt QML?If so how can I do it?
I tried doing this by making ListView element as a part of the delegate of the another list.
But only first element of the second list is shown in the view.How can i solve this?

Thanking You

[spirit]

You tried correct. But I can assume that you didn't set dimensions of your delegate, eg width and height.

[Raghavendra R M]

You tried correct. But I can assume that you didn't set dimensions of your delegate, eg width and height.

Hi, here is my qml code...please help me...

Component{
id:slidesdelegate

Item {
id: sdelegate
height: scolumn.height +10
width: sdelegate.ListView.view.width

Column{
id:scolumn
width: parent.width-40;

Text {
id: description
text: model.title
}

Rectangle {
id:viewimages
height: 20
width: 70
color: "#000000"

Text {
id: backtext
text: "View Images"
color: "#ffffff"
}

MouseArea {
id:view
anchors.fill: parent
onClicked: {
slidesView.viewImagesClicked(index);
}
}

}

ListView {
id: insidelist
model: insidemodel
delegate: Text {
id: insidetext
text: name
}
}
}

Rectangle {
width: parent.width; height: 2; color: "#000000"
anchors.bottom: slidesdelegate.bottom
}
}
}

[spirit]

I don't see that you set you delegate for a ListView. It should look like:

...
ListView {
    id: insidelist
    model: insidemodel
    delegate: slidesdelegate
}
...

...
ListView {
    id: insidelist
    model: insidemodel
    delegate: slidesdelegate
}
...

To copy to clipboard, switch view to plain text mode 

[Raghavendra R M]

Hey...if i do like that the application is crashing and i am getting an error like
'QDeclarativeComponent: Cannot create new component instance before completing the previous'
i.e., can we set its delegate as 'slidesdelegate'?because 'insidelist' is a member of 'slidesdelegate' right?

[spirit]

Make a simple test app and try your approach, if it doesn't work, post your test app here.

[Raghavendra R M]

Sorry for the late reply...i tried that in a simple app...but its giving same error..here is my qml code...

import QtQuick 1.0

Rectangle {
width: 360
height: 360

ListModel {
id:model1

ListElement {
name: "name"
}
ListElement {
name: "name"
}
ListElement {
name: "name"
}
}
ListModel {
id:model2
ListElement {
name: "inside"
}
ListElement {
name: "inside"
}
ListElement {
name: "inside"
}
}
ListView {
iduter
model: model1
delegate: listdelegate
}

Component {
id:listdelegate

Item {
height: col.height

Column {
id:col
Text {
id:t1
text: name
}
Text {
id: t2
text: name
}
ListView {
id:insidelist
anchors.fill: parent
model: model2
delegate: listdelegate
}
}
}
}
}

[spirit]

That's the problem in "insidelist"

delegate: listdelegate

It's simple stack-overflow issue.

[Raghavendra R M]

Yes...thank you.
but now i am using a differnt delegate for that but the lists are overlapping as shown here...http://imgur.com/81NwD
and also in the inside list only one item is being shown...

qml code:

import QtQuick 1.0

Rectangle {
width: 360
height: 360

ListModel {
id:model1

ListElement {
name: "name"
}
ListElement {
name: "name"
}
ListElement {
name: "name"
}
}
ListModel {
id:model2
ListElement {
name: "inside"
}
ListElement {
name: "inside"
}
ListElement {
name: "inside"
}
}

Component {
id:delegate2

Item {
height: col2.height;

Column {
id:col2

Text {
id: name1
text: name
}

}
}
}

ListView {
iduter
model: model1
delegate: listdelegate
}

Component {
id:listdelegate

Item {
height: col.height

Column {
id:col
Text {
id:t1
text: name
}
Text {
id: t2
text: name
}
ListView {
id:insidelist
model: model2
delegate: delegate2
}
}
}
}
}

[spirit]

here we go

import QtQuick 1.0
 
Rectangle {
    width: 360
    height: 360
 
    ListModel {
        id: model1
 
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
    }
    ListModel {
        id: model2
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
    }
 
    Component {
        id: delegate2
 
        Item {
            width: 100
            height: col.childrenRect.height
 
            Column {
                id: col2
 
                Text {
                    id: name1
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }
 
    ListView {
        id: outer
        model: model1
        delegate: listdelegate
    }
 
    Component {
        id: listdelegate
 
        Item {
            width: 100
            height: col.childrenRect.height
 
            Column {
                id: col
                Text {
                    id: t1
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
                Text {
                    id: t2
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
                ListView {
                    id: insidelist
                    model: model2
                    delegate: delegate2
                    height: contentItem.height
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }
}

import QtQuick 1.0

Rectangle {
    width: 360
    height: 360

    ListModel {
        id: model1

        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
    }
    ListModel {
        id: model2
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
    }

    Component {
        id: delegate2

        Item {
            width: 100
            height: col.childrenRect.height

            Column {
                id: col2

                Text {
                    id: name1
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }

    ListView {
        id: outer
        model: model1
        delegate: listdelegate
    }

    Component {
        id: listdelegate

        Item {
            width: 100
            height: col.childrenRect.height

            Column {
                id: col
                Text {
                    id: t1
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
                Text {
                    id: t2
                    text: name
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
                ListView {
                    id: insidelist
                    model: model2
                    delegate: delegate2
                    height: contentItem.height
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

[Raghavendra R M]

Hi ! now the overlapping problem is solved...thank you
But again the nested lists are not working right?
i mean the output should have been 'inside' repeated 3 times under each 'name' right?
I'm sorry if i am disturbing you...but i am helpless...

[spirit]

import QtQuick 1.0
 
Rectangle {
    width: 360
    height: 360
 
    ListModel {
        id: model1
 
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
    }
    ListModel {
        id: model2
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
    }
 
    Component {
        id: delegate2
 
        Item {
            width: 100
            height: col2.childrenRect.height
 
            Column {
                id: col2
                anchors.left: parent.left
                anchors.right: parent.right
                Text {
                    id: name1
                    text: name
                }
            }
        }
    }
 
    ListView {
        id: outer
        model: model1
        delegate: listdelegate
        anchors.fill: parent
    }
 
    Component {
        id: listdelegate
 
        Item {
            width: 100
            height: col.childrenRect.height
 
            Column {
                id: col
                anchors.left: parent.left
                anchors.right: parent.right
                Text {
                    id: t1
                    text: name
                }
                Text {
                    id: t2
                    text: name
                }
                ListView {
                    id: insidelist
                    model: model2
                    delegate: delegate2
                    contentHeight: contentItem.childrenRect.height
                    height: childrenRect.height
                    anchors.left: parent.left
                    anchors.right: parent.right
                    clip: true
                }
            }
        }
    }
}

import QtQuick 1.0

Rectangle {
    width: 360
    height: 360

    ListModel {
        id: model1

        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
        ListElement {
            name: "name"
        }
    }
    ListModel {
        id: model2
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
        ListElement {
            name: "inside"
        }
    }

    Component {
        id: delegate2

        Item {
            width: 100
            height: col2.childrenRect.height

            Column {
                id: col2
                anchors.left: parent.left
                anchors.right: parent.right
                Text {
                    id: name1
                    text: name
                }
            }
        }
    }

    ListView {
        id: outer
        model: model1
        delegate: listdelegate
        anchors.fill: parent
    }

    Component {
        id: listdelegate

        Item {
            width: 100
            height: col.childrenRect.height

            Column {
                id: col
                anchors.left: parent.left
                anchors.right: parent.right
                Text {
                    id: t1
                    text: name
                }
                Text {
                    id: t2
                    text: name
                }
                ListView {
                    id: insidelist
                    model: model2
                    delegate: delegate2
                    contentHeight: contentItem.childrenRect.height
                    height: childrenRect.height
                    anchors.left: parent.left
                    anchors.right: parent.right
                    clip: true
                }
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

[Raghavendra R M]

Its solved...!! Thanks a lot...:-) :-) :-)

[mhaugstrup]

Hi

Attempting to fix my similar issue from this older thread.

In the case referenced by the example code above - what should be altered if the inside models where to be unique for each entry in the outside list? Eg produce this output;:

model1:1

model2:1
model2:2
model2:3

model1:2

model3:1
model3:2
model3:3

Thanks!

Mikkel