Flutter 下拉刷新之RefreshIndicator

效果

屬性

RefreshIndicator 是 Material Design 風格的下拉刷新控件，所以同android中的SwipeRefreshLayout用法一樣，嵌套在外層即可。
先了解一下屬性：

  const RefreshIndicator({
    Key key,
    @required this.child,
    this.displacement = 40.0,//指示器顯示時距頂部位置
    @required this.onRefresh,//下拉刷新回調
    this.color,//指示器顏色，默認ThemeData.accentColor
    this.backgroundColor,//指示器背景顏色，默認ThemeData.canvasColor
    this.notificationPredicate = defaultScrollNotificationPredicate,
    this.semanticsLabel,
    this.semanticsValue,
  })

基本上只需要關心onRefresh回調即可。

使用

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    
      body: RefreshIndicator(
        //指示器顏色
        color: Theme.of(context).primaryColor,
        //指示器顯示時距頂部位置
        displacement: 40,
        child: SingleChildScrollView(
          child: ExpansionPanelList(),
        ),
        //下拉刷新回調
        onRefresh: () {},
      ),
      
    );
  }

SingleChildScrollView 是內容區，外層嵌套RefreshIndicator即可。

模擬一個兩秒的刷新：

        onRefresh: () async {
          await Future.delayed(Duration(seconds: 2), () {
            YToast.show(context: context, msg: "下拉刷新");
            // do something
            //getData();
          });
        },

加載更多

可以看到下拉刷新還是很好實現的，但往往我們列表需要下拉刷新的時候，也需要上拉加載更多，那上拉加載更多怎麼實現呢，其實也很簡單的。

核心思想：判斷列表已經滑動到了底部即觸發加載更多事件。

判斷很簡單，但是還有幾個需要注意的點：

• 列表超過一整屏才觸發上拉加載更多。
• 加載更多時避免與下拉刷新衝突，即下拉刷新還沒結束的時候也觸發了上拉加載更多。
• 顯示隱藏加載中的footer。

簡單演示：

• 首先判斷是否滑動到底部，我們需要用到ScrollController，

ScrollController _scrollController = ScrollController();

• 初始化之後設置監聽

    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        YToast.show(context: context, msg: "滑動到了底部");
        // do something
        //getMoreData();
      }
    });

• _scrollController.position.pixels 當前位置
• _scrollController.position.maxScrollExtent 最大滑動範圍
• 當前位置==最大滑動範圍，即表示已經滑動到了底部，然後做一些操作

• 最後，把_scrollController配置給列表：

        child: SingleChildScrollView(
        
          controller: _scrollController,
          
          child: ExpansionPanelList(),
        ),

ok，到這裏就介紹完了。

關於加載更多的介紹並不是完整的，友情提示一下，處理各種操作反饋邏輯的時候，避免混亂，可以定義幾種狀態：

• 列表是否在加載
• 是否在下拉刷新
• 是否在加載更多

然後在需要的地方通過setState()方法改變狀態值即可。

囉嗦一下：
要有自己的思考力。有的人封裝過這種下拉刷新上拉加載的框架，但是過了很久忘了，點一下就馬上能明白過來了；有的人沒接觸過，但是跟着步驟走，加上自己的思考能消化成自己的知識；但是還有一種人，需要CV大法才行的，建議儘早丟掉這種壞習慣，不思考以後的路很難走的。共勉。

Github

https://github.com/yechaoa/wanandroid_flutter