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

[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 {
id:outer
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 {
id:outer
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
}
}
}
}
}

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

[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