Listview hide element which is not inside Listview boundaries (height, width)

[aheimberger]

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

[Eeli K]

@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. "

[aheimberger]

@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.

[aheimberger]

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