Flutter 每次用户滚动列表视图时获取滚动距离

Flutter 每次用户滚动列表视图时获取滚动距离,flutter,Flutter,使用scrollListener和ScrollController,如何获得每次用户滚动时从滚动开始到滚动结束的滚动距离?ScrollController有一个名为offset的属性,它将为您提供当前的偏移量 下面是一个工作示例 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is

使用
scrollListener
ScrollController
,如何获得每次用户滚动时从滚动开始到滚动结束的滚动距离?

ScrollController
有一个名为
offset
的属性,它将为您提供当前的偏移量

下面是一个工作示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  ScrollController controller = ScrollController();
  double initialPosition = 0.0;
  double endPosition = 0.0;
  double distance = 0.0;

  @override
  void initState() {
    super.initState();

    controller = ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: NotificationListener(
        onNotification: (notif) {
          if(notif is ScrollStartNotification) {
            initialPosition = controller.offset;
          } else if(notif is ScrollEndNotification) {
            endPosition = controller.offset;

            distance = endPosition - initialPosition;
            print(distance);
          }
          return true;
        },
        child: ListView(
        controller: controller,
        children: <Widget>[
          Container(
            height: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            color: Colors.red,
          ),
        ],
      ),),
    );
  }
}

导入“包装:颤振/材料.省道”;
void main()=>runApp(MyApp());
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建(构建上下文){
返回材料PP(
标题:“颤振演示”,
主题:主题数据(
主样本:颜色。蓝色,
),
主页:MyHomePage(标题:“颤振演示主页”),
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage({Key,this.title}):超级(Key:Key);
最后的字符串标题;
@凌驾
_MyHomePageState createState()=>\u MyHomePageState();
}
类_MyHomePageState扩展状态{
ScrollController=ScrollController();
双初始位置=0.0;
双端位置=0.0;
双倍距离=0.0;
@凌驾
void initState(){
super.initState();
控制器=滚动控制器();
}
@凌驾
小部件构建(构建上下文){
返回脚手架(
appBar:appBar(
标题:文本(widget.title),
),
正文:NotificationListener(
通知:(不通知){
if(notif是ScrollStartNotification){
initialPosition=控制器偏移量;
}else if(notif是ScrollEndNotification){
endPosition=控制器偏移量;
距离=结束位置-初始位置;
打印(距离);
}
返回true;
},
子:ListView(
控制器:控制器,
儿童:[
容器(
高度:100.0,
颜色:颜色,红色,
),
容器(
高度:100.0,
颜色:颜色,红色,
),
容器(
高度:100.0,
颜色:颜色,红色,
),
容器(
高度:100.0,
颜色:颜色,红色,
),
容器(
高度:100.0,
颜色:颜色,红色,
),
容器(
高度:100.0,
颜色:颜色,红色,
),
容器(
高度:100.0,
颜色:颜色,红色,
),
容器(
高度:100.0,
颜色:颜色,红色,
),
容器(
高度:100.0,
颜色:颜色,红色,
),
],
),),
);
}
}

更新:添加了有助于检测开始和结束滚动的代码。

我如何知道用户何时开始和结束滚动,以便我可以使用开始偏移-结束偏移来表示距离?我不确定你的意思。我不认为有所谓的结束偏移。结束偏移是什么意思?