Animate new items in a TableView

Question

I'm using a TableView to display the contents of an SQLite database. The user clicks one of the checkable buttons and the right table is read through the LocalStorage API. Thus, the model is always new.

Because the model is always new, the loading of the new table isn't visually attractive (all the entries are shown at once).

My idea was to animate the height of the row when it's added (in a linear way from 0)

Can this be done without reimplementing the rowDelegate from scratch?

Answer 1

Yes, it is possible.

TableView uses ListView as internal object. You can access to it, using property __listView .

With ListView , it is possible to specify transitions that should be applied whenever the items in the view change as a result of modifications to the view's model.

Transition {
    id: populateTransition
    NumberAnimation { properties: "y"; duration: 300 }
}

TableView {
    TableViewColumn {
        role: "title"
        title: "Title"
        width: 100
    }
    model: libraryModel
    Component.onCompleted: {
        this.__listView.populate = populateTransition
        this.__listView.add = populateTransition
    }
}

PS this solution relies on modifying an internal object and is not guaranteed to work across different Qt versions or platforms.

Answer 2

No.

It would be incredibly hacky. I'd imagine it would be something like this (assuming QML only):

1. Find the exact time all row items are instantiated.
2. Somehow find the correct row item by navigating the list of children.

At this point there's a chance that the row items have already been shown at full height, but assuming that wasn't the case, you'd need to then dynamically create a NumberAnimation , for example, and then animate the height change.

You're better off creating your own TableView using ListView , which has support for transitions.