Български English
Как да накараме ListView да подрежда елементите си от дъното нагоре
По принцип QML ListView подравнява елементите съм по тяхната горна страна. Новите елементи се добавят отдолу. В някои случаи обаче, примерно за реализация на прозорец, показващ разговор, може да искате по-различно подреждане – елементите се подравняват по долната си страна и новите елементи също се добавят там.
Нормално ListView изглежда ето така:
Решението
Решението е по-просто, отколкото повечето хора си мислят. Ключовата дума е ротация.
- Завъртете ListView на 180°
- Също така завъртете делегата на 180°, за да се върне в нормална позиция. Не забравяйте да сложите дължината на делегата, колкото цялата дължина на ListView.view.width! Иначе елементите ще се подравняват на дясно.
- За да може новите елементи да се появяват отдолу, винаги ги вкарвайте на позиция 0, вместо да ги добавяте в края.
След като направите тези неща, трябва да получите нещо такова:
Примерен код
- 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
- }
- }
- }
- }
