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)
 
(4 intermediate revisions by 3 users not shown)
Line 1: Line 1:
'''English''' [[How to make QML ListView align bottom-to-top Bulgarian|Български]]
{{LangSwitch}}
[[Category:Snippets::QML]]
[[Category:HowTo]]
[[Category:Developing with Qt::Qt Quick::QML]]
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.


=How to make <span class="caps">QML</span> ListView align bottom-to-top=
== The solution ==


Normally <span class="caps">QML</span> 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 is easier than most people think. '''Rotation''' is the keyword.


This is how the ListView normally looks like:<br />[[Image:normal-listview.png]]
* 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 solution==
== The test code ==


The solution is easier than most people think. '''Rotation''' is the keyword.
<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"
        }


* Rotate the ListView by 180°
        MouseArea {
* '''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.
            anchors.fill: parent
* In order to get the newest items at the bottom, always insert the newest one at index 0 instead of appending it.
            onClicked: {
                var row = { "id":listModel.count }
                listModel.insert(0, row)
            }
        }
    }


After doing these steps, your view should look like this:<br />[[Image:listview-bottom-to-top.png]]
    ListView {
        rotation: 180


==The test code==
        anchors {
            top: button.bottom
            bottom: parent.bottom
            left: parent.left
            right: parent.right
        }


===Categories:===
        model: ListModel {
            id: listModel
        }


* [[:Category:Developing with Qt|Developing_with_Qt]]
        delegate: Rectangle {
** [[:Category:Developing with Qt::Qt Quick|Qt_Quick]]
            rotation: 180
* [[:Category:Developing with Qt::Qt Quick::QML|QML]]
            width: ListView.view.width
            height: 20
            color: "green"


* [[:Category:HowTo|HowTo]]
            Text {
* [[:Category:snippets|snippets]]
                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
           }
       }
   }

}