Flutter Web中ListView偶尔无法正常向上滚动问题

问题场景与现象 #

我有一个ListView，顶部包含若干不同类型的Widget，下方是多个ListTile，基础创建代码如下：

Flexible(
    child: ListView(
        controller: _scrollController,
        children: resultsWidgets,
        ))

基于Flutter Web渲染时，出现以下问题：

• 向上滚动列表时，偶尔仅滚动一小段后自动回弹，导致用户卡在当前位置；需快速拖动滚动游标向上跳过几个列表项才能恢复正常滚动。
• 问题演示：
  

已观察到的触发特征 #

• 仅在列表项存在文本高亮时出现：应用先渲染无文本高亮的ListTile（查询结果），之后通过服务端逐个请求计算高亮，返回后更新ListTile的高亮文本组件；无高亮时无此问题。
• 问题多发生在第9-10个ListTile之后（粗略观察结果）。
• 已尝试逐步移除ListTile中的Widget定位问题，但未成功；Firefox、Chrome和Safari均能复现。

问题分析 #

该问题核心是子Widget动态更新导致ListView频繁重计算布局，干扰滚动控制器的偏移计算：

1. 逐个更新ListTile的高亮文本时，每次setState都会触发ListView重新计算整体高度与滚动偏移；
2. 当列表滚动到一定位置后，子项因文本高亮可能出现的高度变化（或布局重绘），会让ListView的滚动位置校准出现偏差，最终导致回弹卡顿。

解决方案建议 #

1. 固定ListTile高度 #

通过SizedBox包裹ListTile，强制固定高度，避免文本高亮引发的布局高度变化：

SizedBox(
  height: 56, // 匹配ListTile默认高度
  child: ListTile(
    // 你的列表项内容
  ),
)

2. 改用ListView.builder构建列表 #

ListView.builder仅渲染可见区域的子项，动态更新时不会触发整个列表的重绘，大幅减少布局计算量：

Flexible(
  child: ListView.builder(
    controller: _scrollController,
    itemCount: resultsWidgets.length,
    itemBuilder: (context, index) => resultsWidgets[index],
  ),
)

3. 批量更新高亮结果 #

避免逐个请求更新，等待多个高亮结果返回后一次性更新列表，减少setState触发频率：

// 示例：收集多个高亮结果后统一更新
void batchUpdateHighlights(Map<int, HighlightData> highlights) {
  setState(() {
    highlights.forEach((index, data) {
      // 更新对应index的列表项高亮
      resultsWidgets[index] = updateTileWithHighlight(resultsWidgets[index], data);
    });
  });
}

4. 手动维持滚动位置 #

更新状态前后保存并恢复滚动偏移，避免布局重计算导致的位置偏差：

void updateTileHighlight(int index, HighlightData data) {
  final currentOffset = _scrollController.offset;
  setState(() {
    resultsWidgets[index] = updateTileWithHighlight(resultsWidgets[index], data);
  });
  // 布局更新后恢复原滚动位置
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (_scrollController.hasClients) {
      _scrollController.jumpTo(currentOffset);
    }
  });
}

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