美文网首页Flutter
Flutter(二十七)ScrollController滚动监听

Flutter(二十七)ScrollController滚动监听

作者: 天色将变 | 来源:发表于2019-07-19 06:49 被阅读2次

    用于对ListView等列表的监听和偏移控制

    构造方法

    ScrollController({
    double initialScrollOffset = 0.0,// 初始的偏移量
    this.keepScrollOffset = true,//是否保存滚动位置
    this.debugLabel,
    })

    常用方法
    • animateTo(),滚动到指定位置,可以设置目标偏移量,时间和滚动曲线
    • jumpTo(),滚动到指定位置,瞬间移动
    • addListener(), 添加滚动的监听,可以获取滚动过的位置。
    • dispose(),在widget的dispose时调用,避免内存泄漏
    image.png
    class _MyHomePageState extends State<MyHomePage> {
      ScrollController controller = new ScrollController();
      bool show = false;
      @override
      void initState() {
        super.initState();
        controller.addListener(() {
          if (controller.offset > 1000 && !show) {
            setState(() {
              show = true;
            });
          } else if (controller.offset <= 1000 && show) {
            setState(() {
              show = false;
            });
          }
        });
      }
    
      @override
      void dispose() {
        super.dispose();
        controller.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: ConstrainedBox(
            constraints: BoxConstraints.expand(),
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text('$index'),
                );
              },
              itemCount: 100,
              itemExtent: 50,
              controller: controller,
            ),
          ),
          floatingActionButton: !show
              ? null
              : FloatingActionButton(
                  onPressed: () {
    //                controller.animateTo(0,
    //                    duration: Duration(seconds: 1), curve: Curves.bounceInOut);
                    controller.jumpTo(33);
                  },
                  child: Icon(Icons.arrow_drop_up),
                ),
        );
      }
    }
    

    相关文章

      网友评论

        本文标题:Flutter(二十七)ScrollController滚动监听

        本文链接:https://www.haomeiwen.com/subject/zhjrlctx.html