Flutter嵌套PageView阴影被裁剪出现边界，如何避免阴影裁剪？

云原生阿岚

2026-10-17

Flutter 嵌套PageView纵向滚动阴影边界问题解决方案

问题根因

外层纵向PageView出现清晰阴影边界的核心原因是PageView默认的clipBehavior属性为Clip.hardEdge，会对每个子项的溢出内容做硬裁剪。纵向滚动时每个子Page的上下边缘会直接裁切掉超出范围的阴影，就会出现生硬边界；内层横向PageView看起来没有这个问题，只是因为卡片阴影是向上下方向溢出，没有触碰到横向Page的左右裁剪边界而已。

解决方法

给外层纵向PageView.builder添加clipBehavior: Clip.none属性，关闭子项裁剪即可，修改后的代码如下：

class PackViewVertical extends StatelessWidget {
// 顺带修正原代码的笔误：Stateless需要补全为StatelessWidget才能正常编译
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
          // 新增该行，关闭子项溢出内容裁剪
          clipBehavior: Clip.none,
          scrollDirection: Axis.vertical,
          controller: PageController(initialPage: 0, viewportFraction: 0.63),
          itemCount: 5,
          itemBuilder: (_, index) {
            return PageView.builder(
                controller:
                    PageController(initialPage: 0, viewportFraction: 0.63),
                itemCount: sampleCard.length,
                itemBuilder: (context, ind) {
                  return sampleCard[ind];
                });
          }),
    );
  }
}