Flutter ：實現下拉刷新

Flutter ：實現下拉刷新

效果如圖所示

下拉刷新

準備工作：首先創建好一個ListView，並展示相應的數據

• 藉助RefreshIndicator，將ListView包裹在其中

RefreshIndicator(
            child: ListView.builder(
            itemCount: _datas.length,
            itemBuilder: _cellForRow,
          ),
        ),

• 實現RefreshIndicator中的onRefresh方法

Future _pullRefresh() async{
    _datas.clear();
    getDatas()
        .then((List<Chat> datas){
      if (!_cancelConnect){
        setState(() {
          _datas.addAll(datas);
        });
      }
    })
        .catchError((e){
      print('錯誤：${e}');
    })
        .whenComplete((){
      print('完畢了！');
    })
        .timeout(Duration(seconds: 1))
        .catchError((timeout){
      _cancelConnect = true;
      print('超時輸出:$timeout');
    });
  }

RefreshIndicator(
          onRefresh: _pullRefresh,
          child: ListView.builder(
            itemCount: _datas.length,
            itemBuilder: _cellForRow,
          ),
        ),

注意：
1、在_pullRefresh加載數據必須是異步的
2、網絡重新獲取的數據必須在setState中刷新，否則無效，數據不會刷新

完整demo地址中的wechat_app_1