Flutter下拉刷新、上拉加载

1、Flutter下拉刷新、上拉加载

注意： 滚动组件添加： physics: ClampingScrollPhysics() 可以处理IOS系统的物理滚动的效果（即橡皮筋效果）

1.1、 ListView

ListView 是最常用的可滚动组件之一，可以沿一个方向线性排布所有子组件，并且它也支持基于Sliver的延迟构建模型

默认构造函数：

        ListView(
            shrinkWrap: true,  // 该属性表示是否根据子组件的总长度来设置ListView的长度，默认值为false 
            padding: const EdgeInsets.all(20.0),
            children: [
                const Text('I\'m dedicating every day to you'),
            ],
        );

ListView.builder：

       ListView.builder(
           itemCount: 10,             // 列表项的数量，如果为null，则为无限列表。
           controller: _controller,   //  _controller滚动函数
           // physics: NeverScrollableScrollPhysics(),    //physics参数控制滚动到物理特性，比如设置为不可滚动：
           scrollDirection: Axis.horizontal,       //通过scrollDirection参数控制滚动方向，默认是垂直方向，向上滚动，设置为水平方向：
           itemBuilder: (BuildContext context,int index){      // 它是列表项的构建器，类型为IndexedWidgetBuilder，返回值为一个widget
             return Padding(
               padding: EdgeInsets.all(30),
               // ignore: unnecessary_brace_in_string_interps
               child: Text('${index}'),
             );
           }
       )

ListView.separated：

ListView.separated可以在生成的列表项之间添加一个分割组件，它比 ListView.builder 多了一个separatorBuilder 参数，该参数是一个分割组件生成器。

        ListView.separated(
            itemCount: 100,
            //列表项构造器
            itemBuilder: (BuildContext context, int index) {
                return ListTile(title: Text("$index"));
            },
            //分割器构造器
            separatorBuilder: (BuildContext context, int index) {
                return index%2==0?divider1:divider2;
            },
        );

1.2、下拉刷新 RefreshIndicator ，flutter_refresh

RefreshIndicator 下拉刷新：

RefreshIndicator是 Material 风格的下拉刷新组件。

        // 定义 ListView 循环列表项的数量
        num itemCount = 10; 

        // Widget
        RefreshIndicator(
            onRefresh: _onRefresh,//下拉刷新回调
            displacement: 40,    //指示器显示时距顶部位置
            color: Colors.red,   //指示器颜色，默认ThemeData.accentColor
            backgroundColor: Colors.blue,//指示器背景颜色，默认ThemeData.canvasColor
            notificationPredicate: defaultScrollNotificationPredicate, //是否应处理滚动通知的检查（是否通知下拉刷新动作）
            child: ListView.builder(
                itemCount: itemCount,
                itemBuilder: (BuildContext context,int index){
                return Padding(
                    padding: EdgeInsets.all(30),
                    child: Text('${index}'),
                );
                }
            ),
        )
        // _onRefresh 下拉刷新回调
        Future _onRefresh(){
            return Future.delayed(Duration(seconds: 5),(){   // 延迟5s完成刷新
                setState(() {
                    itemCount = 10;
                });
            });
        }

CupertinoSliverRefreshControl 下拉刷新：

CupertinoSliverRefreshControl 是 ios 风格的下拉刷新控件。

       // 定义 ListView 循环列表项的数量
       num itemCount = 10; 

       // Widget
       CustomScrollView(
           slivers: [
               CupertinoSliverRefreshControl(
                   onRefresh: () async {
                       return Future.delayed(Duration(seconds: 5),(){   // 延迟5s完成刷新
                           setState(() {
                               itemCount = 10;
                           });
                       });
                   },
               ),
               SliverList(
                   delegate: SliverChildBuilderDelegate((content, index) {
                       return ListTile(
                           title: Text('${index}'),
                       );
                   }, 
                   childCount: itemCount),
               )
           ],
       )

1.3、上拉加载 ScrollController

上拉加载的功能，需要用到 ScrollController + ListView组件:

     num itemCount = 10;
     ScrollController _controller = new ScrollController();
     @override
      // 初始化State
     void initState(){
         super.initState();
         _controller.addListener(() {
              if (_controller.position.pixels == _controller.position.maxScrollExtent) {
                  _loadMoreData();
              }
         });
     }
     //上拉加载函数
     Future _loadMoreData(){
          // 延迟1s增加数据
         return Future.delayed(Duration(seconds: 1),(){
             if(mounted){
                  setState(() {
                      itemCount += 5;
                  });
             }
         });
     }

    // widget
    ListView.builder(
       itemCount: itemCount,
       controller: _controller,
       itemBuilder: (BuildContext context,int index){
           return Padding(
                padding: EdgeInsets.all(30),
                child: Text('${index}'),
          );
      }
   )