Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

List View Overlapping issue with the another components when scrolled



  • I am using a List View in between two rectangles .When the list view is scrolled the ,it overlaps with the upper rectangle. Is there any way to resolve it

    NOTE: I know that making clip true will work but I am looking for some other solution to this

    The code as follows

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.5

    Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListModel{
        id: listModel
        ListElement{name: "Adithya"}
        ListElement{name: "Ramesh"}
        ListElement{name: "RRNagara"}
        ListElement{name: "Adithya"}
        ListElement{name: "Ramesh"}
        ListElement{name: "RRNagara"}
        ListElement{name: "Adithya"}
        ListElement{name: "Ramesh"}
        ListElement{name: "RRNagara"}
    }
    Component {
        id : delComp
        Item{
            width: 100;height: 50
            Text{
                text: name;color: "black";font.pixelSize: 16; visible: true
                Component.onCompleted: {
                    console.log("Completed")
                }
            }
        }
    }
    
    Column{
        id: mainLayout
        width: parent.width
        height: 400
        Rectangle{
            id: firstRect
            width: parent.width
            height: 50
            z:2
            color: "yellow"
        }
    
        ListView{
            id: listView
            width: parent.width
            height: 300
            z:20
            flickableDirection: Flickable.VerticalFlick
            boundsBehavior: Flickable.StopAtBounds
    
            model: listModel
            delegate:delComp
    
            ScrollBar.vertical: ScrollBar{}
        }
    
        Rectangle{
            id: secondRect
            width: parent.width
            height: 50
            color: "yellow"
        }
    }
    

    }

    I have also uploaded the screenshot also

    0_1560403265859_ListViewScrollIssue.png


  • Moderators

    @Adithya
    if you don't want to use clip, than don't set the z value of your ListView to 20.
    Leave it at 0 (the default) and the yellow border will be drawn after the list view -> no text from the delegates in the yellow area



  • @J.Hilk Yes, I was using trail and error method to find a solution . The issue is when scrolling it overlaps with the upper rectangle


  • Moderators

    @Adithya

    Column{
            id: mainLayout
            width: parent.width
            height: 400
            Rectangle{
                id: firstRect
                width: parent.width
                height: 50
                z:1
                color: "yellow"
            }
    
            ListView{
                id: listView
                width: parent.width
                height: 300
                z:0
                flickableDirection: Flickable.VerticalFlick
                boundsBehavior: Flickable.StopAtBounds
    
                model: listModel
                delegate:delComp
    
                ScrollBar.vertical: ScrollBar{}
            }
    
            Rectangle{
                id: secondRect
                width: parent.width
                height: 50
                color: "yellow"
                z:0
            }
        }
    

    works fine



  • Hi @Adithya ,

    Here is your code with few changes:-

    ListModel{
        id: listModel
        ListElement{name: "Adithya"}
        ListElement{name: "Ramesh"}
        ListElement{name: "RRNagara"}
        ListElement{name: "Adithya"}
        ListElement{name: "Ramesh"}
        ListElement{name: "RRNagara"}
        ListElement{name: "Adithya"}
        ListElement{name: "Ramesh"}
        ListElement{name: "RRNagara"}
    }
    
    Component {
        id : delComp
        
        Item{
            width: 100;height: 50
            Text{
                text: name;color: "black";font.pixelSize: 16; visible: true
                Component.onCompleted: {
                    console.log("Completed")
                }
            }
        }
    }
    
    ColumnLayout{
        id: mainLayout
        width: parent.width
        height: 400
    
        Rectangle{
            id: firstRect
    
            Layout.fillWidth: true
            Layout.preferredHeight: 50
            color: "yellow"
        }
    
        ListView{
            id: listView
            Layout.fillWidth: true
            Layout.fillHeight: true
            flickableDirection: Flickable.VerticalFlick
            boundsBehavior: Flickable.StopAtBounds
            model: listModel
            delegate:delComp
            clip: true
            ScrollBar.vertical: ScrollBar{}
        }
    
        Rectangle{
            id: secondRect
    
            Layout.fillWidth: true
            Layout.preferredHeight: 50
            color: "yellow"
        }
    }
    

    Sample Output:-

    0_1560404903740_440e3dbb-b89f-4596-b902-114e633157af-image.png



  • Thanks for the help!


Log in to reply