ListView QML Component: Cannot create delegate

sierdzio · 31 Oct 2020, 18:12

Object or context destroyed during incubation

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

? Offline · 1 Nov 2020, 00:36

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

Bob64 · wrote on 1 Nov 2020, 00:36

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

sierdzio · wrote on 1 Nov 2020, 08:21

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.

? Offline · 11 Jan 2020, 22:18

@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

                        }
                    }
                }

sierdzio · 2 Nov 2020, 09:14

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.

? Offline · wrote on 2 Nov 2020, 09:14

@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?

sierdzio · 2 Nov 2020, 10:47

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().

? Offline · wrote on 2 Nov 2020, 10:47

@sierdzio Can you give me a sample code?

sierdzio · 2 Nov 2020, 17:33

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])
        }
    }

? Offline · 11 Feb 2020, 17:39

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