Listview first element always visible



  • I created a listview and gave the width and height of the listview as 100 and 150. BUt I notice tat the first element of the listview goes beyond tat boundary and it is still visible.

    For ex. kindly chk this code in ur qt,

    // import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
    @import QtQuick 1.1

    Rectangle {
    width: 400
    height: 500

    ListView {
        id: list_view1
        x: 82
        y: 82
        width: 110
        height: 100
        delegate: Item {
            x: 5
            height: 40
            Row {
                id: row1
                spacing: 10
                Rectangle {
                    width: 40
                    height: 40
                    color: colorCode
                }
    
                Text {
                    text: name
                    anchors.verticalCenter: parent.verticalCenter
                    font.bold: true
                }
            }
        }
        model: ListModel {
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }
    
            ListElement {
                name: "Red"
                colorCode: "red"
            }
    
            ListElement {
                name: "Blue"
                colorCode: "blue"
            }
    
            ListElement {
                name: "Green"
                colorCode: "green"
            }
        }
    }
    

    }@

    // Thanks in advance!



  • Fortunately the solution to your problem is quite simple.

    Just add in your ListView the property clip set to true
    @
    ...
    ListView {
    id: list_view1
    clip:true
    ....
    }
    ...
    @



  • Unfortunatley, that does not work for my program. Clip:true also clips the other area around the lIstview. I have 15 items and onclikc on every item gives a rectangle beside it. so when i set clip:true tat rectangle is also cut:(



  • The ListView stores a buffer above and below the visible display area to improve performance. Delegates are instantiated and killed as they enter and leave the buffered area. You could set the buffer cache of the listView: http://doc.qt.digia.com/qt/qml-listview.html#cacheBuffer-prop

    However, you will likely see a ui performance hit, and get laggy transitions as you scroll through the list. I would recommend restructuring your elements in such a way that you maintain the listview buffer, but clip the area you want to display. For example, you could contain the ListView in an Item set to the ListViews height, but set to the width of the popup elements shown when you click an element, and clip to that item.



  • *For example, you could contain the ListView in an Item set to the ListViews height, but set to the width of the popup elements shown when you click an element, and clip to that item.

    I did not understand this statement.

    You want me to enclose Listmodel in an Item and then what should I do. Could you this in a small code.



  • @

    Item
    {
        width:1000
        height:300
    
    ListView{
        id:lvmain
        model:listModel
        x:0
       //clip:true
        anchors{
            left:parent.left
            leftMargin:2
            right:parent.right
            rightMargin:2
    
        }
        clip:true
        y:0
        width: 150;
        height: 300
        delegate:  mainDelegate
        section.property: "Group"
        cacheBuffer: 0
            section.criteria: ViewSection.FullString
        section.delegate: sectionHeading
    }
    

    }@

    I tried smoething like this but i cannot see the onclik area beyond my clipped region.



  • If you use the chacheBuffer, you won't need to set clip:true.

    I was suggesting the following:

    @ Item
    {
    width:150+popupWidth
    height:300
    clip:true
    anchors{
    left:parent.left
    leftMargin:2
    right:parent.right
    rightMargin:2
    }
    ListView{
    id:lvmain
    model:listModel
    x:0
    y:0
    width: 150;
    height: 300
    delegate: mainDelegate
    section.property: "Group"
    section.criteria: ViewSection.FullString
    section.delegate: sectionHeading
    }
    }@



  • NO this also does not work. I am unable to see that area beyond the width


Log in to reply
 

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