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