Flutter中iOS端列表更新时Refresh indicator出现跳动问题

问题原因 #

iOS平台上，RefreshIndicator的下拉刷新逻辑会让滚动视图整体向下偏移，而你用SingleChildScrollView+Column的组合时，每秒的setState会触发整个Column的重建，滚动视图的偏移状态没有被正确保留，导致每次更新后列表跳回初始位置，下拉操作卡顿。Android平台因为RefreshIndicator的实现逻辑不同（仅显示指示器，不偏移列表），所以没有这个问题。

最优解决方案：替换为CustomScrollView #

CustomScrollView是Flutter官方推荐和RefreshIndicator配合的滚动组件，它的Sliver结构能更好地和下拉刷新逻辑协同，内容更新时不会重置滚动位置。修改后的代码如下：

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  late Timer _timer;

  @override
  void initState() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        _counter++;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: RefreshIndicator(
        onRefresh: () async {
          await Future<void>.delayed(const Duration(seconds: 1));
        },
        child: CustomScrollView(
          slivers: [
            // 放置计数器文本
            SliverToBoxAdapter(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Text('Time count : $_counter'),
              ),
            ),
            // 生成列表项
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(title: Text('Item $index')),
                childCount: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

备选方案：用ScrollController手动保留滚动位置 #

如果不想替换组件，可以通过ScrollController手动记录和恢复滚动偏移，但这个方案可能存在轻微抖动：

1. 声明滚动控制器和偏移变量：

final ScrollController _scrollController = ScrollController();
double _lastScrollOffset = 0;

2. 在initState中监听滚动并记录偏移：

@override
void initState() {
  super.initState();
  _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
    // 更新前记录当前偏移
    _lastScrollOffset = _scrollController.offset;
    setState(() {
      _counter++;
    });
  });
  // 监听滚动更新偏移值
  _scrollController.addListener(() {
    _lastScrollOffset = _scrollController.offset;
  });
}

3. 在组件更新后恢复滚动位置：

@override
void didUpdateWidget(covariant MyHomePage oldWidget) {
  super.didUpdateWidget(oldWidget);
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (_scrollController.hasClients) {
      _scrollController.jumpTo(_lastScrollOffset);
    }
  });
}

4. 给SingleChildScrollView绑定控制器：

child: SingleChildScrollView(
  controller: _scrollController,
  child: Column(...)
)

5. 在dispose中释放资源：

@override
void dispose() {
  _timer.cancel();
  _scrollController.dispose();
  super.dispose();
}

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