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

Canvas in dynamic listView



  • 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()
    
                    }
                }
            }
        }
    }
    
    

Log in to reply