title: Qt QML ListView contentHeight behaviour
body: <p>I am having a very specific issue when using a QML ListView element in combination with its section properties.</p>
  
  <p>I am using Qt 4.8.6, but I also have the same issue when I try this in Qt 5.3.1.</p>
  
  <p>The following code can also be run in older versions of Qt by simply changing the import statement to </p>
  
  <blockquote>
    <p>import QtQuick 1.0 (For &lt; Qt 4.7.4)</p>
  </blockquote>
  
  <p>or </p>
  
  <blockquote>
    <p>import QtQuick 1.1 (For >= Qt 4.7.4)</p>
  </blockquote>
  
  <p>Here is a standalone use case to demonstrate my problem:</p>
  
  <pre><code>import QtQuick 2.2
  
  Rectangle {
      width: 800
      height: 800
      color: "black"
  
      property int pageNumber: 1
      property int totalPages: Math.ceil(animalListView.contentHeight/animalListView.height)
  
      Text {
          x: 2
          y: 90
          color: "Orange"
          text: "Expected height: " + (animalListView.count*70 + (50*10))
          font.pixelSize: 28
      }
  
      Text {
          x: 2
          y: 0
          color: "Orange"
          text: "Actual ContentHeight: " + animalListView.contentHeight
          font.pixelSize: 28
      }
  
      Text {
          x: 2
          y: 30
          color: "Orange"
          text: "Actual ChildrenRectHeight: " + animalListView.childrenRect.height
          font.pixelSize: 28
      }
  
      Text {
          x: 2
          y: 60
          color: "Orange"
          text: "Total model items (minus sections): " + animalListView.count
          font.pixelSize: 28
      }
  
      Rectangle {
          id: boundingRect
          width: 640
          height: 500
          x: 20
          y: 200
          radius: 10
          border.width: 1
          border.color: "green"
          color: "transparent"
  
          // The delegate for each section header
          Component {
              id: sectionHeaderDelegate
              Rectangle {
                  width: parent.width
                  height: 50 // this is the problem                
                  color: "transparent"                
  
                  Text {
                      anchors.left: parent.left
                      id: headerText
                      text: section
                      color: "red"
                  }
  
                  Rectangle {
                      anchors.fill: parent
                      border.color: "purple"                    
                      border.width: 1    
                      color: "transparent"
                  }
              }
          }
  
          ListModel {
               id: animalsModel
               ListElement { name: "1Parrot"; size: "Small" }
               ListElement { name: "2Guinea pig"; size: "Small" }
               ListElement { name: "3Dog"; size: "Medium" }
               ListElement { name: "4Cat"; size: "Medium" }
               ListElement { name: "5Elephant"; size: "Medium" }
               ListElement { name: "6Parrot"; size: "Small" }
               ListElement { name: "7Guinea pig"; size: "Small" }
               ListElement { name: "8Dog"; size: "Medium" }
               ListElement { name: "9Cat"; size: "Medium" }
               ListElement { name: "10Elephant"; size: "Large" }
               ListElement { name: "11Parrot"; size: "Large" }
               ListElement { name: "12Guinea pig"; size: "Large" }
               ListElement { name: "13Dog"; size: "Large" }
               ListElement { name: "14Cat"; size: "Medium" }
               ListElement { name: "15Elephant"; size: "Large" }
               ListElement { name: "16Parrot"; size: "Small" }
               ListElement { name: "17Guinea pig"; size: "Small" }
               ListElement { name: "18Dog"; size: "Medium" }
               ListElement { name: "19Cat"; size: "Medium" }
               ListElement { name: "20Elephant"; size: "Large" }
          }
  
          ListView {
              id: animalListView
              anchors.fill: parent
              anchors.margins: 10
              clip: true
              interactive: true
              flickableDirection: Flickable.VerticalFlick
              boundsBehavior: Flickable.StopAtBounds
              model: animalsModel
  
              delegate: Item {
                  width: parent.width
                  height: 70
                      Text {
                          text: name
                          color: "green"
                      }
  
                      Rectangle {
                          anchors.fill: parent
                          border.color: "yellow"                    
                          border.width: 1    
                          color: "transparent"
                      }
                  }
  
              section.property: "size"
              section.criteria: ViewSection.FullString
              section.delegate: sectionHeaderDelegate
          }
      }
  
      Rectangle {
          anchors.top: boundingRect.top
          anchors.left: boundingRect.right
          anchors.leftMargin: 20        
          width: 40
          height: 40
          color: "blue"
  
           MouseArea {
               anchors.fill: parent
               onClicked: {
                  if (pageNumber &gt; 1) {
                      animalListView.contentY -= animalListView.height;
                      animalListView.returnToBounds();
                      --pageNumber;
                  }             
               }
           }
  
          enabled: (!animalListView.atYBeginning)
          visible: !(animalListView.atYBeginning &amp;&amp; animalListView.atYEnd)
  
          Text {
              anchors.centerIn: parent
              font.family: "Wingdings 3"
              font.pixelSize: 40
              text: "Ç" // Up arrow
          }
      }
  
      Text {
          visible: totalPages &gt; 1
          anchors.left: boundingRect.right
          anchors.verticalCenter: boundingRect.verticalCenter
          width: 100
          height: 20
          font.pixelSize: 18
          horizontalAlignment: Text.AlignHCenter
          color: "red"
          text: qsTr("%1 of %2").arg(pageNumber).arg(totalPages)
      }
  
      Rectangle {
          anchors.bottom: boundingRect.bottom
          anchors.left: boundingRect.right
          anchors.leftMargin: 20
          width: 40
          height: 40
          color: "orange"
  
           MouseArea {
               anchors.fill: parent
               onClicked: {
                  if (pageNumber &lt; totalPages) {
                      animalListView.contentY += animalListView.height;
                      ++pageNumber;
                  }
               }
           }
  
          enabled: (!animalListView.atYEnd)
          visible: !(animalListView.atYBeginning &amp;&amp; animalListView.atYEnd)
  
          Text {
              anchors.centerIn: parent
              font.family: "Wingdings 3"
              font.pixelSize: 40
              text: "È" // Down arrow
          }
      }
  
  }
  </code></pre>
  
  <p>I am using the ListView to display a list of animal models, categorized by their size. In order to achieve this categorization in the view, I use the <em>section.property</em>, <em>section.critiria</em> and <em>section.delegate</em> properties of the ListView as implemented in the code given above.</p>
  
  <p>(<strong>Note</strong>: Please ignore the fact that the model I supply to the ListView is not sorted, I understand that this will create numerous duplicate category entries in the ListView. This is beside the point here.)</p>
  
  <p>When the number of models exceed the visible area of the ListView, I am using the property <em>totalPages</em> to calculate how many full ListView pages there are for navigation. The Up arrow and Down arrow buttons simply decrement and increment the <em>content.Y</em> of the ListView by the height of the ListView respectively.</p>
  
  <p>The problem is that the <em>contentHeight</em> of the ListView does not remain static, it is dynamically changing and causing my <em>totalPages</em> property calculation to be incorrect. </p>
  
  <p>It is interesting to note that this behavior occurs if and only if I set a height for my <em>sectionHeaderDelegate</em> rectangle. If I comment out the height statement (height: 50), the <em>contentHeight</em> of the ListView remains static, as expected - with the downside that the section headers/categories are now on top of the model text, which is not useful at all.</p>
  
  <p><strong>So my question is, why does the contentHeight of the QML ListView element dynamically change if and only if I use a section delegate who's height has been set to a non-zero value?</strong></p>
  
  <p>Also, I have left the following properties in the ListView for testing purposes, the ListView should be used with the Up/Down arrows:</p>
  
  <blockquote>
  <pre><code>          interactive: true
            flickableDirection: Flickable.VerticalFlick
            boundsBehavior: Flickable.StopAtBounds
  </code></pre>
  </blockquote>