Qt QML ListView contentHeight comportement

J'ai un problème très précis lors de l'utilisation d'un QML élément ListView en combinaison avec ses propriétés de la section.

Je suis à l'aide de Qt 4.8.6, mais j'ai également le même problème lorsque j'essaie ce Qt 5.3.1.

Le code suivant peut également être exécuté dans les anciennes versions de Qt, en changeant simplement l'instruction import pour

importation QtQuick 1.0 (Pour < Qt 4.7.4)

ou

importation QtQuick 1.1 (>= Qt 4.7.4)

Voici une utilisation autonome de cas pour démontrer mon problème:

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 > 1) {
animalListView.contentY -= animalListView.height;
animalListView.returnToBounds();
--pageNumber;
}             
}
}
enabled: (!animalListView.atYBeginning)
visible: !(animalListView.atYBeginning && animalListView.atYEnd)
Text {
anchors.centerIn: parent
font.family: "Wingdings 3"
font.pixelSize: 40
text: "Ç" //Up arrow
}
}
Text {
visible: totalPages > 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 < totalPages) {
animalListView.contentY += animalListView.height;
++pageNumber;
}
}
}
enabled: (!animalListView.atYEnd)
visible: !(animalListView.atYBeginning && animalListView.atYEnd)
Text {
anchors.centerIn: parent
font.family: "Wingdings 3"
font.pixelSize: 40
text: "È" //Down arrow
}
}
}

Je suis à l'aide de la liste pour afficher une liste de modèles animaux, classés par leur taille. Pour réaliser ce classement, le point de vue, j'utilise le section.propriété, section.critiria et section.délégué propriétés de la liste, tel qu'implémenté dans le code donné ci-dessus.

(Note: s'il vous Plaît ignorer le fait que le modèle que je l'approvisionnement de la liste n'est pas triée, je comprends que cela permettra de créer de nombreux dupliquer les entrées de catégorie dans la liste. Ce n'est pas la question ici).

Lorsque le nombre de modèles de dépasser la zone visible de la ListView, je suis en utilisant la propriété totalPages de calculer combien de pleine ListView pages il y a pour la navigation. Les touches flèche Haut et flèche vers le Bas les boutons de simplement décrémenter et incrémenter le de contenu.Y de la liste par la hauteur de la ListView respectivement.

Le problème est que le contentHeight de la liste ne reste pas statique, elle est dynamique en évolution et la cause de mes totalPages de calcul des propriétés à être incorrect.

Il est intéressant de noter que ce comportement se produit si et seulement si j'ai mis une hauteur de mes sectionHeaderDelegate rectangle. Si je commente la hauteur de la déclaration (hauteur: 50), le contentHeight de la liste reste statique, comme prévu, avec l'inconvénient que les en-têtes de section et les catégories sont maintenant sur le dessus du modèle de texte, ce qui n'est pas du tout utile.

Donc ma question est, pourquoi le contentHeight de la QML élément ListView modifier dynamiquement si et seulement si j'utilise une section délégué, qui est la hauteur a été réglé à une valeur différente de zéro?

Aussi, j'ai laissé les propriétés suivantes dans la liste à des fins de test, la liste doit être utilisé avec les flèches Haut/Bas:

          interactive: true
flickableDirection: Flickable.VerticalFlick
boundsBehavior: Flickable.StopAtBounds

OriginalL'auteur ManuelH | 2014-09-09