Flutter中ListView Builder添加内容后超出Container边界求助

你的问题出在嵌套了两层滚动组件：外层的SingleChildScrollView和内层的ListView.builder，这种嵌套导致滚动逻辑冲突，加上ListView的shrinkWrap: true属性让它试图适应内容高度，最终超出容器边界。

修改步骤： #

• 移除外层的SingleChildScrollView，让ListView.builder直接作为Container的子组件
• 去掉ListView的shrinkWrap: true（默认值为false，无需额外保留）
• 恢复ListView的滚动物理特性，将physics设为默认的滚动行为（或显式设置const AlwaysScrollableScrollPhysics()）

修改后的完整代码： #

Container(
  height: MediaQuery.of(context).size.height * 0.35,
  width: MediaQuery.of(context).size.height * 0.45,
  decoration: const BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Colors.black,
        Colors.brown,
      ],
    ),
    borderRadius: BorderRadius.all(Radius.circular(20)),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 5.0,
        offset: Offset(0, 2),
      ),
    ],
  ),
  child: ListView.builder(
    physics: const AlwaysScrollableScrollPhysics(), // 恢复原生滚动特性
    itemCount: _questions.length,
    itemBuilder: (context, index) {
      final question = _questions.keys.elementAt(index);
      final answer = _questions.values.elementAt(index);
      final number = index + 1;

      return ListTileTheme(
        contentPadding: const EdgeInsets.symmetric(
            horizontal: 16.0, vertical: 8.0),
        tileColor: Colors.grey[900],
        dense: true,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16.0)),
        child: ListTile(
          leading: Text(
            '${number.toInt()}.',
            style: const TextStyle(
              color: Colors.white,
              fontSize: 18.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          title: Text(
            question,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 18.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          subtitle: Text(
            answer.toString(),
            style: const TextStyle(
              color: Colors.white,
              fontSize: 16.0,
              fontWeight: FontWeight.normal,
            ),
          ),
          trailing: const Icon(Icons.arrow_forward_ios_rounded,
              color: Colors.white),
        ),
      );
    },
  ),
),

原理说明： #

Container已经设置了固定高度，ListView.builder作为它的直接子组件时，会自动继承这个高度约束。当列表内容超出容器高度时，ListView内部会自动启用滚动，完全限制在容器边界内。

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