How to make QML ListView align bottom-to-top: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(Sub-categorize) |
||
(4 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
{{LangSwitch}} | |||
[[Category:Snippets::QML]] | |||
[[Category:HowTo]] | |||
[[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. | |||
= | == 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 | == The test code == | ||
<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 | |||
} | |||
} | |||
} | |||
} |
Latest revision as of 12:53, 28 November 2016
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
}
}
}
}