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

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.

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

Как да накараме ListView да подрежда елементите си от дъното нагоре

По принцип QML ListView подравнява елементите съм по тяхната горна страна. Новите елементи се добавят отдолу. В някои случаи обаче, примерно за реализация на прозорец, показващ разговор, може да искате по-различно подреждане - елементите се подравняват по долната си страна и новите елементи също се добавят там.

Нормално ListView изглежда ето така: http://gri.not-censored.com/normal-listview.png

Решението

Решението е по-просто, отколкото повечето хора си мислят. Ключовата дума е ротация.

• Завъртете ListView на 180°
• Също така завъртете делегата на 180°, за да се върне в нормална позиция. Не забравяйте да сложите дължината на делегата, колкото цялата дължина на ListView.view.width! Иначе елементите ще се подравняват на дясно.
• За да може новите елементи да се появяват отдолу, винаги ги вкарвайте на позиция 0, вместо да ги добавяте в края.

След като направите тези неща, трябва да получите нещо такова: http://gri.not-censored.com/listview-bottom-to-top.png

Примерен код

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

}