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

Български English

Как да накараме 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
}
}
}

}