Flutter Web：ListView.separated滚动条跳动问题求助（Flutter3.7.6）

在Flutter 3.7.6版本的Web平台开发中，使用ListView.separated构建列表时，会遇到滚动加载新项时滚动条跳动的问题。相关代码如下：

@override
Widget build(BuildContext context) {
  return ListView.separated(
    padding: const EdgeInsets.only(
      left: 65,
      right: 45,
      top: 150,
      bottom: 65,
    ),
    separatorBuilder: (context, index) {
      return const SizedBox(
        height: 40,
      );
    },
    itemBuilder: (context, i) {
      return Container(
        height: 305,
        color: Colors.red,
      );
    },
    itemCount: 40,
  );
}

滚动过程中每次加载新列表项，滚动条都会出现明显跳动；但改用ListView.builder，并在itemBuilder返回的Container下方添加SizedBox作为分隔后，该问题就不再出现。

问题原因 #

这是Flutter 3.7.x版本Web端的一个已知渲染逻辑问题：ListView.separated的分隔器是单独计算高度的，滚动加载时列表总高度会出现临时计算偏差，导致滚动条位置异常跳动。而ListView.builder中将分隔器直接整合到每个item里后，每个item的高度是固定的（容器高度+分隔器高度，最后一项除外），列表总高度可以被准确预计算，滚动条也就不会出现跳动。

解决方案 #

方案一：改用ListView.builder整合分隔器

把分隔器逻辑直接写到item内部，确保每个item的高度固定，示例代码：

@override
Widget build(BuildContext context) {
  return ListView.builder(
    padding: const EdgeInsets.only(
      left: 65,
      right: 45,
      top: 150,
      bottom: 65,
    ),
    itemBuilder: (context, i) {
      return Column(
        children: [
          Container(
            height: 305,
            color: Colors.red,
          ),
          // 最后一个item不需要显示分隔器
          if (i != 39) const SizedBox(height: 40),
        ],
      );
    },
    itemCount: 40,
  );
}

方案二：升级Flutter版本

该滚动条跳动问题在Flutter 3.10及以上版本的Web端渲染优化中已被修复，升级到更高版本即可解决。

内容的提问来源于stack exchange，提问作者anonymous-dev