Canvas in dynamic listView

[oscarthorn]

Hi! I'm trying to load a component dynamically in a list view. The component is a row containing a canvas. I load it with the Loader delegate by adding it to the list views model. It gets added but nothing gets drawn. What am I missing? I looks fine when not loaded dynamically.

import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3


Rectangle{
    id: rectangle
    width: 600
    height: columnLayout.implicitHeight + 30
    color: "steelblue"
    radius: 20

    ListModel {
        id: conditionModel
    }

    Column {
        id: columnLayout
        spacing: 20
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.rightMargin: 10
        anchors.leftMargin: 10
        anchors.bottomMargin: 10
        anchors.topMargin: 10

        Row {
            id: row
            width: 480
            spacing: 10

            Text {
                id: element
                text: qsTr("IF")
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 20
            }

            ComboBox {
                id: ante
                width: 120
                height: 25
                anchors.verticalCenter: parent.verticalCenter
            }

            ComboBox {
                id: rel
                width: 80
                height: 25
                anchors.verticalCenter: parent.verticalCenter
                model: ['IS', 'NOT']
            }

            ComboBox {
                id: ante_term
                width: 120
                height: 25
                anchors.verticalCenter: parent.verticalCenter
            }

            ToolSeparator {
                id: toolSeparator
                rightPadding: 12
                leftPadding: 12
            }

            RoundButton {
                id: roundButton
                width: 30
                height: 30
                text: "+"
                wheelEnabled: false
                spacing: 6
                leftPadding: 6
                transformOrigin: Item.Center
                onClicked:{
                    conditionModel.append({"name": condition})
                }
            }

            RoundButton {
                id: roundButton1
                width: 30
                height: 30
                text: "("
                wheelEnabled: false
                leftPadding: 6
                transformOrigin: Item.Center
                spacing: 6
                onClicked:{
                    conditionModel.append({"name": open_parentheses})
                }
            }

            RoundButton {
                id: roundButton2
                width: 30
                height: 30
                text: ")"
                wheelEnabled: false
                leftPadding: 6
                transformOrigin: Item.Center
                spacing: 6
                onClicked:{
                    conditionModel.append({"name": close_parentheses})
                }
            }



        }

        Row {
            id: row2
            width: parent.width
            Layout.leftMargin: 10

            ListView {
                id: listView
                x: 0
                y: 0
                width: parent.width
                Layout.fillWidth: true
                height: contentHeight
                spacing: 10
                delegate: Loader{
                    property int modelIndex: index
                    sourceComponent: name
                }
                model: conditionModel
            }
        }


        Row {
            id: row1
            width: parent.width
            spacing: 10

            Text {
                id: element1
                text: qsTr("THEN")
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 20
            }

            ComboBox {
                id: cons
                width: 120
                height: 25
                anchors.verticalCenter: parent.verticalCenter
            }

            Text {
                id: element3
                text: qsTr("IS")
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 20
            }

            ComboBox {
                id: cons_term
                width: 120
                height: 25
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    }

    Component {
        id: condition
        Row {
            spacing: 10
            ComboBox {
                width: 80
                height: 25
                anchors.verticalCenter: parent.verticalCenter
                model: ['AND', 'OR']
            }

            ComboBox {
                width: 120
                height: 25
                anchors.verticalCenter: parent.verticalCenter
            }

            ComboBox {
                width: 80
                height: 25
                anchors.verticalCenter: parent.verticalCenter
                model: ['IS', 'NOT']
            }

            ComboBox {
                width: 120
                height: 25
                anchors.verticalCenter: parent.verticalCenter
            }

            ToolSeparator {
                rightPadding: 12
                leftPadding: 12
            }

            RoundButton {
                width: 30
                height: 30
                text: "-"
                wheelEnabled: false
                spacing: 6
                leftPadding: 6
                transformOrigin: Item.Center
                onClicked:{
                    conditionModel.remove(modelIndex)
                }
            }
        }
    }
    Component{
        id: open_parentheses
        Row {
            width: parent.width
            height: 35
            Canvas {
                contextType: qsTr("")
                anchors.fill: parent
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.reset();

                    var centreX = width / 2;
                    var centreY = height *16.6;

                    ctx.beginPath();
                    ctx.fillStyle = "black";
                    ctx.arc(centreX, centreY, width, 0, Math.PI, true);
                    ctx.stroke()
                }
            }
        }
    }
    Component{
        id: close_parentheses
        Row {
            width: parent.width
            height: 35
            Canvas {
                contextType: qsTr("")
                anchors.fill: parent
                onPaint: {
                    var ctx = getContext("2d");
                    ctx.reset();

                    var centreX = width / 2;
                    var centreY = -height*15.6;

                    ctx.beginPath();
                    ctx.fillStyle = "black";
                    ctx.arc(centreX, centreY, width, 0, Math.PI, false);
                    ctx.stroke()

                }
            }
        }
    }
}