Listview delegate: Loader.setSource() not working



  • 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 :)



  • 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"
            }
        }
    }
    


  • 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 :)



  • @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.



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



  • @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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.