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:
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:
The test code
- import QtQuick 1.0
- Rectangle {
- width: 300
- height: 300
- Rectangle {
- id: button
- color: "red"
- anchors {
- top: parent.top
- left: parent.left
- right: parent.right
- }
- height: 20
- 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
- }
- }
- }
- }
