How to make QML ListView align bottom-to-top: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]] | |||
'''English''' | [[:How_to_make_QML_ListView_align_bottom-to-top_German|Deutsch]] | [[:How_to_make_QML_ListView_align_bottom-to-top_Bulgarian|Български]] | |||
= 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. | |||
==The solution== | This is how the ListView normally looks like:<br />[[Image:http://gri.not-censored.com/normal-listview.png|http://gri.not-censored.com/normal-listview.png]] | ||
== The solution == | |||
The solution is easier than most people think. '''Rotation''' is the keyword. | The solution is easier than most people think. '''Rotation''' is the keyword. | ||
* Rotate the ListView by 180° | * Rotate the ListView by 180° | ||
* '''Also''' rotate the Delegate by 180° to get it back to normal direction. | * '''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. | * 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:<br />[[Image:listview-bottom-to-top.png]] | After doing these steps, your view should look like this:<br />[[Image:http://gri.not-censored.com/listview-bottom-to-top.png|http://gri.not-censored.com/listview-bottom-to-top.png]] | ||
== The test code == | |||
<code><br />import QtQuick 1.0 | |||
Rectangle {<br /> width: 300<br /> height: 300 | |||
Rectangle {<br /> id: button<br /> color: "red&quot; | |||
anchors {<br /> top: parent.top<br /> left: parent.left<br /> right: parent.right<br /> } | |||
height: 20 | |||
Text {<br /> anchors.centerIn: parent<br /> text: "Click me to add rows&quot;<br /> } | |||
MouseArea {<br /> anchors.fill: parent<br /> onClicked: {<br /> var row = {<br /> "id&quot;:listModel.count<br /> }; | |||
listModel.insert(0, row);<br /> }<br /> }<br /> } | |||
ListView {<br /> rotation: 180 | |||
anchors {<br /> top: button.bottom<br /> bottom: parent.bottom<br /> left: parent.left<br /> right: parent.right<br /> } | |||
model: ListModel {<br /> id: listModel<br /> } | |||
delegate: Rectangle {<br /> rotation: 180<br /> width: ListView.view.width<br /> height: 20<br /> color: "green&quot; | |||
Text {<br /> anchors.centerIn: parent<br /> text: model.id<br /> }<br /> }<br /> }<br />} | |||
Revision as of 09:57, 24 February 2015
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
}
}
}
}