qtqmlqt5.5

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


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?


Solution

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