Flutter中两个ListView屏幕重叠问题求助，已尝试SingleChildScrollView

你的问题核心是使用了Stack布局——它的特性是让子组件层叠排列，这直接导致两个ListView互相重叠。之前尝试SingleChildScrollView未成功，大概率是没正确配置内部ListView的关键属性。以下是修复方案：

关键修改点 #

• 替换Stack为SingleChildScrollView + Column，让两个列表垂直依次排列，避免层叠
• 给每个ListView.builder添加两个必要属性：
  • shrinkWrap: true：让列表高度自适应内容，而非强制占满父容器
  • physics: NeverScrollableScrollPhysics()：禁用列表自身的滚动逻辑，避免和外层SingleChildScrollView的滚动冲突

修复后的完整代码 #

Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        children: [
          // 已提交评论列表（条件渲染）
          if (submittedComment.isNotEmpty)
            ListView.builder(
              itemCount: submittedComment.length,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              scrollDirection: Axis.vertical,
              itemBuilder: (context, index) {
                return Container(
                  width: MediaQuery.of(context).size.width - 150,
                  child: Card(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [],
                    ),
                  ),
                );
              },
            ),
          // 原有评论列表
          ListView.builder(
            itemCount: widget.snapshot.comments.length,
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            scrollDirection: Axis.vertical,
            padding: const EdgeInsets.only(bottom: 20),
            itemBuilder: (context, j) {
              return Container(
                width: MediaQuery.of(context).size.width - 150,
                child: Card(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [],
                  ),
                ),
              );
            },
          ),
        ],
      ),
    ),
  );
}

额外优化建议 #

如果两个列表的项样式逻辑一致，可以抽取成独立Widget减少冗余，比如：

Widget _buildCommentItem() {
  return Container(
    width: MediaQuery.of(context).size.width - 150,
    child: Card(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [],
      ),
    ),
  );
}

之后两个ListView的itemBuilder直接返回_buildCommentItem()即可。

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