Flutter ListView仅显示首个元素的问题求助

你的代码存在两个核心问题导致评论列表只显示第一项：

1. 外层SingleChildScrollView内部的Container设置了固定高度MediaQuery.of(context).size.height，限制了整个内容区域的高度，导致后续评论项被截断。
2. 用Expanded包裹ListView的方式在SingleChildScrollView中无效——因为SingleChildScrollView的子元素没有明确的高度约束，Expanded无法正确分配剩余空间。

有两种简单的修复方式：

方式一：调整SingleChildScrollView内部结构 #

移除固定高度约束，给ListView添加shrinkWrap: true属性，让ListView自适应内容高度，由外层SingleChildScrollView统一处理滚动：

修改后的核心代码：

return Scaffold(
  appBar: AppBar(
    centerTitle: false,
    title: Text(selectedSheet.title),
  ),
  body: SingleChildScrollView(
    child: Container(
      width: MediaQuery.of(context).size.width,
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(children: [
        SheetImagesCarousel(
          selectedSheet: selectedSheet,
        ),
        // 保留所有原有静态内容（作者信息、描述、评论标题等）
        Row(
          children: [
            Text(
              'John Doe',
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w600,
                  color: Theme.of(context).colorScheme.onBackground),
            ),
            const Spacer(),
            Text('3h',
                style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w500,
                    color: Theme.of(context).colorScheme.onBackground))
          ],
        ),
        const SizedBox(height: 20),
        Row(
          children: [
            Flexible(
              child: Text(
                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin libero vel augue laoreet porttitor. Donec efficitur neque turpis, id sodales neque posuere malesuada. Sed maximus quis ipsum vulputate varius. Donec condimentum elit vel neque placerat tincidunt. Donec sapien ex, mattis a consectetur a, ultrices quis velit. Nulla facilisi. Vivamus pellentesque, tortor mollis tempus hendrerit, ex tellus luctus nulla, at congue dolor magna quis leo. Mauris gravida est nec leo suscipit, et euismod erat vehicula. Fusce venenatis nisl in congue porttitor. Vestibulum pellentesque orci vitae sem tempor euismod. Sed risus nisi, pulvinar sed pulvinar vitae, vehicula ut libero. Nunc imperdiet lorem quis nibh hendrerit ultrices. Aenean molestie orci vitae magna hendrerit, ut luctus nisl tincidunt. Pellentesque posuere libero id lacus volutpat, et porta tortor dignissim. Ut tincidunt quam sit amet enim rutrum, sed vulputate mauris imperdiet.',
                  style: TextStyle(
                      fontSize: 16,
                      color: Theme.of(context).colorScheme.onBackground)),
            )
          ],
        ),
        const SizedBox(height: 20),
        Row(
          children: [
            Text(
              'Commentaires',
              style: TextStyle(
                  color: Theme.of(context).colorScheme.primary,
                  fontSize: 22,
                  fontWeight: FontWeight.bold),
            ),
            const Spacer(),
            ElevatedButton(
                style: ElevatedButton.styleFrom(
                    foregroundColor:
                        Theme.of(context).colorScheme.onPrimary,
                    backgroundColor: Theme.of(context).colorScheme.primary),
                onPressed: () {},
                child: const Text('Ajouter un commentaire'))
          ],
        ),
        const SizedBox(height: 10),
        // 移除Expanded包裹，添加shrinkWrap: true
        ListView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemCount: _comments.length,
          itemBuilder: (BuildContext context, int index) {
            var comment = _comments[index];
            return CommentContainer(comment: comment);
          },
        )
      ]),
    ),
  ),
);

方式二：用单一ListView承载所有内容 #

直接把页面所有内容（静态区域+评论列表）放在一个ListView中，利用ListView自身的滚动特性，结构更简洁：

修改后的核心代码：

return Scaffold(
  appBar: AppBar(
    centerTitle: false,
    title: Text(selectedSheet.title),
  ),
  body: ListView(
    padding: const EdgeInsets.symmetric(horizontal: 20),
    children: [
      SheetImagesCarousel(selectedSheet: selectedSheet),
      // 所有原有静态内容（作者信息、描述、评论标题、添加按钮等）
      Row(
        children: [
          Text(
            'John Doe',
            style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w600,
                color: Theme.of(context).colorScheme.onBackground),
          ),
          const Spacer(),
          Text('3h',
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w500,
                  color: Theme.of(context).colorScheme.onBackground))
        ],
      ),
      const SizedBox(height: 20),
      Row(
        children: [
          Flexible(
            child: Text(
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin libero vel augue laoreet porttitor. Donec efficitur neque turpis, id sodales neque posuere malesuada. Sed maximus quis ipsum vulputate varius. Donec condimentum elit vel neque placerat tincidunt. Donec sapien ex, mattis a consectetur a, ultrices quis velit. Nulla facilisi. Vivamus pellentesque, tortor mollis tempus hendrerit, ex tellus luctus nulla, at congue dolor magna quis leo. Mauris gravida est nec leo suscipit, et euismod erat vehicula. Fusce venenatis nisl in congue porttitor. Vestibulum pellentesque orci vitae sem tempor euismod. Sed risus nisi, pulvinar sed pulvinar vitae, vehicula ut libero. Nunc imperdiet lorem quis nibh hendrerit ultrices. Aenean molestie orci vitae magna hendrerit, ut luctus nisl tincidunt. Pellentesque posuere libero id lacus volutpat, et porta tortor dignissim. Ut tincidunt quam sit amet enim rutrum, sed vulputate mauris imperdiet.',
                style: TextStyle(
                    fontSize: 16,
                    color: Theme.of(context).colorScheme.onBackground)),
          )
        ],
      ),
      const SizedBox(height: 20),
      Row(
        children: [
          Text(
            'Commentaires',
            style: TextStyle(
                color: Theme.of(context).colorScheme.primary,
                fontSize: 22,
                fontWeight: FontWeight.bold),
          ),
          const Spacer(),
          ElevatedButton(
              style: ElevatedButton.styleFrom(
                  foregroundColor:
                      Theme.of(context).colorScheme.onPrimary,
                  backgroundColor: Theme.of(context).colorScheme.primary),
              onPressed: () {},
              child: const Text('Ajouter un commentaire'))
        ],
      ),
      const SizedBox(height: 10),
      // 直接将评论项转为ListView的子元素
      ..._comments.map((comment) => CommentContainer(comment: comment)).toList(),
    ],
  ),
);

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