Flutter滚动组件加载数据时页面显示位置偏移问题求助

问题场景 #

使用ListView实现上下拉加载更多功能时，滑动到顶部或底部加载数据后，页面显示的内容位置会发生偏移，导致当前查看的内容被顶走或切换，体验不佳。期望加载数据过程中，当前页面显示的内容位置保持不变。

问题代码 #

class DemoChatListPage extends Stateful Widget {
  const DemoChatListPage({super.key});

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

class _DemoChatListPageState extends State<DemoChatListPage> {
  List<String> messages = List.generate(20, (index) => 'Message $index');
  final ScrollController _scrollController = ScrollController();
  bool isLoadingMoreTop = false;
  bool isLoadingMoreBottom = false;
  double currentScrollOffset = 0;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_scrollListener);
  }

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

  void _scrollListener() {
    if (_scrollController.position.atEdge) {
      if (_scrollController.position.pixels == 0) {
        // 滑动到顶部加载更多
        _loadMoreTop();
      } else {
        // 滑动到底部加载更多
        _loadMoreBottom();
      }
    }
  }

  Future<void> _loadMoreTop() async {
    if (isLoadingMoreTop) return;
    currentScrollOffset = _scrollController.position.maxScrollExtent;
    setState(() {
      isLoadingMoreTop = true;
    });

    await Future.delayed(const Duration(seconds: 1));
    List<String> newMessages = List.generate(10, (index) => 'New Message Top $index');

    setState(() {
      messages.insertAll(0, newMessages);
      isLoadingMoreTop = false;
    });

    WidgetsBinding.instance.addPostFrameCallback((_) {
      _scrollController.jumpTo(_scrollController.position.maxScrollExtent - currentScrollOffset);
    });
  }

  Future<void> _loadMoreBottom() async {
    if (isLoadingMoreBottom) return;
    setState(() {
      isLoadingMoreBottom = true;
    });
    await Future.delayed(const Duration(seconds: 1));
    setState(() {
      List<String> newMessages = List.generate(10, (index) => 'New Message Bottom $index');
      messages.addAll(newMessages);
      isLoadingMoreBottom = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chat'),
      ),
      body: Stack(
        children: [
          ListView.builder(
            controller: _scrollController,
            itemCount: messages.length,
            itemBuilder: (context, index) {
              return Container(
                height: Random().nextInt(51) + 50,
                color: Colors.blue[index % 2 == 0 ? 200 : 300],
                child: ListTile(
                  title: Text(messages[index]),
                ),
              );
            },
          ),
          if (isLoadingMoreTop)
            const Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: LinearProgressIndicator(),
            ),
          if (isLoadingMoreBottom)
            const Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: LinearProgressIndicator(),
            ),
        ],
      ),
    );
  }
}

问题分析 #

1. 顶部加载偏移原因：原代码中滚动偏移计算逻辑错误，使用maxScrollExtent差值无法正确还原位置。插入顶部数据后，列表总高度增加，正确的偏移应该是原滚动位置 + 新插入数据的总高度。
2. 底部加载潜在问题：虽然底部加载默认不会偏移当前内容，但如果列表项高度动态变化，可能出现微小偏移，不过核心问题集中在顶部加载逻辑。

修复方案 #

修改顶部加载时的滚动位置计算逻辑，记录原滚动像素值并计算新插入数据的总高度，通过jumpTo精准还原视觉位置。

修复后的完整代码

import 'dart:math';
import 'package:flutter/material.dart';

class DemoChatListPage extends Stateful Widget {
  const DemoChatListPage({super.key});

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

class _DemoChatListPageState extends State<DemoChatListPage> {
  List<String> messages = List.generate(20, (index) => 'Message $index');
  final ScrollController _scrollController = ScrollController();
  bool isLoadingMoreTop = false;
  bool isLoadingMoreBottom = false;
  // 记录顶部加载前的滚动位置（距离顶部的像素值）
  double _preLoadScrollPixels = 0;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_scrollListener);
  }

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

  void _scrollListener() {
    if (_scrollController.position.atEdge) {
      if (_scrollController.position.pixels == 0) {
        _loadMoreTop();
      } else {
        _loadMoreBottom();
      }
    }
  }

  Future<void> _loadMoreTop() async {
    if (isLoadingMoreTop) return;
    
    // 记录加载前的滚动像素值
    _preLoadScrollPixels = _scrollController.position.pixels;
    setState(() {
      isLoadingMoreTop = true;
    });

    await Future.delayed(const Duration(seconds: 1));
    List<String> newMessages = List.generate(10, (index) => 'New Message Top $index');

    setState(() {
      messages.insertAll(0, newMessages);
      isLoadingMoreTop = false;
    });

    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 计算新插入数据的总高度，还原滚动位置
      double newOffset = _preLoadScrollPixels + _calculateNewItemsHeight(newMessages.length);
      _scrollController.jumpTo(newOffset);
    });
  }

  Future<void> _loadMoreBottom() async {
    if (isLoadingMoreBottom) return;
    setState(() {
      isLoadingMoreBottom = true;
    });
    await Future.delayed(const Duration(seconds: 1));
    setState(() {
      List<String> newMessages = List.generate(10, (index) => 'New Message Bottom $index');
      messages.addAll(newMessages);
      isLoadingMoreBottom = false;
    });
  }

  // 计算新插入顶部的item总高度（与itemBuilder中高度逻辑一致）
  double _calculateNewItemsHeight(int count) {
    double totalHeight = 0;
    for (int i = 0; i < count; i++) {
      totalHeight += Random().nextInt(51) + 50;
    }
    return totalHeight;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chat'),
      ),
      body: Stack(
        children: [
          ListView.builder(
            controller: _scrollController,
            itemCount: messages.length,
            itemBuilder: (context, index) {
              final itemHeight = Random().nextInt(51) + 50;
              return Container(
                height: itemHeight,
                color: Colors.blue[index % 2 == 0 ? 200 : 300],
                child: ListTile(
                  title: Text(messages[index]),
                ),
              );
            },
          ),
          if (isLoadingMoreTop)
            const Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: LinearProgressIndicator(),
            ),
          if (isLoadingMoreBottom)
            const Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: LinearProgressIndicator(),
            ),
        ],
      ),
    );
  }
}

关键修复点说明 #

1. 滚动位置记录：加载前记录当前滚动的像素值，而非maxScrollExtent，这是精准计算偏移的基础。
2. 动态高度计算：由于列表项高度随机，通过_calculateNewItemsHeight方法计算新插入数据的总高度，确保偏移量准确。
3. 视觉位置还原：在UI更新完成后，通过jumpTo将滚动位置设置为原位置加上新数据总高度，保持当前显示内容不变。

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