如何解决容器内ListView.builder滚动后回弹至顶部的问题？

你遇到的问题是因为嵌套了SingleChildScrollView和ListView两个滚动组件，导致滚动逻辑冲突，出现回弹异常。下面是两种可行的解决方案：

方案一：移除外层滚动组件，用Expanded让ListView占满剩余空间 #

直接去掉SingleChildScrollView，给内部的ListView套上Expanded，让它占据SizedBox内的剩余高度，这样ListView就能正常独立滚动：

// 修正后的代码
SizedBox(
  height: 501,
  child: Column(
    children: [
      // 添加按钮
      TextButton.icon(
        onPressed: () { ... },
        icon: Icon(Icons.add),
        label: Text("Add Course"),
      ),
      // 用Expanded包裹ListView，使其占满剩余空间
      Expanded(
        child: ListView.builder(
          shrinkWrap: false, // 无需shrinkWrap，因为Expanded已限制高度
          itemCount: ...,
          itemBuilder: (context, index) { ... },
        ),
      ),
    ],
  ),
);

方案二：将按钮作为ListView的头部项 #

如果不想用Column，可以把按钮整合到ListView的第一个item，让整个列表（包含按钮）由ListView统一处理滚动：

SizedBox(
  height: 501,
  child: ListView.builder(
    itemCount: ... + 1, // 列表项数量加1，预留按钮位置
    itemBuilder: (context, index) {
      if (index == 0) {
        // 返回添加按钮
        return TextButton.icon(
          onPressed: () { ... },
          icon: Icon(Icons.add),
          label: Text("Add Course"),
        );
      }
      // 返回原列表项，注意index要减1
      return ...;
    },
  ),
);

这两种方案都能避免滚动组件嵌套冲突，解决回弹至顶部的问题。

内容的提问来源于stack exchange，提问作者Sunken In Time