Q:

ListView item covered by header after scrolling

I am trying to use a ListView with a simple header that stays on top of the list. It is working fine for most situations. When I scroll all the way to the top manually the top item is located below the header:

When I set the current index from outside the list to highlight an item the list scrolls to the highlighted item. This is expected and desired behavior. However the list scrolls in a way, that the highlighted item will be on the same height (y) as the header. Therefore the header partially covers the item. In the picture the header is transparent, the highlight is light green:

How can I set up the list so that the list content always starts below the header? Or as a workaround, how can I set the height of the current item after the automatic scroll on selection?
For completeness here is the current code of my list.
ListView {
    id: particleList
    anchors.fill: parent
    model: particleModel
    clip: true
    highlight: Rectangle { color: Material.color(Material.Green); opacity: 0.2}
    highlightMoveDuration: Style.animationDurationMedium
    headerPositioning: ListView.OverlayHeader
    header: Item {
        height: 40
        anchors.left: parent.left
        anchors.right: parent.right
        Row {
            anchors.fill: parent
            MediumText {
                horizontalAlignment: Text.AlignHCenter
                width: parent.width / 3
                text: qsTr("Width")
            }
            MediumText {
                horizontalAlignment: Text.AlignHCenter
                width: parent.width / 3
                text: qsTr("Height")
            }
            MediumText {
                horizontalAlignment: Text.AlignHCenter
                width: parent.width / 3
                text: qsTr("Area")
            }
        }
    }
    footer: SmallText {
        anchors.left: parent.left
        anchors.right: parent.right
        text: particleModel.count
    }

    populate: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }

    delegate: Item {
        height: 40
        anchors.left: parent.left
        anchors.right: parent.right

        Row {
            anchors.fill: parent
            MediumText {
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width / 3
                text: model.width
                horizontalAlignment: Text.AlignRight
                rightPadding: 20
            }
            MediumText {
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width / 3
                text: model.height
                horizontalAlignment: Text.AlignRight
                rightPadding: 20
            }
            MediumText {
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width / 3
                text: model.area
                horizontalAlignment: Text.AlignRight
                rightPadding: 20
            }
        }
        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            height: 1
            visible: model.index !== 0
            color: Material.color(Material.Grey)
        }
    }
}

A:

The Listview rows always scroll behind the header. 
So make it opaque (e.g. Rectangle with background instead of item) and increase the z value to have it on top.
For the scrolling use highlightRangeMode, preferredHighlightBegin and preferredHighlightEnd.

