Obtaining visibility status of list view delegate qml

Question

I am working on chat system, i have a conversation page with a list view inside it, the list view delegates are text conversations. I want to add seen/unseen or read/unread to conversation delegates, the list view sourced by a custom model and i need something like delegates attached property which changes when the delegate is actually being viewed. is there any attached property which tell me the visibility status of each delegate items?

Answer 1

You have two problems to solve:

1. How to store the information that the message has been viewd
2. When to set it as read.

So one after another...

The custom property within the delegate is no good idea, as the information stored in it will be lost once the delegate will leave the viewport of the ListView and is destroyed.

The best solution would be, to store it in the ListView's model. This way it is also possible, if the model is somewhat persistend, that the information survives a restart of the app.
Maybe you might achive something with the next options I will present, in combination with Settings but I would consider this hackish.

If that is not possible, and the information does not need to survive an app's restart, you need to think about a way of storing it outside the ListView. For example you could have a array or object/dictionary to store it (beware: No change notifications). You might also use a second ListView that you keep in sync (which might prove not so easy!).

Finally you might put your ListView as a model in an Instantiator, which instantiates simple QtObjects with one property: read.

The latter would be the easiest way to store it outside the delegates and the model, so I will show you how it works:

Instantiator {
    id: additionalInfo
    model: customModel
    delegate: QtObject {
        property bool read     // <--- This is a custom defined property
    }
}
ListView {
    model: customModel
    delegate: MyDelegate {
        onRead: additionalInfo.objectAt(index).read = true
        Text {
            text: additionalInfo.objectAt(index).read ? 'read' : 'unread'
        }
    }
}

And now for the second part: When is it acutally read

The problem with the visibility you already discovered. Items become visible even outside the listView when they are created for the buffer. So you can't use this information. But you have the following information:

• The position of the listModel.contentItem (x and y)
• The position of the delegate in relation to the listModel.contentItem
• The width and height of your delegate

So you can say: The delegate is fully visible iff:

• listModel.contentItem.x + delegate.x >= 0
• listModel.contentItem.y + delegate.y >= 0
• listModel.contentItem.y + delegate.y + delegate.height <= listModel.height
• listModel.contentItem.x + delegate.x + delegate.width <= listModel.width

An example, on how a Item might check if it is visible in a Flickable (remember: a ListView IS a Flickable) can be found here

This is: If it is possible to have the whole delegate with the view. If it is larger - well you need to define some criterias when the delegate is considered read.

But again: If there is any posibility to have it as a role in your model, put it there!