Listview first element always visible

ReshmaS

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!

favoritas37

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

ReshmaS

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:(

admiralfluff

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.

ReshmaS

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

ReshmaS

@

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.

admiralfluff

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

ReshmaS

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