How to make QML ListView align bottom-to-top/de

From Qt Wiki
Jump to: navigation, search

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

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 insert(0) anstatt das Element mit append() hinten anzufügen.

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
}
}
}

}