Spark: défilement automatiquement mis à la fin d'une liste ne fonctionne pas correctement
-
04-10-2019 - |
Question
J'utilise le code MXML suivant pour afficher une liste de certaines données. J'ai construit un moteur de rendu personnalisé qui peut avoir une hauteur variable. Chaque fois qu'une nouvelle donnée arrive, la barre de défilement doit aller à la fin de la liste. Je me suis inscrit aux événements qui déclenche un changement de tableau.
Il fonctionne très bien si la hauteur des articles est le même. Mais si cela ne se produit pas, la barre de défilement va un peu au-dessus de la fin.
Si la hauteur d'un élément du milieu de la liste est plus grande, alors les derniers éléments ne sont pas visibles.
Pouvez-vous me donner quelques conseils pour résoudre ce problème?
<s:Scroller width="100%" height="100%" id="scroller" horizontalScrollPolicy="off">
<s:DataGroup
id = "lstComments"
width = "100%"
height = "100%"
clipAndEnableScrolling = "true"
itemRenderer = "myCustomRenderer">
<s:layout>
<s:VerticalLayout
id = "vLayout"
useVirtualLayout = "true"
gap = "2"
variableRowHeight = "true"
horizontalAlign = "left"
verticalAlign = "top"
paddingTop = "0"
paddingBottom = "0" />
</s:layout>
</s:DataGroup>
</s:Scroller>
private function onArrayChange(event:CollectionEvent):void
{
switch(event.kind) {
case CollectionEventKind.ADD:
{
callLater(scrollDown);
break;
}
}
}
private function scrollDown():void
{
scroller.verticalScrollBar.value = scroller.viewport.contentHeight - scroller.viewport.height;
scroller.invalidateProperties();
}
La solution
Enfin, je l'ai trouvé un hack. Le problème a été causé par le scroller.viewport.contentHeight
. Il n'a pas été calculé correctement, quand a été appelé la méthode scrollDown
.
Alors, pour résoudre ce problème, après avoir créé le scroller
je me suis inscrit à l'événement FlexEvent.UPDATE_COMPLETE
.
Et la méthode qui gère cet événement:
private function onUpdateCompleteScroller(event:Event):void
{
//compute the new value for the scroller
var newValue:Number = scroller.viewport.contentHeight - scroller.viewport.height;
if (scroller.verticalScrollBar.value != newValue && newValue > 0)
{
scroller.verticalScrollBar.value = scroller.viewport.contentHeight - scroller.viewport.height;
scroller.invalidateProperties();
}
}
Si quelqu'un d'autre trouve une meilleure solution, je vais accepter sa réponse.