[Qt-qml] ListView and visible items

[Adriano Rezende]

On Thu, Feb 3, 2011 at 4:56 AM,  <jaakko.korpela at nokia.com> wrote:
> Hi,
>
> I am looking at ways to dig out the visible items in ListView. I have a
> requirement to trigger certain behavior every time a new item becomes
> visible while scrolling. ListView is internally aware of the items that are
> currently visible as ListView.indexAt returns -1 if the item at a certain
> coordinate is not visible. But what are the ways to find out what items are
> visible visible. I have tried a couple of approaches with my particular
> requirement.
>
> First, make use of Component.onCompleted in ListView delegates. The only
> trouble with this is that the first list item in ListView is never deleted,
> so you cannot rely on this tell you when that first item becomes visible
> while scrolling.
>
> The second approach involves using ListView.indexAt and pulling the indexes
> of the two items at the edges at a certain interval and see if there are any
> changes. This actually works, but I am not really happy with this approach.
>
> Any suggestions?

You can add to your delegate a boolean property binded to the ListView
visible bounding rect. So any change you want to apply on the item you
can bind to this property.

For example:

Item {
    width: 500
    height: 500

    Component {
        id: listDelegate

        Rectangle {
            width: parent.width
            height: 60
            opacity: 0.7
            border.width: 1
            color: isVisible ? "red" : "blue"

            property bool isVisible : ((y >= ListView.view.contentY &&
                                        y <= ListView.view.contentBottom) ||
                                       (y + height >= ListView.view.contentY &&
                                        y + height <=
ListView.view.contentBottom))
        }
    }

    Rectangle {
        anchors.fill: listView
        color: "green"
    }

    ListView {
        id: listView
        cacheBuffer: 1000

        anchors.fill: parent
        anchors.topMargin: 80
        anchors.bottomMargin: 80

        model: 100
        delegate: listDelegate

        property real contentBottom: contentY + height
    }
}


Maybe an attached property could be useful (like ListView.isInside ..
dummy name).

Br,
Adriano