[Flutter-25] ScrollController 監聽滾動一

ScrollController

/* 監聽滾動的事件

對於滾動的視圖我們需要監聽它的一些滾動事件、在監聽到的時候去做一些操作。
- 比如滾動到底部、我們希望可以做下拉刷新更多
- 比如滾動到一定位置時顯示一個回到頂部的按鈕、點擊回到頂部的按鈕、回到頂部。
- 比如監聽滾動什么時候開始、什么時候結束。

在flutter中監聽滾動相關的內容由兩部分組成： ScrollController & ScrollNotification


一：ScrollController

> 在flutter中、WIdget並不是最終渲染到屏幕上的元素(真正渲染的是RenderObject)， 因此通常這種監聽事件以及相關的
信息並不能直接從Widget中獲取、而是通過對應Widget的Controller來實現。

> ListView、GridView的組件控制器是ScrollController，我們可以通過它來獲取視圖的滾動信息，
並且可以調用里面的方法來更新視圖的滾動位置。

> 另外，通常情況下，我們會根據滾動的位置來改變一些Widget的狀態信息，
所以ScrollController通常會和StatefulWidget一起來使用，並且會在其中控制它的初始化、監聽、銷毀等事件。

需求：
    我們來做一個案例，當滾動到1000位置的時候，顯示一個回到頂部的按鈕：
    jumpTo(double offset)： 沒有動畫
    animateTo(double offset,...)：有動畫
    都是用於跳轉到指定的位置，它們不同之處在於，后者在跳轉時會執行一個動畫，而前者不會。

    ScrollController間接繼承自Listenable, 我們可以根據ScrollController 來監聽滾動事件。
*/

class Content1 extends StatefulWidget {
  @override
  _Content1State createState() => _Content1State();
}

class _Content1State extends State<Content1> {
  ScrollController _scrollController = ScrollController();
  bool _isScrollTop = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    // 初始化ScrollController

    // 監聽滾動
    _scrollController.addListener(() {
      print('_scrollController.addListener: ${_scrollController.offset}');
      var temp = _scrollController.offset >= 1000;
      if (temp != _isScrollTop) {
        setState(() {
          _isScrollTop = temp;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScrollController'),
      ),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('item$index'),
          );
        },
        itemCount: 100, // 最大的數量
        itemExtent: 60, // 每條的高度
        controller: _scrollController, // 監聽的控制器
      ),
      floatingActionButton: !_isScrollTop
          ? null
          : FloatingActionButton(
              child: Icon(Icons.arrow_upward),
              onPressed: () {
                print('click-FloatingActionButton');
                //_scrollController.jumpTo(0);
                _scrollController.animateTo(0,
                    duration: Duration(milliseconds: 1000), curve: Curves.ease);
              },
            ),
    );
  }
}