How to make QML ListView align bottom-to-top: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]
[[Category:Snippets]]
[[Category:HowTo]]
[[Category:Developing_with_Qt::Qt Quick]]
[[Category:Developing_with_Qt::Qt Quick::QML]]


'''English''' | [[:How_to_make_QML_ListView_align_bottom-to-top_German|Deutsch]] | [[:How_to_make_QML_ListView_align_bottom-to-top_Bulgarian|Български]]
'''English''' | [[:How_to_make_QML_ListView_align_bottom-to-top_German|Deutsch]] | [[:How_to_make_QML_ListView_align_bottom-to-top_Bulgarian|Български]]
Line 7: Line 10:
Normally QML ListView aligns all items at the top. New items get stacked on bottom. For some use cases like a conversations view you may want a different layout which starts at the bottom and also adds new items there.
Normally QML ListView aligns all items at the top. New items get stacked on bottom. For some use cases like a conversations view you may want a different layout which starts at the bottom and also adds new items there.


This is how the ListView normally looks like:<br />[[Image:http://gri.not-censored.com/normal-listview.png|http://gri.not-censored.com/normal-listview.png]]
This is how the ListView normally looks like:
[[Image:http://gri.not-censored.com/normal-listview.png|http://gri.not-censored.com/normal-listview.png]]


== The solution ==
== The solution ==
Line 17: Line 21:
* In order to get the newest items at the bottom, always insert the newest one at index 0 instead of appending it.
* In order to get the newest items at the bottom, always insert the newest one at index 0 instead of appending it.


After doing these steps, your view should look like this:<br />[[Image:http://gri.not-censored.com/listview-bottom-to-top.png|http://gri.not-censored.com/listview-bottom-to-top.png]]
After doing these steps, your view should look like this:
[[Image:http://gri.not-censored.com/listview-bottom-to-top.png|http://gri.not-censored.com/listview-bottom-to-top.png]]


== The test code ==
== The test code ==


<code><br />import QtQuick 1.0
<code>
import QtQuick 1.0


Rectangle {<br /> width: 300<br /> height: 300
Rectangle {
width: 300
height: 300


Rectangle {<br /> id: button<br /> color: &quot;red&amp;quot;
Rectangle {
id: button
color: "red"


anchors {<br /> top: parent.top<br /> left: parent.left<br /> right: parent.right<br /> }
anchors {
top: parent.top
left: parent.left
right: parent.right
}


height: 20
height: 20


Text {<br /> anchors.centerIn: parent<br /> text: &quot;Click me to add rows&amp;quot;<br /> }
Text {
anchors.centerIn: parent
text: "Click me to add rows"
}


MouseArea {<br /> anchors.fill: parent<br /> onClicked: {<br /> var row = {<br /> &quot;id&amp;quot;:listModel.count<br /> };
MouseArea {
anchors.fill: parent
onClicked: {
var row = {
"id":listModel.count
};


listModel.insert(0, row);<br /> }<br /> }<br /> }
listModel.insert(0, row);
}
}
}


ListView {<br /> rotation: 180
ListView {
rotation: 180


anchors {<br /> top: button.bottom<br /> bottom: parent.bottom<br /> left: parent.left<br /> right: parent.right<br /> }
anchors {
top: button.bottom
bottom: parent.bottom
left: parent.left
right: parent.right
}


model: ListModel {<br /> id: listModel<br /> }
model: ListModel {
id: listModel
}


delegate: Rectangle {<br /> rotation: 180<br /> width: ListView.view.width<br /> height: 20<br /> color: &quot;green&amp;quot;
delegate: Rectangle {
rotation: 180
width: ListView.view.width
height: 20
color: "green"


Text {<br /> anchors.centerIn: parent<br /> text: model.id<br /> }<br /> }<br /> }<br />}
Text {
anchors.centerIn: parent
text: model.id
}
}
}
}

Revision as of 10:17, 25 February 2015


English | Deutsch | Български

How to make QML ListView align bottom-to-top

Normally QML ListView aligns all items at the top. New items get stacked on bottom. For some use cases like a conversations view you may want a different layout which starts at the bottom and also adds new items there.

This is how the ListView normally looks like: http://gri.not-censored.com/normal-listview.png

The solution

The solution is easier than most people think. Rotation is the keyword.

  • Rotate the ListView by 180°
  • Also rotate the Delegate by 180° to get it back to normal direction. Don't forget to give the delegate the whole width of ListView.view.width! Otherwise your items are right-aligned.
  • In order to get the newest items at the bottom, always insert the newest one at index 0 instead of appending it.

After doing these steps, your view should look like this: http://gri.not-censored.com/listview-bottom-to-top.png

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

}