Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

ListView QML Component: Cannot create delegate



  • I have listview and have120 delegate. Does not show all data, the error i got is ;

    QML Component: Cannot create delegate
    Object or context destroyed during incubation


  • Moderators

    Object or context destroyed during incubation

    https://bugreports.qt.io/browse/QTBUG-50992 If you are running old Qt - upgrade.



  • @sierdzio said in ListView QML Component: Cannot create delegate:

    Object or context destroyed during incubation

    https://bugreports.qt.io/browse/QTBUG-50992 If you are running old Qt - upgrade.

    I have Qt Creator 4.13.2 and Qt 5.15.1 but have more delagete I see this error and return model list.



  • @NullByte can you provide any more details about your issue?


  • Moderators

    OK, so when you have fewer items (let's say 20) the error does not appear? Can you show the code you have for delegates?

    Perhaps the linked error is not fully fixed - it has been a hard and long fight to get it closed.



  • @sierdzio said in ListView QML Component: Cannot create delegate:

    OK, so when you have fewer items (let's say 20) the error does not appear? Can you show the code you have for delegates?
    Perhaps the linked error is not fully fixed - it has been a hard and long fight to get it closed.

    First of all I am sorry I answered late I did not receive any notification for this.

    A listview is available. If this is delegate of my list, I sort my data from a ListView in this way. I realized that the problem was not because there were too many delegate. When my application starts, my listview data is sent and I show it without any problem, but when I click a button and want to update the listview, I get this error.

    I have no idea how to update my list and the forceLayout function does not work. After clicking the button 1-2 times, I can see the new data

    These codes belong to my ListView

        ListModel {
            id: dataModel
        }
    
        ListView {
            id: fixtureList
            width: parent.width
            height: (parent.height - (header.height + tabBar.height * dp) * dp)
            y: 0
            anchors.top: header.bottom
            anchors.left: parent.left
            focus: true
            clip: true
            model: dataModel
            delegate: ListView {
                id: dataList
                width: fixtureList.width 
                implicitHeight: contentItem.childrenRect.height
                model: matchdata
                interactive: false
                clip: true
                focus: true
                spacing: 3
                delegate: Rectangle {
                    width: fixtureList.width
                    height: 65
                    color: "#ffffff"
    
                    Text {
                        id: startTime
                        text: Utils.epochToJsDate(date)
                        anchors.left: parent.left
                        anchors.top: parent.top
                        anchors.leftMargin: 3
                        anchors.topMargin: 3
                        font.family: fontRegular.name
                        font.pixelSize: 15 * dp
                    }
    
                    Rectangle {
                        id: scoreTable
                        width: 50 * dp
                        height: 25 * dp
                        anchors.centerIn: parent
                        color: properties.score.host === 0 ? "#ffffff" : "#d2d4c7" || properties.score.guest === 0 ? "#ffffff" : "#d2d4c7"
    
                        Text {
                            id: hostScore
                            text: properties.score.host
                            color: properties.score.host > 0 ? "#ed670e" : "#fffff"
                            font.family: fontMedium.name
                            font.pixelSize: 20 * dp
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.right: scoreSeperator.left
                            anchors.rightMargin: 6
    
                        }
    
                        Text {
                            id: scoreSeperator
                            text: "-"
                            font.family: fontMedium.name
                            font.pixelSize: 17 * dp
                            anchors.centerIn: parent
                        }
    
                        Text {
                            id: guestScore
                            text: properties.score.guest
                            color: properties.score.host > 0 ? "#ed670e" : "#fffff"
                            font.family: fontMedium.name
                            font.pixelSize: 20 * dp
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.left: scoreSeperator.right
                            anchors.leftMargin: 6
    
                        }
    
                        Component.onCompleted: {
                            if(model.state === "plan") {
                                hostScore.text = ""
                                guestScore.text = ""
                            }
    
                            if(model.state === "postponed") {
                                hostScore.text = ""
                                guestScore.text = ""
                            }
    
                            if(model.state === "finished") {
                                hostScore.color = "black"
                                guestScore.color = "black"
                            }
    
                            if(model.state === "live") {
                                hostScore.color = "#ed670e"
                                guestScore.color = "#ed670e"
                            }
                        }
                    }
    
                    Text {
                        id: hostName
                        text: Utils.cutString(properties.host.name, 20)
                        font.family: fontMedium.name
                        font.pixelSize: 15 * dp
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: scoreTable.left
                        anchors.rightMargin: 10
    
                    }
    
                    Text {
                        id: guestName
                        text: Utils.cutString(properties.guest.name, 20)
                        font.family: fontMedium.name
                        font.pixelSize: 15 * dp
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: scoreTable.right
                        anchors.leftMargin: 10
                    }
    
                    Rectangle {
                        id: matchTimeArea
                        width: 50 * dp
                        height: 25 * dp
                        color: "#f5f5f3"
                        anchors.bottom: scoreTable.top
                        anchors.horizontalCenter: scoreTable.horizontalCenter
    
                        Text {
                            id: matchTime
                            text: Utils.checkTimeTableText(model.state, model.minute)
                            anchors.centerIn: parent
                            color: "#31694e"
                            font.family: fontMedium.name
                            font.pixelSize: 15 * dp
    
                            Component.onCompleted: {
                                if(matchTime.text === "") {
                                    matchTimeArea.visible = false
                                }
                            }
                        }
                    }
    
                    Image {
                        id: favIcon
                        source: "qrc:/assets/images/star-solid.svg"
                        width: 24 * dp
                        height: 24 * dp
                        anchors.right: parent.right
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.rightMargin: 10
    
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                favIconOverlay.color = "#ed670e"
                            }
                        }
                    }
    
                    ColorOverlay {
                        id: favIconOverlay
                        anchors.fill: favIcon
                        source: favIcon
                        color: "#babead"
                        transform: rotation
                        antialiasing: true
                    }
    
                    Rectangle {
                        id: seperator
                        height: 1 * dp
                        color: "black"
                        width: parent.width
                        anchors.bottom: parent.bottom
                    }
                }
            }
    
    
            section {
                id: listViewSection
                property: "name"
                criteria: ViewSection.FullString
                delegate: Rectangle {
                    color: "#d2d4c7"
                    width: parent.width
                    height: 50 * dp
                    Image {
                        id: leagueCountryFlag
                        fillMode: Image.PreserveAspectFit
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        width: 26 * dp
                        height: 26 * dp
    
                        Component.onCompleted: {
                            leagueCountryFlag.source = "https://images.slg.space/" + fixtureList.model.get(listSectionIndex).category.image
                            listSectionIndex = listSectionIndex + 1
                            return
                        }
                    }
    
                    Text {
                        text: section
                        anchors.left: leagueCountryFlag.right
                        anchors.leftMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        font.pixelSize: 17 * dp
                        font.family: fontRegular.name
                    }
                }
            }
    
    
        }
    

    My listview append model function is here

        function setData() {
            dataModel.clear()
            for(var i = 0; i < fixtureData.length; i++) {
                dataModel.append(fixtureData[i])
            }
        }
    

    Update my ListView on click buton

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            if(fixtureSportType != 0) {
                                listSectionIndex = 0
                                fixtureSportType = 0
                                fixtureList.visible = false
                                control.itemColor = "#ed670e"
                                control.running = true
                                Utils.getFixtureWithCategoryAndDate("football", new Date())
                                setData()
                                fixtureList.update()
                                fixtureList.forceLayout()
                                control.running = false
                                fixtureList.visible = true
    
                            }
                        }
                    }
    

  • Moderators

    How is matchdata populated?

    I suspect this the reason for you seeing this message is that some data is cleared too early (or too late). I think it would be better if you used a C++ model for your parent list, then you would have full control over the data resetting process.



  • @sierdzio said in ListView QML Component: Cannot create delegate:

    How is matchdata populated?

    I suspect this the reason for you seeing this message is that some data is cleared too early (or too late). I think it would be better if you used a C++ model for your parent list, then you would have full control over the data resetting process.

    There is a string in the main JSON yield, this works well. I thought so, I guess that's what happens because my data comes too fast or too slow Is there a way to handle this on the QML side? Or is C ++ the only solution?


  • Moderators

    I don't know. There's a bit too much code here for me to focus on it.

    My guess is that when you clear the model, the submodels need a bit of time to clear and internal ListView gets confused - tries to display data which is being removed at the same time.

    One possible solution (still in QML) would be to clear the main model in a loop (one element at a time) instead of calling clear().



  • @sierdzio Can you give me a sample code?


  • Moderators

    function setData() {
            for(let i = 0; i < dataModel.count; i++) {
              dataModel.remove(i, 1)
            }
            dataModel.sync()
            for(let i = 0; i < fixtureData.length; i++) {
                dataModel.append(fixtureData[i])
            }
        }
    


  • @sierdzio I solved the problem. The problem was solved when I performed my operations using WorkerScript.

    Thanks @sierdzio the code you wrote gave an idea and helped me solve my problem

    In this way, my application data is displayed in an accurate and practical way. But I keep getting the problem with my first post. I think there is a problem with the delegates, because of the wrong positioning or a limit problem. I'm working on it

        WorkerScript {
            id: fixtureThread
            source: "qrc:/fixtureThread.js"
    
            onMessage: {
                fixtureData = messageObject.data
                dataModel.clear()
                for(let i = 0; i < dataModel.count; i++) {
                    dataModel.remove(i, 1)
                }
    
                for(let k = 0; k < fixtureData.length; k++) {
                    dataModel.append(fixtureData[k])
                }
                fixtureList.forceLayout()
                control.running = false
                fixtureList.visible = true
            }
        }
    
    WorkerScript.onMessage = function(message) {
          ....
             WorkerScript.sendMessage({ 'data': tmpData.data })
          ....
    }
    
    

Log in to reply