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

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(Sub-categorize)
 
(3 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]
{{LangSwitch}}
 
[[Category:Snippets::QML]]
'''English''' | [[:How_to_make_QML_ListView_align_bottom-to-top_German|Deutsch]] | [[:How_to_make_QML_ListView_align_bottom-to-top_Bulgarian|Български]]
[[Category:HowTo]]
 
[[Category:Developing with Qt::Qt Quick::QML]]
= 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.
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]]


== The solution ==
== The solution ==
Line 16: Line 12:
* '''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.
* '''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.
* 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]]


== 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 {<br /> id: button<br /> color: &quot;red&amp;quot;
 
anchors {<br /> top: parent.top<br /> left: parent.left<br /> right: parent.right<br /> }
 
height: 20
 
Text {<br /> anchors.centerIn: parent<br /> text: &quot;Click me to add rows&amp;quot;<br /> }


MouseArea {<br /> anchors.fill: parent<br /> onClicked: {<br /> var row = {<br /> &quot;id&amp;quot;:listModel.count<br /> };
Rectangle {
    width: 300
    height: 300
   
    Rectangle {
        id: button
        color: "red"
        height: 20
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
       
        Text {
            anchors.centerIn: parent
            text: "Click me to add rows"
        }


listModel.insert(0, row);<br /> }<br /> }<br /> }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                var row = { "id":listModel.count }
                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
            }
        }
    }
}

Latest revision as of 12:53, 28 November 2016

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

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.

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.

The test code

import QtQuick 1.0

Rectangle {

   width: 300
   height: 300
   
   Rectangle {
       id: button
       color: "red"
       height: 20
       anchors {
           top: parent.top
           left: parent.left
           right: parent.right
       }
        
       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
           }
       }
   }

}