如何在Flutter中检测ListView的滚动位置

Question

我正在使用ListView小部件将项目显示为列表。在三个窗口中，查看项目必须将中间项目放置在中间。

那么在滚动停止时如何检测ListView的位置？

如何检测ListView滚动停止？

Answer 1

我使用了 NotificationListener ，它是一个小部件，用于监听气泡冒泡的通知。然后使用 ScrollEndNotification ，它指示滚动已停止。

对于滚动位置，我使用了_scrollController，其类型为 ScrollController 。

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

Answer 2

const todos = [{ task: 'Go shopping', id: Number, done: false }, { task: 'play football', id: Number, done: true } ] const stillTodos = todos.filter(({done}) => !done) console.log(stillTodos.length, stillTodos) 现在接受一个类型参数，这使得代码更短 :)

NotificationListener

Answer 3

如果您想检测ListView的滚动位置，则只需使用它即可；

Scrollable.of(context).position.pixels

Answer 4

您还可以通过以下步骤实现此功能

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

Answer 5

majidfathi69的回答很好，但是您无需在列表中添加控制器：

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

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

Answer 6

除了@ seddiq-sorush答案之外，您还可以将当前位置与_scrollController.position.maxScrollExtent进行比较，看看列表是否位于底部