List View Overlapping issue with the another components when scrolled
Solved
QML and Qt Quick
-
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.5Window {
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
-
-
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 ,
-
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:-
-