Listview delegate: Loader.setSource() not working

kylecorver

Hi guys,

i'm having some issues using a loader inside a listview-delegate. I'm trying to use the loader in order to show different ui-elements in the same listview. My code so far is pretty simple:

ScrollView {
        anchors.fill: parent
        ListView {
            model: listModel
            delegate: Component {
                Loader {
                    id: idLoader
                    Component.onCompleted: {
                        switch(type) {
                            case "Type1": {
                                idLoader.setSource(itemType1);
                                break;
                            }
                            case "Type2": {
                                idLoader.setSource(itemType2);
                                break;
                            }
                            case "Type3": {
                                idLoader.setSource(itemType3);
                                break;
                            }
                        }
                    }
                }
            }
        }
    }


    Item {
        id: itemType1
        Slider {
            value: 0.5
        }
    }
    Item {
        id: itemType2
        Text {
            text: "Item Type 2"
        }
    }
    Item {
        id: itemType3
        Text {
            text: "Item Type 3"
        }
    }

Thr code works just fine - at least it displays all 3 containers. The problem is, that all items are printed in the same line - and not below each other.
I tried the same code with components instead of items ... in this case it is working properly.
Unfortunately i'm not an expert in using qml ... is there a solution, using items anyway?

LG Kyle :)

Arpegius

ListView need height property or width if orientation is Horizontal. So you need set the height of your itemTypes also, or simply change them to Row.
There is no need to use ScrollView, simply use ListView with anchors.fill: parent.
If you somehow prefer to use ScrollView, you need to put Repeater within Column:

ScrollView {
        anchors.fill: parent
        Column { 
            Repeater {
                model: listModel

This have one very important disadvantage, it create all delegates, not only those visible, like ListView do.

idLoader.setSource(itemType2) working fine? i don't think so, it should be
idLoader.setSource("ItemType2.qml") or
idLoader.sourceComponent = componentItemType2 if it is warped in Component :

Component {
    id: componentItemType2
    Row {
        id: itemType2
        Text {
            text: "Item Type 2"
        }
    }
}

kylecorver

Hey thanks for your reply,
I have removed the ScrollView and added Row to my items. Still it is not working. The Code now looks like the following:

ListView {
            model: listModel
            anchors.fill: parent
            delegate: Component {
                Loader {
                    id: idLoader
                    Component.onCompleted: {
                        switch(type) {
                            case "Type1": {
                                idLoader.setSource(itemType1);
                                break;
                            }
                            case "Type2": {
                                idLoader.setSource(itemType2);
                                break;
                            }
                            case "Type3": {
                                idLoader.setSource(itemType3);
                                break;
                            }
                        }
                    }
                }
            }
        }
Item {
        id: itemType1
        Row {
            Slider {
                value: 0.5
            }
        }
    }
    Item {
        id: itemType2
        Row {
            Text {
                text: "Item Type 2"
            }
        }
    }
    Item {
        id: itemType3
        Row {
            Text {
                text: "Item Type 3"
            }
        }
    }

The idLoader.setSource(itemType2) is working fine, since the Items are written in the same file as the ListView.

LG Kyle :)

jeremy_k

@kylecorver said:

I have removed the ScrollView and added Row to my items. Still it is not working. The Code now looks like the following:

Can you elaborate on what's not working currently?

            delegate: Component {
                Loader {
                    id: idLoader
                    Component.onCompleted: {
                        switch(type) {
                            case "Type1": {
                                idLoader.setSource(itemType1);
                                break;
                            }

[...]

The idLoader.setSource(itemType2) is working fine, since the Items are written in the same file as the ListView.

This surprises me. Loader::setSource() takes a URL as the first argument. Specifying a Qml object as demonstrated here results in this error with Qt 5.5.1: Error: Cannot assign QObject* to QUrl

The Loader::sourceComponent property is a better match, but itemType[1-3] still needs to be wrapped in a Component. If the code sample above is placed in a single file, setting Loader::sourceComponent results in an error: Error: Cannot assign QObject* to QQmlComponent*

The example as written should also cause an instance of itemType1, 2, and 3 to be instantiated at the same time as the ListView. Placing them in a Component causes the definition to be compiled for later use, rather than being immediately instantiated.

kylecorver

The problem is still the same as in my first post: All items are printed in the same line.

I don't know why this setSource is working for me and I think I'm getting none of that errors you mentioned. Currently I'm getting the following output when using my version:

file:///C:/Users/.../QQuickItem(0x2cdfac18): File not found
file:///C:/Users/.../QQuickItem(0x2cdfac90): File not found
file:///C:/Users/.../QQuickItem(0x2cdfad50): File not found

When putting all those items in seperate files, these3 output lines disappear. However, the output in my program stays the same, no matter which version i use.

jeremy_k

@kylecorver Can you post the complete program? The original isn't a a valid Qml document, leading to guessing about which errors will or will not occur. The OS and Qt version used might also be relevant.