ScrollController组件_Scrollbar组件_N

ScrollController构造函数如下：

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

Scrollbar是一个Material风格的滚动指示器（滚动条），如果要给可滚动组件添加滚动条，只需将Scrollbar作为可滚动组件的任意一个父级组件即可，如：

Scrollbar(
  child: SingleChildScrollView(
    ...
  ),
);

通知（Notification）是Flutter中一个重要的机制，在widget树中，每一个节点都可以分发通知，通知会沿着当前节点向上传递，所有父节点都可以通过NotificationListener来监听通知。
Flutter中将这种由子向父的传递通知的机制称为通知冒泡（Notification Bubbling）。通知冒泡和用户触摸事件冒泡是相似的，但有一点不同：通知冒泡可以中止，但用户触摸事件不行。

import 'package:flutter/material.dart';

/// @description 作用:
/// @date: 2021/6/25
/// @author:lrs
class ScrollControllerL extends StatefulWidget {
  ScrollControllerL({Key key}) : super(key: key);

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

class _ScrollControllerLState extends State<ScrollControllerL> {
  ScrollController _scrollController = new ScrollController();
  bool showToTopBtn = false;
  String progess = "0";

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.offset < 1000 && showToTopBtn) {
        setState(() {
          showToTopBtn = false;
        });
      } else if (_scrollController.offset >= 1000 && !showToTopBtn) {
        setState(() {
          showToTopBtn = true;
        });
      }
    });
  }

  @override
  void deactivate() {
    _scrollController.dispose();
    super.deactivate();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ScrollController"),
      ),
      body: Scrollbar(
          child: NotificationListener(
              onNotification: (ScrollNotification notification) {
                double pro = notification.metrics.pixels /
                    notification.metrics.maxScrollExtent;
                setState(() {
                  progess = "${(pro * 100).toInt()}%";
                });
                return false;
              },
              child: Stack(
                alignment: Alignment.center,
                children: [
                  ListView.builder(
                      itemCount: 100,
                      controller: _scrollController,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(
                          title: Text("滑动超过1000像素后显示-回到顶部$index"),
                        );
                      }),
                  CircleAvatar(
                    radius: 30.0,
                    child: Text(
                      progess,
                      style: TextStyle(color: Colors.blue),
                    ),
                    backgroundColor: Colors.black54,
                  )
                ],
              ))),
      floatingActionButton: !showToTopBtn
          ? null
          : FloatingActionButton(
              child: Icon(Icons.arrow_upward),
              onPressed: () {
                _scrollController.animateTo(.0,
                    duration: Duration(milliseconds: 2000),
                    curve: Curves.easeInQuint);
              }),
    );
  }
}

QQ录屏20210707091553202177919223.gif

apk下载地址

https://www.pgyer.com/IUVS