Flutter 3.x及以上版本反向ListView底部下拉刷新问题

问题背景 #

Flutter 3.0及以上版本中，设置reverse: true的ListView组件行为发生变更：旧版本搭配RefreshIndicator可通过底部下拉触发刷新，但现在仅支持顶部下拉刷新。官方已明确此为预期行为，若不想降级Flutter版本或使用第三方包（如pull_to_refresh），可通过ScrollController实现原生解决方案。

实现思路 #

利用ScrollController监听列表滚动状态，当滚动到列表初始位置（对应reverse: true时的视觉底部）且用户继续下拉时，触发刷新逻辑；同时自定义刷新指示器的位置，使其显示在视觉底部。

代码实现 #

以下是封装好的可复用组件，集成了监听逻辑和刷新指示器：

import 'package:flutter/material.dart';

class ReversedListViewRefresh extends StatefulWidget {
  final Future<void> Function() onRefresh;
  final ListView child;
  final Color? color;
  final double displacement;

  const ReversedListViewRefresh({
    Key? key,
    required this.onRefresh,
    required this.child,
    this.color,
    this.displacement = 40.0,
  }) : super(key: key);

  @override
  State<ReversedListViewRefresh> createState() => _ReversedListViewRefreshState();
}

class _ReversedListViewRefreshState extends State<ReversedListViewRefresh> with SingleTickerProviderStateMixin {
  late ScrollController _scrollController;
  late AnimationController _animationController;
  bool _isRefreshing = false;
  bool _canRefresh = false;

  @override
  void initState() {
    super.initState();
    _scrollController = widget.child.controller ?? ScrollController();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    _scrollController.addListener(_scrollListener);
  }

  void _scrollListener() {
    if (_isRefreshing) return;

    // 判断是否滚动到列表初始位置（reverse:true时对应视觉底部）
    if (_scrollController.position.pixels <= _scrollController.position.minScrollExtent) {
      _canRefresh = true;
    } else {
      _canRefresh = false;
    }
  }

  Future<void> _handleRefresh() async {
    if (_isRefreshing || !_canRefresh) return;
    setState(() => _isRefreshing = true);
    _animationController.forward();
    try {
      await widget.onRefresh();
    } finally {
      _animationController.reverse();
      setState(() => _isRefreshing = false);
    }
  }

  @override
  void dispose() {
    _scrollController.removeListener(_scrollListener);
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        NotificationListener<OverscrollNotification>(
          onNotification: (notification) {
            // 监听下拉过度滚动事件，触发刷新
            if (notification.overscroll < 0 && _canRefresh && !_isRefreshing) {
              _handleRefresh();
            }
            return false;
          },
          child: widget.child,
        ),
        // 在视觉底部显示刷新指示器
        Positioned(
          bottom: _isRefreshing ? widget.displacement : -widget.displacement * 2,
          left: 0,
          right: 0,
          child: Center(
            child: RefreshProgressIndicator(
              color: widget.color,
              valueAnimation: _animationController,
            ),
          ),
        ),
      ],
    );
  }
}

使用方式 #

替换原有的RefreshIndicator和ListView组合，直接使用该组件：

ReversedListViewRefresh(
  onRefresh: () async {
    // 你的刷新逻辑
    await Future.delayed(const Duration(seconds: 2));
  },
  child: ListView.builder(
    reverse: true,
    itemCount: messages.length,
    itemBuilder: (_, index) => Message(message: messages[index]),
  ),
)

原理说明 #

1. 滚动监听：通过ScrollController判断列表是否滚动到reverse: true对应的视觉底部（即minScrollExtent位置）。
2. 触发条件：监听OverscrollNotification，当用户在视觉底部下拉产生过度滚动时，触发刷新逻辑。
3. 指示器位置：通过Stack和Positioned将刷新指示器固定在视觉底部，配合动画控制器实现指示器的显示/隐藏效果。

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