QML ListView anchor, margin = 0 goes outside parent fill? - qt

Question

I was wondering why this draws the Icon components outside of the Item fill? Using Qt 5.5.1
import QtQuick 2.5
Item {
id: root
// width: 960 // Actually set in the higher level view
// height: 540 // Actually set in the higher level view
ListModel {
id: items
ListElement { icon: 'a.png', label: 'Example', x: 0, y: 0 }
ListElement { icon: 'b.png', label: 'Something', x: 100, y: 0 }
ListElememt { icon: 'c.png', label: 'Testing', x: 200, y: 50 }
}
ListView {
model: items
delegate: Icon {
text: model.label
iconSrc: model.icon
anchors {
top: parent.top
left: parent.left
leftMargin: model.x
topMargin: model.y
}
}
anchors {
top: parent.top
left: parent.left
}
}
}
The first two icons (y = 0) will appear about 15 pixels outside of the containing Item when it is inside a higher level view.
If I do it the below way (without ListView), they appear in the correct position (y = 0), ie. they will be inside of the containing Item when used in the higher level view.
import QtQuick 2.5
Item {
id: root
// width: 960 // Actually set in the higher level view
// height: 540 // Actually set in the higher level view
Icon {
text: 'Example'
iconSrc: 'a.png'
anchors {
top: parent.top
left: parent.left
leftMargin: 0
topMargin: 0
}
}
Icon {
text: 'Something'
iconSrc: 'b.png'
anchors {
top: parent.top
left: parent.left
leftMargin: 100
topMargin: 0
}
}
Icon {
text: 'Testing'
iconSrc: 'c.png'
anchors {
top: parent.top
left: parent.left
leftMargin: 200
topMargin: 50
}
}
}
Why do the Icon components render in a different position when generated inside a ListView compared to direct definitions, when using the same "X, Y" values for both?

Answer 1

The objective of the ListView is to show a set of items as a list so the anchors cannot be established since the geometry is handled by the ListView, instead Repeater must be used:
import QtQuick 2.5
Item {
id: root
// width: 960 // Actually set in the higher level view
// height: 540 // Actually set in the higher level view
ListModel{
id: items
ListElement { icon: 'a.png'; label: 'Example'; x: 0; y: 0 }
ListElement { icon: 'b.png'; label: 'Something'; x: 100; y: 0 }
ListElement { icon: 'c.png'; label: 'Testing'; x: 200; y: 50 }
}
Repeater {
model: items
delegate: Icon {
text: model.label
source: model.icon
anchors {
top: parent.top
left: parent.left
leftMargin: model.x
topMargin: model.y
}
}
}
}