How to make QML ListView align bottom-to-top

English Български

How to make QML ListView align bottom-to-top

Normally QML ListView aligns all items at the top. New items get stacked on bottom. For some use cases like a conversations view you may want a different layout which starts at the bottom and also adds new items there.

This is how the ListView normally looks like:
File:Normal-listview.png

The solution

The solution is easier than most people think. Rotation is the keyword.

• Rotate the ListView by 180°
• Also rotate the Delegate by 180° to get it back to normal direction. Don’t forget to give the delegate the whole width of ListView.view.width! Otherwise your items are right-aligned.
• In order to get the newest items at the bottom, always insert the newest one at index 0 instead of appending it.

After doing these steps, your view should look like this:
File:Listview-bottom-to-top.png

The test code

Categories:

• Developing_with_Qt
  • Qt_Quick
• QML

• HowTo
• snippets