Flutter中如何缩短RefreshIndicator触发刷新的滑动距离？

首先明确：displacement 属性仅控制刷新指示器展开后与子组件顶部的间距，不影响触发刷新的滑动阈值。要调整触发刷新的下拉距离，可通过以下两种方式实现：

方法一：通过NotificationListener手动控制刷新逻辑 #

监听滚动通知，计算下拉偏移量，达到自定义阈值时触发刷新，同时配合RefreshIndicator的状态控制：

class CustomRefreshPage extends StatefulWidget {
  const CustomRefreshPage({super.key});

  @override
  State<CustomRefreshPage> createState() => _CustomRefreshPageState();
}

class _CustomRefreshPageState extends State<CustomRefreshPage> {
  final GlobalKey<RefreshIndicatorState> _refreshKey = GlobalKey();
  // 自定义触发刷新的下拉阈值，示例设为80
  final double _triggerThreshold = 80.0;
  bool _isRefreshing = false;

  Future<void> _onRefresh() async {
    setState(() => _isRefreshing = true);
    // 模拟刷新操作
    await Future.delayed(const Duration(seconds: 2));
    setState(() => _isRefreshing = false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自定义刷新触发距离')),
      body: NotificationListener<ScrollNotification>(
        onNotification: (notification) {
          // 仅在未刷新、且是下拉overscroll时判断
          if (!_isRefreshing && notification is OverscrollNotification && notification.overscroll > 0) {
            if (notification.overscroll >= _triggerThreshold) {
              _refreshKey.currentState?.show();
            }
          }
          return false;
        },
        child: RefreshIndicator(
          key: _refreshKey,
          displacement: 40, // 控制指示器显示位置
          onRefresh: _onRefresh,
          child: ListView.builder(
            itemCount: 20,
            itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
          ),
        ),
      ),
    );
  }
}

方法二：自定义RefreshIndicator子类，修改内部触发阈值 #

RefreshIndicator的触发阈值由内部_kDragThreshold常量控制（默认100.0），可通过继承并重写相关方法修改：

class CustomThresholdRefreshIndicator extends RefreshIndicator {
  // 自定义触发阈值
  final double triggerThreshold;

  const CustomThresholdRefreshIndicator({
    super.key,
    required super.child,
    required super.onRefresh,
    super.displacement,
    this.triggerThreshold = 80.0,
  });

  @override
  _CustomThresholdRefreshIndicatorState createState() => _CustomThresholdRefreshIndicatorState();
}

class _CustomThresholdRefreshIndicatorState extends RefreshIndicatorState<CustomThresholdRefreshIndicator> {
  @override
  double get _dragThreshold => widget.triggerThreshold;

  @override
  Widget build(BuildContext context) {
    return super.build(context);
  }
}

使用时直接替换原RefreshIndicator：

CustomThresholdRefreshIndicator(
  triggerThreshold: 80.0, // 设置自定义触发距离
  displacement: 40,
  onRefresh: _onRefresh,
  child: ListView.builder(
    itemCount: 20,
    itemBuilder: (context, index) => ListTile(title: Text('列表项 $index')),
  ),
)

注意：第二种方法依赖Flutter框架内部实现，若后续框架更新调整_dragThreshold定义，需同步修改代码。

内容的提问来源于stack exchange，提问作者Doraemon