如何让Flutter的ListView仅垂直裁剪，保留水平方向阴影？

可以通过嵌套布局的方式实现需求，核心是把垂直裁剪的逻辑交给外层组件，让ListView本身取消裁剪以保留水平阴影：

• 外层使用带固定高度（或受父组件约束高度）的Container，设置clipBehavior: Clip.hardEdge，负责裁剪垂直方向超出边界的列表项。
• 内层ListView.builder设置clipBehavior: Clip.none，取消自身的裁剪限制，让水平方向的阴影能完整显示。
• 给ListView添加水平方向的padding，数值需大于等于阴影的扩散半径，避免阴影被外层容器的水平边缘裁切。

示例代码：

Container(
  height: 400, // 固定高度，限制垂直滚动范围
  clipBehavior: Clip.hardEdge, // 垂直方向裁剪超出部分
  child: ListView.builder(
    clipBehavior: Clip.none, // 关闭自身裁剪，保留水平阴影
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), // 水平padding预留阴影空间
    itemCount: 20,
    itemBuilder: (context, index) {
      return Container(
        margin: const EdgeInsets.symmetric(vertical: 8),
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: const [
            BoxShadow(
              color: Colors.black12,
              blurRadius: 10,
              spreadRadius: 2,
              offset: Offset(0, 2),
            ),
          ],
        ),
        child: Text('列表项 $index'),
      );
    },
  ),
)

这个方案的逻辑是：外层容器控制垂直方向的可视范围并裁剪超出内容，ListView负责滚动和渲染带阴影的列表项，水平padding确保阴影不会被外层容器的左右边缘裁切，完美兼顾垂直裁剪和水平阴影显示的需求。

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