23
votes

Comment détecter la position de défilement de ListView dans Flutter

J'utilise le widget ListView pour afficher les éléments sous forme de liste. Dans une fenêtre trois, les éléments affichés doivent être placés au milieu.

Alors, comment puis-je détecter la position de ListView lors de l'arrêt du défilement?

Comment détecter l'arrêt du défilement ListView?


0 commentaires

5 Réponses :


1
votes

Si vous souhaitez détecter la position de défilement de votre ListView , vous pouvez simplement utiliser ceci;

Scrollable.of(context).position.pixels


1 commentaires

Comment détecter l'arrêt du défilement ListView?



30
votes

J'ai utilisé NotificationListener qui est un widget qui écoute les notifications qui bouillonnent dans l'arborescence. Utilisez ensuite ScrollEndNotification , qui indique que le défilement s'est arrêté.

Pour la position de défilement, j'ai utilisé _scrollController ce type est ScrollController .

new NotificationListener(
  child: new ListView(
    controller: _scrollController,
    children: ...
  ),
  onNotification: (t) {
    if (t is ScrollEndNotification) {
      print(_scrollController.position.pixels);
    }
  },
),


2 commentaires

où vous placez ces codes, dans ListView (ui) ou en bloc?


enfant: nouveau NotificationListener (



4
votes

Vous pouvez également obtenir cette fonctionnalité avec les étapes suivantes

import 'package:flutter/material.dart';

class YourPage extends StatefulWidget {
  YourPage({Key key}) : super(key: key);

  @override
 _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {

  ScrollController _scrollController;
  double _scrollPosition;

 _scrollListener() {
  setState(() {
   _scrollPosition = _scrollController.position.pixels;
 });
}

@override
void initState() {
  _scrollController = ScrollController();
  _scrollController.addListener(_scrollListener);
  super.initState();
}

 @override
 Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
    automaticallyImplyLeading: false,
    title: Text('Position $_scrollPosition pixels'),
  ),
  body: Container(
      child: ListView.builder(
    controller: _scrollController,
    itemCount: 200,
    itemBuilder: (context, index) {
      return ListTile(
        leading: Icon(Icons.mood),
        title: Text('Item: $index'),
      );
    },
  )),
);
}
}

entrez la description de l'image ici


0 commentaires

13
votes

La réponse de majidfathi69 est bonne, mais vous n'avez pas besoin d'ajouter un contrôleur à la liste: (Remplacez ScrollUpdateNotification par ScrollEndNotification lorsque vous souhaitez uniquement être averti lorsque le défilement se termine.)

NotificationListener<ScrollUpdateNotification>(
  child: ListView(
    children: ...
  ),
  onNotification: (notification) {
    //How many pixels scrolled from pervious frame
    print(notification.scrollDelta);

    //List scroll position
    print(notification.metrics.pixels);
  },
),


0 commentaires

0
votes

En plus de la réponse @ seddiq-sorush, vous pouvez comparer la position actuelle à _scrollController.position.maxScrollExtent et voir si la liste est en bas


0 commentaires