How to make QML ListView align bottom-to-top/bg: Difference between revisions
No edit summary |
(Sub-categorize) |
||
(3 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
[[Category:Snippets]] | {{Cleanup | reason=Auto-imported from ExpressionEngine.}} | ||
{{LangSwitch}} | |||
[[Category:Snippets::QML]] | |||
[[Category:HowTo]] | |||
[[Category:Developing with Qt::Qt Quick::QML]] | |||
[[Category:Bulgarian]] | |||
= Как да накараме ListView да подрежда елементите си от дъното нагоре = | = Как да накараме ListView да подрежда елементите си от дъното нагоре = | ||
Line 7: | Line 10: | ||
По принцип QML ListView подравнява елементите съм по тяхната горна страна. Новите елементи се добавят отдолу. В някои случаи обаче, примерно за реализация на прозорец, показващ разговор, може да искате по-различно подреждане - елементите се подравняват по долната си страна и новите елементи също се добавят там. | По принцип QML ListView подравнява елементите съм по тяхната горна страна. Новите елементи се добавят отдолу. В някои случаи обаче, примерно за реализация на прозорец, показващ разговор, може да искате по-различно подреждане - елементите се подравняват по долната си страна и новите елементи също се добавят там. | ||
Нормално ListView изглежда ето така: | Нормално ListView изглежда ето така: | ||
[[Image:http://gri.not-censored.com/normal-listview.png|http://gri.not-censored.com/normal-listview.png]] | |||
== Решението == | == Решението == | ||
Line 17: | Line 21: | ||
* За да може новите елементи да се появяват отдолу, винаги ги вкарвайте на позиция 0, вместо да ги добавяте в края. | * За да може новите елементи да се появяват отдолу, винаги ги вкарвайте на позиция 0, вместо да ги добавяте в края. | ||
След като направите тези неща, трябва да получите нещо такова: | След като направите тези неща, трябва да получите нещо такова: | ||
[[Image:http://gri.not-censored.com/listview-bottom-to-top.png|http://gri.not-censored.com/listview-bottom-to-top.png]] | |||
== Примерен код == | == Примерен код == | ||
<code> | <code> | ||
import QtQuick 1.0 | |||
Rectangle { | Rectangle { | ||
width: 300 | |||
height: 300 | |||
Rectangle { | Rectangle { | ||
id: button | |||
color: "red" | |||
anchors { | anchors { | ||
top: parent.top | |||
left: parent.left | |||
right: parent.right | |||
} | |||
height: 20 | height: 20 | ||
Text { | Text { | ||
anchors.centerIn: parent | |||
text: "Click me to add rows" | |||
} | |||
MouseArea { | MouseArea { | ||
anchors.fill: parent | |||
onClicked: { | |||
var row = { | |||
"id":listModel.count | |||
}; | |||
listModel.insert(0, row); | listModel.insert(0, row); | ||
} | |||
} | |||
} | |||
ListView { | ListView { | ||
rotation: 180 | |||
anchors { | anchors { | ||
top: button.bottom | |||
bottom: parent.bottom | |||
left: parent.left | |||
right: parent.right | |||
} | |||
model: ListModel { | model: ListModel { | ||
id: listModel | |||
} | |||
delegate: Rectangle { | delegate: Rectangle { | ||
rotation: 180 | |||
width: ListView.view.width | |||
height: 20 | |||
color: "green" | |||
Text { | Text { | ||
anchors.centerIn: parent | |||
text: model.id | |||
} | |||
} | |||
} | |||
} |
Latest revision as of 12:51, 28 November 2016
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. |
Как да накараме 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
}
}
}
}