Overlaying elements in a ListView

sohail

Hi there,

I'm trying to overlay some elements onto a ListView but it seems that I cannot have them be overlaid relative to the ListView's contents, but the ListView itself. Here is the code:

@import QtQuick 2.2
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

Window {

width: 300
height: 600
visible: true


ScrollView {
    id: scroll
    clip: true
    anchors.fill: parent

    ListView {
        id: view
        model: 100

        // I want this rectangle to "hover" over the fifth and
        // sixth items below. This works, but when I scroll, it
        // stays in the same position
        Rectangle {
            width: view.width
            onYChanged: console.log(y)
            y: 5*30+20 // 1/2 in 5th item, 2/3 in 6 (just example)
            height: 30
            color: "blue"
        }

        delegate: Rectangle {
            height: 30
            width: view.width
            border.color: "black"
        }
    }
}

}
@

Here is the demo of the incorrect behaviour. What I'd like to have happen is the blue rectangle remain fixed over the fifth and sixth items in the ListView. Is there a way to make this happen?

Thanks.

!https://i.imgur.com/PAM6R1d.gif(incorrect behaviour)!

sohail

I think I have a fix (code):
@
import QtQuick 2.2
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

Window {

width: 300
height: 600
visible: true


Component {
    id: rect
    Rectangle {
        width: view.width
        height: 30
        color: "blue"
        y: 20*30+15
        z: 2
    }
}

ScrollView {
    id: scroll
    clip: true
    anchors.fill: parent

    ListView {
        id: view
        model: 100

        Component.onCompleted: {
            rect.createObject(view.contentItem)
        }

        delegate: Rectangle {
            height: 30
            width: view.width
            border.color: "black"
            Label {
                text: index
                z: 3
            }
        }
    }
}

}
@

Demo: !https://i.imgur.com/WSlGpjx.gif(demo)!