ListView is not shown

xalam

I am using Qt 5.4 and wrote a simple example but the ListView will never be shown. It does't complain of any errors either. Here is the code:

@import QtQuick 2.4
import QtQuick.Window 2.2

Window {
visible: true

ListView {
    anchors.fill: parent

    model: listModel

    delegate: Text { text: name }
}

Component {
    id: listModel

    ListModel {
        id: listActualModel

        ListElement {
            name: "Lion"
            place: "Africa"
        }

        ListElement {
            name: "Puma"
            place: "Americas"
        }
    }
}

}
@

Is it because ListView doesn't work under Window element?

shav

Hi,

Don't use ListModel in Component for set it as model of ListView. You need change your code like this:
@
import QtQuick 2.4
import QtQuick.Window 2.2

Window {
visible: true

ListView {
    anchors.fill: parent

    model: listActualModel

    delegate: Text { text: name }
}

ListModel {
    id: listActualModel

    ListElement {
        name: "Lion"
        place: "Africa"
    }

    ListElement {
        name: "Puma"
        place: "Americas"
    }
}

}
@

xalam

Thanks Shav that worked but I have one follow up question. If I give the parent Window id and do the following:

@Window {
id: root
visible: true

 ListView {
    anchors.fill: root // not parent
    .....

}@
So if I link with parent's id, it only shows one row but if I use arent' than it shows the full list. Why is that so..I thought the id: root` is the same thing as parent in above script!? Thanks.

shav

Hi,

This happened because your window doesn't have correct size. To check it you can add this code to window content:
@
Component.onCompleted: {
console.log("width: "+root.contentItem.width+" height: "+root.contentItem.height);
}
@

To fix it you need to create a content item. When you use parent as a value to fill property the content item will create as a list view with window size. But I'm not sure correctly. I've tested it but why this happened I don't know. Sorry.

PSI-lbc

Try changing to...

@Window {
id: root
width: 200
height: 200@

or maybe set/use the minimum/maximum width and height properties

IDK but I think if you don't set the properties, they may default to 0