Flutter项目加载数据后ListView.builder无法滚动该如何解决？

问题原因 #

你的代码中存在可滚动组件嵌套的问题：外层使用了SingleChildScrollView，内部嵌套了自带滚动属性的ListView.builder，二者会产生滚动手势冲突。即使你给ListView.builder设置了shrinkWrap: true让它适应子项高度，它默认的滚动物理效果依然会消费滚动手势，导致外层滚动容器无法响应操作，表现为加载完数据后页面无法滚动。

解决方法 #

你可以选择以下任意一种方案修复： #

方案1：禁用内部ListView的滚动能力（适配需要外层Column嵌套其他组件的场景） #

给ListView.builder添加physics: NeverScrollableScrollPhysics()属性，让内部List完全放弃滚动手势处理，所有滚动操作交给外层SingleChildScrollView处理，修改后的核心代码如下：

Widget BlogsList() {
  if (blogStream != null){
    return SingleChildScrollView(
      child: Column(
        children: [
          StreamBuilder(
            stream: blogStream!,
            builder: (context, AsyncSnapshot snapshot) {
              if (!snapshot.hasData) return Center(child: CircularProgressIndicator());
              return ListView.builder(
                padding: EdgeInsets.symmetric(horizontal: 16),
                itemCount: snapshot.data.docs.length,
                shrinkWrap: true,
                // 新增这行，禁用内部List的滚动
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (context, index) {
                  return BlogsTile(
                    authorName: snapshot.data.docs[index]['authorName'],
                    title: snapshot.data.docs[index]["title"],
                    description: snapshot.data.docs[index]["desc"],
                    imgUrl: snapshot.data.docs[index]["imgUrl"],              
                  );
                },
              );
            },
          ),
          // 如果这里还有其他需要跟着滚动的组件，保留当前结构即可
        ],
      )
    );
  }
  else {
    return Container(
      child: CircularProgressIndicator(),
      alignment: Alignment.center,
    );
  }
}

方案2：移除冗余的外层滚动容器（更推荐，性能更优） #

你的当前结构里Column只包裹了一个StreamBuilder，完全不需要外层嵌套SingleChildScrollView，直接用ListView.builder自身的滚动能力即可，既解决滚动冲突，还避免了shrinkWrap带来的长列表性能损耗，修改后的代码如下：

Widget BlogsList() {
  if (blogStream != null){
    return StreamBuilder(
      stream: blogStream!,
      builder: (context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
          return Center(child: CircularProgressIndicator());
        }
        return ListView.builder(
          padding: EdgeInsets.symmetric(horizontal: 16),
          itemCount: snapshot.data.docs.length,
          // 移除shrinkWrap，减少不必要的性能消耗
          itemBuilder: (context, index) {
            return BlogsTile(
              authorName: snapshot.data.docs[index]['authorName'],
              title: snapshot.data.docs[index]["title"],
              description: snapshot.data.docs[index]["desc"],
              imgUrl: snapshot.data.docs[index]["imgUrl"],              
            );
          },
        );
      },
    );
  }
  else {
    return Container(
      child: CircularProgressIndicator(),
      alignment: Alignment.center,
    );
  }
}

额外注意 #

• 如果你的页面除了博客列表之外还有其他固定头部/底部组件需要跟随列表滚动，选择方案1即可
• 如果页面仅展示博客列表，优先选择方案2，性能更高，适合长列表场景

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