How to detect scroll position of ListView in Flutter

问题

I'm using ListView widget to show items as a list. In a window three, items viewing must the middle item place in the middle.

So how can I detect position of ListView when scrolling stop?

How to detect ListView Scrolling stopped?

回答1:

I used NotificationListener that is a widget that listens for notifications bubbling up the tree. Then use ScrollEndNotification, which indicates that scrolling has stopped.

For scroll position I used _scrollController that type is ScrollController.

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

回答2:

majidfathi69's answer is good, but you don't need to add a controller to the list: (Change ScrollUpdateNotification to ScrollEndNotification when you only want to be notified when scroll ends.)

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

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

回答3:

You can also achieve this functionality with the following steps

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'),
      );
    },
  )),
);
}
}

回答4:

If you want to detect the scroll position of your ListView, you can simply use this;

Scrollable.of(context).position.pixels

回答5:

In addition to @seddiq-sorush answer, you can compare the current position to _scrollController.position.maxScrollExtent and see if the list is at the bottom

回答6:

The NotificationListener now accepts a type argument which makes the code shorter :)

NotificationListener<ScrollEndNotification>(
  child: ListView(
    controller: _scrollController,
    children: ...
  ),
  onNotification: (notification) {
    print(_scrollController.position.pixels);
  },
),

来源：https://stackoverflow.com/questions/54065354/how-to-detect-scroll-position-of-listview-in-flutter

标签

android

dart

Flutter