List View Overlapping issue with the another components when scrolled

[Adithya]

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

[J.Hilk]

@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

[Adithya]

@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

[J.Hilk]

@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

[Shrinidhi Upadhyaya]

Hi @Adithya ,

• First thing is use Layouts, you can also use columns but using Layouts is better,so for more informaton about layouts[https://doc.qt.io/qt-5/qtquicklayouts-index.html]

• Just set the clip property in ListView

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:-

[Adithya]

Thanks for the help!