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:
    0_1509122356805_Selection_002.png

    Target:
    0_1509122378264_Selection_002 (copy).png

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

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.