Flutter - ScrollController 滚动监听及控制

Posted 2023-03-29 a136447572

1 ScrollController


jumpTo(double offset)、animateTo(double offset,…)：这两个方法用于跳转到指定的位置，它们不同之处在于，后者在跳转时会执行一个动画，而前者不会。

实例 点击按钮返回顶部 ,且按钮在list滑动一定距离后才会显示

重点1 在state 初始化是 监听_controller.addListener(());
列表滑动大于1500 之后 显示返回顶部按钮
数据不够是 可点击按钮 "点击1"添加数据

@override
void initState() 
  // TODO: implement initState
  super.initState();
  _controller.addListener(() 
    print(_controller.offset);
    if(_controller.offset<1500&&isShowTopBtn)
      setState(() 
        isShowTopBtn  = false;
      );
    else if(_controller.offset>=1500&&!isShowTopBtn)
      setState(() 
        isShowTopBtn  = true;
      );
    
  );

 	// 返回顶部的调用 _controller.animateTo
					Container(
              child: !isShowTopBtn?null:ElevatedButton(onPressed: ()
                _controller.animateTo(0, duration: Duration(milliseconds: 200), curve: Curves.ease);
              , child: Text("返回顶部")),
            ),

全部代码

class MyListViewState0 extends StatefulWidget 
  const MyListViewState0(Key? key) : super(key: key);

  @override
  State<MyListViewState0> createState() => _MyState0();


class _MyState0 extends State<MyListViewState0> 

  int itemss = 1 ;
  List<String> list2 = [
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5"];
  final ScrollController _controller = ScrollController();
  bool isShowTopBtn = false ;


  @override
  void initState() 
    // TODO: implement initState
    super.initState();
    _controller.addListener(() 
      print(_controller.offset);
      if(_controller.offset<1000&&isShowTopBtn)
        setState(() 
          isShowTopBtn  = false;
        );
      else if(_controller.offset>=1000&&!isShowTopBtn)
        setState(() 
          isShowTopBtn  = true;
        );
      
    );
  


  @override
  Widget build(BuildContext context) 
    return ConstrainedBox(
        constraints: BoxConstraints.tightFor(width: double.infinity),
        child: Column(

          children: <Widget>[
            ElevatedButton(onPressed: ()
              setState(() 
                print(_controller.offset);
                itemss ++ ;
                list2.insert(0, "-----------$itemss");
              );
            , child: Text("点击1")),
            Container(
              child: !isShowTopBtn?null:ElevatedButton(onPressed: ()
                _controller.animateTo(0, duration: Duration(milliseconds: 200), curve: Curves.ease);
              , child: Text("返回顶部")),
            ),
            Expanded(child:  ListViewState2(list2,_controller))

          ],
        )
    );
  


class ListViewState2 extends StatelessWidget

  List<String> list = [] ;
  late ScrollController _controller ;
  late bool _isShowTopBtn ;

  ListViewState2(List<String> item, ScrollController controller,Key? key) : super(key: key)
    list = item ;
    _controller = controller;
  

  @override
  Widget build(BuildContext context) 
    // TODO: implement build
    return Scrollbar(child: ListView.builder(
        itemCount: list.length,
        itemExtent: 50,
        controller: _controller,
        itemBuilder: (BuildContext context ,int index)
          return Text(list[index]);
        
    ));
  

实例2 通过 NotificationListener 监听 可滚动组件的滑动情况

Flutter Widget树中子Widget可以通过发送通知（Notification）与父(包括祖先)Widget通信。父级组件可以通过NotificationListener组件来监听自己关注的通知，这种通信方式类似于Web开发中浏览器的事件冒泡，

可滚动组件在滚动时会发送ScrollNotification类型的通知，ScrollBar正是通过监听滚动通知来实现的。通过NotificationListener监听滚动事件和通过ScrollController有两个主要的不同：

通过NotificationListener可以在从可滚动组件到widget树根之间任意位置都能监听。而ScrollController只能和具体的可滚动组件关联后才可以。

收到滚动事件后获得的信息不同；NotificationListener在收到滚动事件时，通知中会携带当前滚动位置和ViewPort的一些信息，而ScrollController只能获取当前滚动位置。

NotificationListener<ScrollNotification>(
  onNotification: (ScrollNotification scrollNotification)
	
 child:
)
// 通过   onNotification  监听
// 通过   child 配置子view

scrollNotification.metrics  // 可以获取到滑动的位置信息
scrollNotification.metrics.pixels // 当前位置
scrollNotification.metrics.maxScrollExtent // 总长度
...  // 其余的还需要再看看

class MyNotificationListenerWidget extends StatefulWidget 
  const MyNotificationListenerWidget(Key? key) : super(key: key);

  @override
  State<MyNotificationListenerWidget> createState() => _MyNotificationListener();


class _MyNotificationListener extends State<MyNotificationListenerWidget> 
  String _progress = "0%"; //保存进度百分比

  @override
  Widget build(BuildContext context) 
    // TODO: implement build
    return NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification scrollNotification)

        double pro = scrollNotification.metrics.pixels/scrollNotification.metrics.maxScrollExtent;

        setState(() 
          _progress = "$(pro*100).toInt()%";
        );

        return true ;
      ,
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            ListViewState3(),
            Positioned(
              child:  CircleAvatar(
              child:Text(_progress,style: TextStyle(fontSize: 18),),
              radius: 30,
              backgroundColor: Colors.black54,
              foregroundColor: Colors.blue[200],
            ),)
          ],
        ),
    );
  

class ListViewState3 extends StatelessWidget

  @override
  Widget build(BuildContext context) 
    // TODO: implement build
    return ListView.builder(
      prototypeItem: ListTile(title: Text("1")),
      itemCount: 56,
      itemBuilder: (context, index) 
        //LayoutLogPrint是一个自定义组件，在布局时可以打印当前上下文中父组件给子组件的约束信息
        return ListTile(title: Text("$index"));
      ,
    );