Flutter 实现下拉刷新，上拉加载更多，宽高适配方案

实现下拉刷新RefreshIndicator

必须返回Future 可以使用Future.delayed来保持刷新图标的时间

Future<void> _onRefresh() async{
    /* 2秒后执行 */
    await Future.delayed(Duration(milliseconds: 2000),(){
      _getData(_nowPage++);
    });
 }

this._list.length>0?RefreshIndicator(child: ListView.builder(
        itemCount: this._list.length,
        itemBuilder: (context,index){
          if(index<this._list.length-1){
            return Column(
              children: <Widget>[
                ListTile(title: Text(this._list[index]["title"],maxLines: 1,overflow:TextOverflow.ellipsis)),
                Divider(height: 10,)
              ],
            );
          }else{
            return Column(
              children: <Widget>[
                ListTile(title: Text(this._list[index]["title"],maxLines: 1,overflow:TextOverflow.ellipsis)),
                SizedBox(height: 10,)
              ],
            );
          }
            
        },
      ), onRefresh: this._onRefresh):Text('正在加载中')

上拉加载更多

ListView里面有一个controller属性，可以设置一个ScrollController，监听ScrollController的滚动事件，通过获取页面的高度和滚动条滚动的高度，来实现上来加载并且当下拉操作执行时设置一个值，当上拉加载完成，才能继续下一次上拉记载，防止用户操作过快。

上拉触发

void _addData(int index) async{
    showToast('正在加载更多',gravity:ToastGravity.BOTTOM);
    this.flag=false;
    try{
      var apiUrl="请求地址"+index;
      var result=await Dio().get(apiUrl);
      setState(() {
        this._list.addAll(json.decode(result.data)["result"]);
      });
    }catch(err){
      showToast('网络错误');
    }
    this.flag=true;
  }

ListView属性

controller: this._scrollController,

声明_scrollControlle

ScrollController _scrollController=new ScrollController();
void initState(){
	this._nowPage=1;
	_scrollController.addListener((){
	      double screenH=_scrollController.position.maxScrollExtent;//页面高度
	      double pixels=_scrollController.position.pixels;//滚动条滚动距离
	      if(screenH-pixels<10&&flag){
	        this._addData(_nowPage++);
	      }
    });
}

宽高适配方案

因为不同的机型分辨率不一致，想在所有机型看到的布局一致，可以使用flutter_screenutil这个第三方库，他会内部计算返回不同的值来适配不同的机型
第一步，封装第三方库常用的方法

import 'package:flutter_screenutil/flutter_screenutil.dart';

class CdpScreen {
 
  static init(context,width,height){
    ScreenUtil.init(context, width: width, height: height, allowFontScaling: true);
  }
  /* 设置宽 */
  static double  width(double nums) => ScreenUtil().setHeight(nums);
  /* 设置高 */
  static double  height(double nums)=> ScreenUtil().setWidth(nums);
  /* 获取设备屏幕宽 */
  static double get getScreenWidth => ScreenUtil.screenWidthDp;
  /* 获取设备屏幕高 */
  static double get getScreenHeight => ScreenUtil.screenHeightDp;
}

第二步
在自定义Widget对象build里面初始化使用

CdpScreen.init(context, 750, 1334);//设计图的宽高

例子

padding: EdgeInsets.all(CdpScreen.width(10)),

所有机型看到的效果基本表现一致了