How to make QML ListView align bottom-to-top/de
Wie man in QML die Ausrichtung eines ListView auf von-unten-nach-oben ändert
Normalerweise werden die Elemente in einem QML ListView von oben nach unten angeordnet. Die Liste beginnt oben, neue Elemente kommen unten dazu. Manchmal möchte man aber das genaue Gegenteil haben, die Liste soll unten beginnen und neue Elemente sollen oben hinzugefügt werden. Man denke z.B. an ein Chat-Fenster oder einen Feed-Reader.
So sieht ein ListView also normalerweise aus: http://gri.not-censored.com/normal-listview.png
Die Lösung
Die Darstellung entsprechen zu ändern ist einfacher als man vielleicht zu denkt. Das Zauberwort lautet: Rotation.
- Man rotiert den ListView um 180°
- Desweiteren rotiert man das Delegate ebenfalls um 180°, damit die Elemente nicht mehr auf dem Kopf stehen. Aber nicht vergessen dem Delegate die ganze Breite von ListView.view.width mitzugeben! Ansonsten sind die Elemente hinterher rechtsbündig, was man ja meistens nicht will.
- Um die neusten Elemente am Boden anzufügen, benutzt man stehts anstatt das Element mit
insert(0)
hinten anzufügen.append()
Jetzt sollte der View so aussehen: http://gri.not-censored.com/listview-bottom-to-top.png
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
}
}
}
}