How to make QML ListView align bottom-to-top: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(Add "cleanup" tag)
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
[[Category:Snippets]]
[[Category:Snippets]]
[[Category:HowTo]]
[[Category:HowTo]]

Revision as of 16:00, 3 March 2015

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

English | Deutsch | Български

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: http://gri.not-censored.com/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: http://gri.not-censored.com/listview-bottom-to-top.png

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
}
}
}

}