How to make QML ListView align bottom-to-top/de
| 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. |
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
}
}
}
}