Dans ce tutoriel, nous allons apprendre à faire défiler vers le bas d’un ListView dans Flutter. Faire défiler vers le bas de la liste est très ennuyeux et voici donc un moyen de faire défiler directement vers le bas ou le haut de la liste.
Table des matières
Configuration du projet :
Vous trouverez ci-dessous un code de démarrage afin que vous puissiez suivre ce tutoriel. Ce code génère une application avec une liste de 100 éléments.
Dard
|
importer ‘package:flutter/material.dart’; void main() { runApp(MonApp()); } la classe MyApp étend StatelessWidget { @passer outre Construction du widget (contexte BuildContext) { retourner MaterialApp( titre : « des geeks pour des geeks », thème : ThemeData( primarySwatch : Colors.green, ), accueil : MyHomePage (titre : ‘Geeks For Geeks’), ); } } la classe MyHomePage étend StatefulWidget { MaPageAccueil({Key? key, requis this.title}) : super(key: key); titre final de la chaîne ; @passer outre _MyHomePageState createState() => _MyHomePageState(); } la classe _MyHomePageState étend State @passer outre Construction du widget (contexte BuildContext) { retourner l’échafaudage( AppBar : AppBar( titre : Texte(widget.titre), ), FloatingActionButton : FloatingActionButton( onAppuyé : () {}, isExtended : vrai, info-bulle : « Défilez vers le bas », enfant : Icône(Icons.arrow_downward), ), corps : ListView.builder( nombre d’articles : 100, itemBuilder : (contexte, index) { return ListTile( titre : Text(« Élément ${index + 1} »), ); }, ), ); } } |
Exécutez le code et le résultat sera le suivant.
Code de démarrage
Mise en œuvre:
Comme vous pouvez le voir notre Bouton d’action flottant ne fonctionne pas car aucune fonction ne lui est attribuée dans le surPressé champ. Tout d’abord, nous aurons besoin d’un Contrôleur de défilement contrôler notre ListView. Alors créez un Contrôleur de défilement.
Dard
|
ScrollController listScrollController = ScrollController(); |
Attribuez maintenant ceci Contrôleur de défilement à la champ de contrôleur de ListView.
Dard
|
contrôleur : listScrollController, |
Venons-en maintenant au onPressed() domaine de Bouton d’action flottant.
Ici, nous utiliserons le code suivant :
Dard
|
surAppuyé : () { if (listScrollController.hasClients) { position finale = listScrollController.position.maxScrollExtent; listScrollController.jumpTo(position); } }, |
Nous avons d’abord vérifié si nous pouvons communiquer avec les membres de Contrôleur de défilement à l’aide de
Dard
|
listScrollController.hasClients |
Si elle n’est pas cochée, nous obtiendrons une erreur d’exécution. Le code ci-dessus renvoie une valeur booléenne. Passant maintenant à la partie suivante, nous avons demandé l’étendue de défilement maximale du Contrôleur de défilement.
Dard
|
position finale = listScrollController.position.maxScrollExtent; |
Cela signifie simplement que nous demandons la dernière position dans le ListView passant par Contrôleur de défilement. Et puis, nous avons demandé au Contrôleur de défilement pour déplacer la position que nous avons obtenue ci-dessus en utilisant le sauter à fonction.
Dard
|
listScrollController.jumpTo(position); |
Exécutez maintenant le code et vous verrez le résultat suivant.
Faites défiler la liste
Nous avons donc réussi à atteindre le bas de notre liste.
Maintenant, vous pensez peut-être que ce serait bien de ne pas passer brusquement au bas de la liste, nous irons facilement. On peut donc obtenir la même chose en utilisant le animerPour fonction.
Remplace le sauter à code avec le code ci-dessous :
Dard
|
listScrollController.animateTo( position, durée : Durée (secondes : 3), courbe : Curves.easeOut, ); |
Maintenant, exécutez à nouveau l’application. Vous verrez le résultat suivant.
Défilement animé
Nous avons appris à faire défiler la liste, maintenant nous allons apprendre à faire défiler vers le haut de la ListView.
Au lieu d’obtenir le maxScrollExtent, nous allons maintenant utiliser le minScrollExtent de Contrôleur de défilement et cela signifie simplement la position supérieure de ListView.
Voici le code et n’oubliez pas de changer l’Icône :
Dard
|
FloatingActionButton : FloatingActionButton( surAppuyé : () { if (listScrollController.hasClients) { position finale = listScrollController.position.minScrollExtent; listScrollController.animateTo( position, durée : Durée (secondes : 3), courbe : Curves.easeOut, ); } }, isExtended : vrai, info-bulle : « Défilez vers le haut », enfant : Icon(Icons.arrow_upward), ), |
Maintenant, exécutez à nouveau l’application.
Défilement en haut de ListView
Code source complet :
Dard
|
importer ‘package:flutter/material.dart’; void main() { runApp(MonApp()); } la classe MyApp étend StatelessWidget { @passer outre Construction du widget (contexte BuildContext) { retourner MaterialApp( titre : « des geeks pour des geeks », thème : ThemeData( primarySwatch : Colors.green, ), accueil : MyHomePage (titre : ‘Geeks For Geeks’), ); } } la classe MyHomePage étend StatefulWidget { MaPageAccueil({Key? key, requis this.title}) : super(key: key); titre final de la chaîne ; @passer outre _MyHomePageState createState() => _MyHomePageState(); } la classe _MyHomePageState étend State ScrollController listScrollController = ScrollController(); @passer outre Construction du widget (contexte BuildContext) { retourner l’échafaudage( AppBar : AppBar( titre : Texte(widget.titre), ), FloatingActionButton : FloatingActionButton( surAppuyé : () { if (listScrollController.hasClients) { position finale = listScrollController.position.maxScrollExtent; listScrollController.animateTo( position, durée : Durée (secondes : 3), courbe : Curves.easeOut, ); } }, isExtended : vrai, info-bulle : « Défilez vers le bas », enfant : Icône(Icons.arrow_downward), ), corps : ListView.builder( contrôleur : listScrollController, nombre d’articles : 100, itemBuilder : (contexte, index) { return ListTile( titre : Text(« Élément ${index + 1} »), ); }, ), ); } } |
Sortir:
Faites défiler vers le bas de la liste
Faites défiler vers le haut de la liste
Conclusion:
Dans ce didacticiel, nous avons appris une fonctionnalité très intéressante de ListView que vous avez peut-être rencontrée sur de nombreux sites Web et blogs. Alors maintenant, vous pouvez également implémenter la même fonctionnalité dans votre application.
