基于flutter的页面内下拉刷新实现

前段时间有个下拉刷新的需求，在网上找了找，这里列出一个比较常用的方法，这里记录一下；

使用RefreshIndicator 组件就能很轻松的实现这个功能，只是需要注意你的widget是动态还是静态，如果是静态的话要把需要刷新的部分用obx包裹起来，以达到一个局部可变的状态。

1、RefreshIndicator 的部分定义以及各属性的解释：

/// Creates a refresh indicator.
  ///
  /// The [onRefresh], [child], and [notificationPredicate] arguments must be
  /// non-null. The default
  /// [displacement] is 40.0 logical pixels.
  ///
  /// The [semanticsLabel] is used to specify an accessibility label for this widget.
  /// If it is null, it will be defaulted to [MaterialLocalizations.refreshIndicatorSemanticLabel].
  /// An empty string may be passed to avoid having anything read by screen reading software.
  /// The [semanticsValue] may be used to specify progress on the widget.

  const RefreshIndicator({
    super.key,        //组件的唯一标识，用于在widget树中定位该组件。
    required this.child,    //需要在刷新时显示的内容子组件。
    this.displacement = 40.0,    //刷新指示器从触发边缘开始的偏移量，默认为40.0
    this.edgeOffset = 0.0,        //触发刷新的边缘偏移量，默认为0.0
    required this.onRefresh,        //触发刷新时需要调用的回调函数
    this.color,          //刷新指示器的前景色，如果未指定，则使用主题中的颜色。
    this.backgroundColor,        //刷新指示器的背景色，如果未指定，则使用主题中的背景色。
    this.notificationPredicate = defaultScrollNotificationPredicate,    //用于判断何时触发刷新的条件
    this.semanticsLabel,    //语义化标签，用于无障碍访问
    this.semanticsValue,    //语义化值，用于无障碍访问
    this.strokeWidth = RefreshProgressIndicator.defaultStrokeWidth,    //刷新进度指示器的线条宽度
    this.triggerMode = RefreshIndicatorTriggerMode.onEdge,    //触发模式，决定何时显示刷新指示器
  }) : _indicatorType = _IndicatorType.material;    //内部使用的指示器类型，这里固定为_IndicatorType.material

2、使用实例：

我这里是在StatelessWidget中使用，所以需要刷新的部分用obx包裹起来了。

class _ListDoctorData extends View<ServiceDoctorListController>{
  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      displacement: 44.h,
      onRefresh: controller.refreshData,        ///这里就是下拉后执行的操作，可以将需要的操作放在函数里在这调用
      child: Obx(() {        //使用obx使这部分widget可变
        if(controller.vm.askDoctorList.isEmpty){        //判断列表中有无医生信息，没有就执行SizedBox
          return SizedBox.expand(
              child: SingleChildScrollView(
                  physics: const BouncingScrollPhysics(
                      parent: AlwaysScrollableScrollPhysics()),
                  child: Container(
                    alignment: Alignment.center,
                    child: const LsText("没有医生可选"),
                  ))
          );
        }    //有就执行ListView
        return ListView.builder(        //这里是将用api获取到的医生信息按列表的形式展示出来
          physics:const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
          itemBuilder: (context, index) => DoctorDataItem(
            index: index,
            doctorInfo: controller.vm.askDoctorList[index],
          ),
          itemCount: controller.vm.askDoctorList.length,
        );
      })
    );
  }
  
}

同时记得，onRefresh这里放的函数必须要是Future类型，不然会报错，我的是Future<void>。