Flutter ListView异常：超出边界溢出问题求助

这不是Flutter的Bug，是配置ListView时的细节问题。

问题原因 #

ListView默认的clipBehavior属性值为Clip.none，这意味着列表内容滚动时，会直接超出ListView自身的容器边界，显示在下方的footer区域，视觉上看起来像是“溢出”了你设置的SizedBox边界。你的整体布局结构（头部+中间可滚动列表+底部）是合理的，只是这个默认的clipBehavior设置导致了异常的视觉表现。

修复方案 #

在ListView.separated中添加clipBehavior: Clip.hardEdge（或Clip.antiAlias，后者抗锯齿效果更好但性能稍差），滚动时列表内容会被裁剪在ListView的容器边界内，不会跑到footer区域：

Widget _listBody(BuildContext context) {
  print("Item count :${testData.length}"); // 顺便修正字符串插值错误，原代码无法正确打印列表长度
  return ListView.separated(
    clipBehavior: Clip.hardEdge, // 添加该行解决内容溢出视觉问题
    itemCount: testData.length,
    separatorBuilder: (context, index) => const Divider(),
    itemBuilder: (context, index) {
      TestData td = testData[index];
      print("ListTile for index $index and td: $td");
      return ListTile(
        title: Text(td.name),
        subtitle: Text(td.description),
        tileColor: Colors.pink.shade100,
      );
    },
  );
}

另外，你用LayoutBuilder分配高度的方式是可行的：头部占20%、底部占20%，中间用Expanded让ListView占据剩余空间，这个结构能保证ListView获得固定的可用高度，内容过多时会自动滚动，不会出现布局层面的溢出警告。

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