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
Vous devez vous connecter pour publier un commentaire.
C'est parce que ListView est de l'estimation de la contentHeight actuellement par les éléments visibles. Vérifier ce qui se passe quand vos articles ne peuvent pas être regroupés. ListView est d'éviter l'instanciation de chaque élément, de sorte qu'il ne sait pas la bonne taille de la non visible de contenu. Regardez ce fil.
Ma question purement découle de l'utilisation de la section délégué. Réglage de la déléguée de la hauteur à rien d'autre que sa valeur implicite causes de la contentHeight être calculé/estimation étrangement, même si la section délégué a une hauteur fixe!
Votre en-tête de section a dynamique de la hauteur, car il peut être tirage avec 50 pixels de hauteur si elle est d'abord dans la section ou de groupe n'est pas quand il n'est pas le premier élément dans le groupe. Comme je l'ai dit, regarde ce qui se passe quand vos articles ne peuvent pas être groupés - chaque fixé la taille de l'élément a son propre fixe la taille de l'en-tête de section rien n'est donc dynamique.
Pourriez-vous fournir un schéma, ou une certaine représentation visuelle de ce que vous essayez de dire? Je n'ai pas tout suivi, désolé 🙁
OriginalL'auteur Mateusz Drost
Je sais que c'est ancien, mais je vais y répondre ici de toute façon parce que je cherchais une solution;
Si vous avez une hauteur fixe pour vos articles, vous pouvez régler la hauteur du conteneur dynamiquement par simple réglage de la valeur par la formule:
Si vous avez de la hauteur variable des éléments, il sera plus difficile; la solution est probablement d'avoir un événement onChange d'incendie à une fonction qui se traîne à travers vos articles et ajoute manuellement les hauteurs.
OriginalL'auteur Kver