ListView Item Manual Positioning Animations QML

English | Български

Manual ListView Item Positioning

Introduction

Let’s say for instance instead of wanting a plain ListView with its items laid out horizontally and linearly, you instead want a list to respond so that when one item is selected, that item animates towards a different position (lower y value). This item is singled out and when a different item is selected, they swap places. This was useful for my case of KDE’s login manager theme, where the items were user face images.

Implementation

Here we create a ListView, a simple array just as filler for what your model will actually be, a delegate with an image and text item, and then we manually set the y and x position of them.

Results

!https://lh4.googleusercontent.com/-DOTQe7zsIBg/Tj3MjY6plMI/AAAAAAAAAUw/3uAoYO33h3E/s800/qml list animation example.png!

Possible Issues

I’ve encountered some issues with this approach, however. It looks like there is a bug in the ListView which screws with the X value of a delegate item if the model’s data is changed. I’m not sure if this is just me, or if there’s an easy way to fix it…

Categories:

• Developing_with_Qt
  • Qt_Quick
• QML

• HowTo
• snippets