如何实现含堆叠容器的可横向滚动ListView？

确实应该用Stack组件来实现容器堆叠，你的代码没达到预期效果，核心问题是没有给容器和列表项设置明确尺寸，导致堆叠效果被覆盖或不可见。下面是具体的修复方案：

关键问题分析 #

1. 横向滚动的ListView子项必须指定宽度，否则布局会挤压或拉伸，无法正常显示
2. Stack内部的容器没有设置尺寸，默认会根据内容自适应，导致后一个容器完全覆盖前一个
3. shrinkWrap: true在已固定高度的外层SizedBox中属于冗余配置，可以移除

修改后的完整代码 #

// 先确保定义了deviceWidth
final Size size = MediaQuery.of(context).size;
final double deviceWidth = size.width;

SizedBox(
  height: deviceWidth * 0.55,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: 15,
    itemBuilder: (BuildContext context, int index) => SizedBox(
      // 给每个横向列表项设置固定宽度
      width: deviceWidth * 0.4,
      child: Card(
        child: Stack(
          fit: StackFit.expand, // 让Stack占满父容器（Card）的空间
          children: [
            // 底层容器：占满整个Stack区域
            Container(color: Colors.white),
            // 上层容器：通过Positioned控制位置和大小，实现堆叠效果
            Positioned(
              left: 16,
              right: 16,
              top: 16,
              bottom: 16,
              child: Container(color: Colors.purple),
            ),
          ],
        ),
      ),
    ),
  ),
),

可选的简化堆叠方式 #

如果不需要精确控制位置，也可以给上层容器直接设置尺寸，配合alignment对齐：

Stack(
  alignment: Alignment.center,
  fit: StackFit.expand,
  children: [
    Container(color: Colors.white),
    Container(
      width: deviceWidth * 0.3,
      height: deviceWidth * 0.4,
      color: Colors.purple.withOpacity(0.8), // 加透明度可看到底层容器
    ),
  ],
)

核心要点总结 #

• 横向ListView的子项必须指定宽度，否则无法正常布局
• 使用Stack时，通过fit: StackFit.expand让其占满父容器空间
• 用Positioned或直接设置容器尺寸，避免后一个容器完全覆盖前一个
• 可通过opacity调整上层容器透明度，更直观地查看堆叠效果

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