Unsolved Listview hide element which is not inside Listview boundaries (height, width)
-
Hey Guys,
I have following problem. I have a Listview which has multiple items. The ListView has only a specific width and height, inheriting from its parent (shown green). When I have i.e. 3 items all of them are shown within the listview. However, I only want to show the two items, which fit into the visible area of the listview. Not cutting the last element, but removing it.
Current Result:
Target:
import QtQuick 2.6 import QtQuick.Window 2.2 Window { visible: true width: 640 height: 480 title: qsTr("Example") Rectangle { width: 200 height: 160 anchors.centerIn: parent border.width: 2 border.color: "green" ListModel { id: myModel ListElement { name: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr" } ListElement { name: "hello" } ListElement { name: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr" } } ListView { anchors.fill: parent anchors.margins: 5 model: myModel clip: true interactive: false delegate: Rectangle { width: parent.width height: textElement.paintedHeight border.color: "grey" border.width: 1 Text { id: textElement width: parent.width text: name; font.pixelSize: 20 wrapMode: Text.WrapAnywhere } } } } }
-
@aheimberger From the ListView docs: "Note: Views do not enable clip automatically. If the view is not clipped by another item or the screen, it will be necessary to set clip: true in order to have the out of view items clipped nicely. "
-
@Eeli-K Sorry not the solution to my problem. But yes you are correct. I forgot the clip: true within my example. I will update the code.
-
This would actually solve my Problem, but actually this code is quite a bogus.
import QtQuick 2.6 import QtQuick.Window 2.2 Window { visible: true width: 640 height: 480 title: qsTr("Example") Rectangle { width: 200 height: 160 anchors.centerIn: parent border.width: 2 border.color: "green" ListModel { id: myModel ListElement { name: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr" } ListElement { name: "hello" } ListElement { name: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr" } } ListView { id: myListView anchors.fill: parent anchors.margins: 5 model: myModel clip: true interactive: false property int sumUpItemsHeight: 0 delegate: Rectangle { id: myThing width: parent.width height: textElement.paintedHeight border.color: "grey" border.width: 1 Component.onCompleted: { myListView.sumUpItemsHeight += myThing.height if (myListView.sumUpItemsHeight > myListView.height) { myThing.visible = false; } } Text { id: textElement width: parent.width text: name; font.pixelSize: 20 wrapMode: Text.WrapAnywhere } } } } }