请排查MealDetailScreen类中ListView.builder的失效问题

问题原因 #

你的代码里，ListView.builder 被嵌套在固定高度（200）的 Container 中，但缺少关键布局配置：

• ListView 默认会尝试占用无限垂直空间，和父容器的固定高度冲突，导致布局计算异常，内容无法渲染
• 外层已经使用 SingleChildScrollView 实现页面滚动，内部 ListView 的默认滚动逻辑会干扰整体布局

解决方案 #

给两个 ListView.builder 添加以下两个属性：

• shrinkWrap: true：让 ListView 根据子项内容高度确定自身高度，不再试图占用无限空间
• physics: const NeverScrollableScrollPhysics()：禁用内部 ListView 的滚动功能，避免和外层滚动组件冲突

修改后的代码片段 #

配料部分的 ListView.builder #

ListView.builder(
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(),
  itemCount: meal.ingredients.length,
  itemBuilder: (ctx, index) => Card(
    //color: Theme.of(context).accentColor,
    child: Padding(
      padding: EdgeInsets.symmetric(
        vertical: 5,
        horizontal: 10,
      ),
      child: Text(meal.ingredients[index]),
    ),
  ),
)

步骤部分的 ListView.builder #

ListView.builder(
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(),
  itemCount: meal.steps.length,
  itemBuilder: (ctx, index) => Column(
    children: [
      ListTile(
        leading: CircleAvatar(
          child: Text('# ${(index + 1)}'),
        ),
        title: Text(meal.steps[index]),
      ),
      Divider(),
    ],
  ),
)

补充说明 #

• shrinkWrap 确保 ListView 适配父容器的固定高度，只占用子项所需空间
• 禁用内部滚动后，整个页面的滚动由外层 SingleChildScrollView 统一控制，体验更连贯

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