How to make QML ListView align bottom-to-top

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

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.

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.

The test code

import QtQuick 1.0

Rectangle {

   width: 300
   height: 300
   
   Rectangle {
       id: button
       color: "red"
       height: 20
       anchors {
           top: parent.top
           left: parent.left
           right: parent.right
       }
        
       Text {
           anchors.centerIn: parent
           text: "Click me to add rows"
       }

       MouseArea {
           anchors.fill: parent
           onClicked: {
               var row = { "id":listModel.count }
               listModel.insert(0, row)
           }
       }
   }

   ListView {
       rotation: 180

       anchors {
           top: button.bottom
           bottom: parent.bottom
           left: parent.left
           right: parent.right
       }

       model: ListModel {
           id: listModel
       }

       delegate: Rectangle {
           rotation: 180
           width: ListView.view.width
           height: 20
           color: "green"

           Text {
               anchors.centerIn: parent
               text: model.id
           }
       }
   }

}