Overlaying elements in a ListView



  • 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)!



  • 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)!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.