How to make QML ListView align bottom-to-top: Difference between revisions
Jump to navigation
Jump to search
AutoSpider (talk | contribs) (Add "cleanup" tag) |
(Cleanup) |
||
Line 1: | Line 1: | ||
{{ | {{LangSwitch}} | ||
[[Category:Snippets]] | [[Category:Snippets]] | ||
[[Category:HowTo]] | [[Category:HowTo]] | ||
[[Category:Developing_with_Qt::Qt Quick]] | [[Category:Developing_with_Qt::Qt Quick]] | ||
[[Category:Developing_with_Qt::Qt Quick::QML]] | [[Category:Developing_with_Qt::Qt Quick::QML]] | ||
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. | 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 == | ||
Line 22: | Line 13: | ||
* '''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. | * '''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. | ||
== The test code == | == The test code == | ||
Line 32: | Line 20: | ||
Rectangle { | Rectangle { | ||
width: 300 | |||
height: 300 | |||
Rectangle { | Rectangle { | ||
id: button | |||
color: "red" | |||
height: 20 | |||
anchors { | anchors { | ||
top: parent.top | |||
left: parent.left | |||
right: parent.right | |||
} | |||
Text { | |||
anchors.centerIn: parent | |||
Text { | text: "Click me to add rows" | ||
} | |||
listModel.insert(0, row) | MouseArea { | ||
anchors.fill: parent | |||
onClicked: { | |||
var row = { "id":listModel.count } | |||
listModel.insert(0, row) | |||
} | |||
} | |||
} | |||
ListView { | ListView { | ||
rotation: 180 | |||
anchors { | anchors { | ||
top: button.bottom | |||
bottom: parent.bottom | |||
left: parent.left | |||
right: parent.right | |||
} | |||
model: ListModel { | model: ListModel { | ||
id: listModel | |||
} | |||
delegate: Rectangle { | delegate: Rectangle { | ||
rotation: 180 | |||
width: ListView.view.width | |||
height: 20 | |||
color: "green" | |||
Text { | Text { | ||
anchors.centerIn: parent | |||
text: model.id | |||
} | |||
} | |||
} | |||
} | } |
Revision as of 19:09, 28 June 2015
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
}
}
}
}