【自学Flutter】23 滚动监听和 NotificationListener的使用

最新推荐文章于 2023-09-27 10:51:22 发布

技术宅-Nopi

最新推荐文章于 2023-09-27 10:51:22 发布

阅读量3.6k

点赞数

分类专栏：自学Flutter 文章标签： Flutter Android

本文链接：https://blog.csdn.net/weixin_43266090/article/details/94320990

版权

自学Flutter 专栏收录该内容

64 篇文章 9 订阅

订阅专栏

23 滚动监听和 NotificationListener的使用

1.源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  ScrollController scrollController = new ScrollController();
  bool toTop = false;
  String percent = "0%";

  @override
  void initState() {
    scrollController.addListener((){
          print(scrollController.offset);
          if(scrollController.offset<1000 && toTop){
            setState(() {
              toTop = false;
            });
          }else if(scrollController.offset>=1000 && toTop == false){
            setState(() {
              toTop = true;
            });
          }
        }
    );
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("滚动监听"),),
          body: Scrollbar(
            child: NotificationListener<ScrollNotification>(
                onNotification: (ScrollNotification sn){
                  double progress = sn.metrics.pixels / sn.metrics.maxScrollExtent;
                  setState(() {
                    percent = "${(progress*100).toInt()}%";
                  });
                },
                child: Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    ListView.builder(
                      itemCount: 100,
                      itemExtent: 50,
                      controller: scrollController,
                      itemBuilder: (context,index){
                        return ListTile(title: Text("编号：$index"),);
                      },
                    ),
                    CircleAvatar(
                      backgroundColor: Colors.black12,
                      radius: 30,
                      child: Text(percent,style: TextStyle(color: Colors.red),),
                    )
                  ],
                )
            )
          ),
          floatingActionButton: !toTop ? null : FloatingActionButton(
            onPressed: (){
              scrollController.animateTo(
                  0,
                  duration: Duration(seconds: 2),
                  curve: Curves.ease);
            },
            child: Icon(Icons.arrow_upward),
          ),
        )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //声明controller
  ScrollController scrollController = new ScrollController();
  //标识是否显示返回最顶按钮
  bool toTop = false;
  //滚动位置百分比
  String percent = "0%";

  @override
  void initState() {
    scrollController.addListener((){
    	  //打印监听位置
          print(scrollController.offset);
          if(scrollController.offset<1000 && toTop){
            //更新状态
            setState(() {
              toTop = false;
            });
          }else if(scrollController.offset>=1000 && toTop == false){
            setState(() {
              toTop = true;
            });
          }
        }
    );
  }
  
  //为了避免内存泄露，需要调用_controller.dispose
  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("滚动监听"),),
          body: Scrollbar(
            child: NotificationListener<ScrollNotification>(
                onNotification: (ScrollNotification sn){
                  //计算
                  double progress = sn.metrics.pixels / sn.metrics.maxScrollExtent;
                  //重新构建
                  setState(() {
                    percent = "${(progress*100).toInt()}%";
                  });
                },
                child: Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    ListView.builder(
                      itemCount: 100,
                      itemExtent: 50,
                      controller: scrollController,
                      itemBuilder: (context,index){
                        return ListTile(title: Text("编号：$index"),);
                      },
                    ),
                    CircleAvatar(
                      backgroundColor: Colors.black12,
                      radius: 30,
                      child: Text(percent,style: TextStyle(color: Colors.red),),
                    )
                  ],
                )
            )
          ),
          floatingActionButton: !toTop ? null : FloatingActionButton(
            onPressed: (){
              返回到顶部时执行动画
              scrollController.animateTo(
                  0,
                  duration: Duration(seconds: 2),
                  curve: Curves.ease);
            },
            child: Icon(Icons.arrow_upward),
          ),
        )
    );
  }
}